Skip to main content
This guide walks you through setting up your local development environment for contributing to TryDevUtils.

​
Prerequisites

Before you begin, ensure you have the following installed:
1

Install Node.js

You need Node.js version 20 or higher. Download it from nodejs.org.
node --version  # Should be v20.x or higher
2

Install Git

Install Git for version control. Download it from git-scm.com.
git --version
3

Install Rust (optional)

Only required if you plan to work on the Tauri desktop app. Install from rustup.rs.
rustc --version
cargo --version

​
Clone the repository

Clone the TryDevUtils repository to your local machine: 
git clone https://github.com/yourusername/trydevutils.git
cd trydevutils

​
Install dependencies

Install all npm dependencies: 
npm install
This installs all packages defined in package.json, including:
  • React and React DOM
  • TypeScript
  • Vite (build tool)
  • Playwright (testing)
  • ESLint (linting)
  • Radix UI components
  • Tauri CLI (desktop app)

​
Development servers

You can run different development servers depending on what you’re working on.

​
Web app

Start the web development server: 
npm run dev
The web app runs on port 8080 by default. Open http://localhost:8080 in your browser.

​
Desktop app (Tauri)

Start the Tauri development server: 
npm run tauri:dev
Tauri development requires Rust and platform-specific toolchains. See the Tauri prerequisites guide for your operating system.

​
Chrome extension

Build the extension and load it in Chrome:
1

Build the extension

npm run extension:prepare
This builds the extension to dist-extension/ with the manifest and icons.
2

Load in Chrome

  1. Open Chrome and navigate to chrome://extensions/
  2. Enable “Developer mode” (toggle in top-right)
  3. Click “Load unpacked”
  4. Select the dist-extension/ directory
3

Test the extension

Click the TryDevUtils icon in your Chrome toolbar to open the extension.

​
Project structure

Understand the key directories in the project: 
trydevutils/
├── src/                  # Web app source code
│   ├── components/       # React components
│   ├── lib/             # Utility functions
│   └── App.tsx          # Main app component
├── src-tauri/           # Tauri desktop app
│   ├── src/             # Rust source code
│   ├── Cargo.toml       # Rust dependencies
│   └── tauri.conf.json  # Tauri configuration
├── extension/           # Chrome extension files
│   ├── manifest.json    # Extension manifest
│   ├── icons/          # Extension icons
│   └── background.ts    # Background script
├── tests/              # Playwright tests
└── public/             # Static assets

​
Environment variables

TryDevUtils doesn’t require environment variables for local development. All utilities run entirely in the browser without external API calls. If you need to configure Vite, you can create a .env file: 
# .env
VITE_APP_VERSION=0.1.4

​
Code quality tools

​
Type checking

Run TypeScript type checking: 
npm run check
This runs tsc && vite build to verify types and build the project.

​
Linting

Run ESLint to check code quality: 
npm run lint
The project uses:
  • ESLint with TypeScript support
  • React Hooks linting
  • React Refresh linting
Configuration: eslint.config.js

​
Development workflow

Follow this workflow when developing new features:
1

Create a branch

git checkout -b feature/your-feature-name
2

Start the dev server

npm run dev
3

Make your changes

Edit files in src/. Changes hot-reload automatically.
4

Test locally

Run the test suite:
npm run test
5

Check types and lint

npm run check
npm run lint
6

Commit your changes

git add .
git commit -m "Add your feature"
git push origin feature/your-feature-name

​
Troubleshooting

​
Port already in use

If port 8080 is already in use, Vite will automatically try the next available port. You can also specify a different port: 
npm run dev -- --port 3000

​
Tauri build fails

Ensure you have all platform-specific dependencies:
  • macOS: Xcode Command Line Tools
  • Linux: webkit2gtk-4.1, libappindicator3, librsvg2
  • Windows: Microsoft Visual Studio C++ Build Tools
See the Tauri prerequisites for details.

​
Module not found errors

Clear node_modules and reinstall: 
rm -rf node_modules package-lock.json
npm install

​
Next steps

Build docs developers (and LLMs) love

Get started for freeTalk to us