Skip to main content
This guide walks you through setting up a development environment for Fylepad.

​
Prerequisites

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

Node.js

Install Node.js v18 or later. You can download it from nodejs.org.Verify your installation:
node --version
2

pnpm

Fylepad uses pnpm as its package manager. Install it globally:
npm install -g pnpm
Verify your installation:
pnpm --version
3

Rust (for desktop builds)

If you plan to build the desktop application, install Rust via rustup:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
Follow the Tauri prerequisites guide for platform-specific dependencies:
  • Windows: Microsoft Visual Studio C++ Build Tools
  • macOS: Xcode Command Line Tools
  • Linux: System dependencies (webkit2gtk, etc.)

​
Clone the repository

Clone the Fylepad repository and navigate to the project directory: 
git clone https://github.com/imrofayel/fylepad.git
cd fylepad

​
Install dependencies

Install all required Node.js packages: 
pnpm install
This command will:
  • Install all dependencies from package.json
  • Run the postinstall script to prepare the Nuxt environment
  • Set up the Tauri CLI if building for desktop

​
Development servers

​
Web development

To run the web version with hot module replacement: 
pnpm dev
This starts the Nuxt development server at http://localhost:3000. The server will automatically reload when you make changes to the code.
The development server is configured to be accessible on your network (0.0.0.0) for testing on mobile devices.

​
Desktop development

To run the desktop application in development mode: 
pnpm tauri:dev
This command will:
  1. Start the Nuxt development server
  2. Launch the Tauri development window
  3. Enable hot reloading for both frontend and backend changes
The first build may take several minutes as Rust compiles all dependencies. Subsequent builds will be much faster.

​
Project structure

After setup, your project structure will look like this: 
fylepad/
├── components/          # Vue components
├── extensions/          # TipTap custom extensions
├── pages/              # Nuxt pages (file-based routing)
├── utils/              # Utility functions
├── stores/             # Pinia state stores
├── assets/             # CSS and static assets
├── public/             # Public static files
├── src-tauri/          # Rust backend code
│   ├── src/           # Rust source files
│   ├── Cargo.toml     # Rust dependencies
│   └── tauri.conf.json # Tauri configuration
├── nuxt.config.ts      # Nuxt configuration
├── package.json        # Node.js dependencies
└── tailwind.config.js  # Tailwind configuration

​
Environment configuration

Fylepad uses environment variables prefixed with VITE_ or TAURI_ (configured in nuxt.config.ts). Create a .env file in the project root for any environment-specific settings: 
# Example .env file
VITE_API_URL=http://localhost:3000

​
Verifying your setup

To verify everything is working correctly:
1

Run the web dev server

pnpm dev
Visit http://localhost:3000 and verify the editor loads.
2

Run the desktop app (optional)

pnpm tauri:dev
Verify the desktop window opens and the editor functions properly.

​
Troubleshooting

If port 3000 is occupied, you can specify a different port:
PORT=3001 pnpm dev
Ensure you have installed all platform-specific prerequisites. Check the Tauri prerequisites guide for your operating system.
Try clearing the pnpm cache and reinstalling:
pnpm store prune
pnpm install

​
Next steps

Architecture

Learn about the project structure

Building

Build Fylepad for production

Build docs developers (and LLMs) love

Get started for freeTalk to us