Skip to Content
Getting StartedRunning Locally

Running Locally

Learn how to start your Fast Forward Dev development servers and begin building your application.

Make sure you’ve completed the Installation and Environment Variables setup before proceeding.

Quick Start

To run Fast Forward Dev locally, you’ll need to start both the client and server in separate terminal windows.

Start the Server (Backend)

Open a terminal and navigate to your server directory:

cd my-project-server
npm run dev

You should see output like:

[nodemon] starting `ts-node src/index.ts`
Server is running on port 5001
MongoDB connected successfully

The server will be available at http://localhost:5001

Start the Client (Frontend)

Open a new terminal window and navigate to your client directory:

cd my-project-client
npm run dev

You should see output like:

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- event compiled client and server successfully

The client will be available at http://localhost:3000

Open Your Browser

Navigate to http://localhost:3000  to see your application running!

Development Servers

Client (Next.js)

The Next.js development server includes:

  • Hot reload: Changes appear instantly without refreshing
  • Fast refresh: Preserves component state during edits
  • Error overlay: Displays errors directly in the browser
  • TypeScript checking: Real-time type checking

Available Scripts:

# Start development server
npm run dev
 
# Build for production
npm run build
 
# Start production server
npm start
 
# Run linter
npm run lint
 
# Fix linting issues
npm run lint:fix

Server (Express)

The Express development server uses nodemon for automatic restarts:

  • Auto-restart: Server restarts when you change files
  • TypeScript compilation: Compiles .ts files on the fly
  • MongoDB connection: Automatically connects to your database

Available Scripts:

# Start development server
npm run dev
 
# Build TypeScript to JavaScript
npm run build
 
# Start production server (after build)
npm start
 
# Watch mode for building
npm run build:watch
 
# Preview email templates
npm run email
 
# Run linter
npm run lint
 
# Fix linting issues
npm run lint:fix

Development Workflow

Typical Development Flow

  1. Start the server first (it runs on port 5001)
  2. Start the client (it will connect to the server)
  3. Make changes to files
  4. See changes reflected automatically

Working on Different Parts

Frontend Only:

  • You can work on UI components without the server running
  • Some features (auth, payments) require the server

Backend Only:

Full-Stack Features:

  • Keep both servers running
  • Test end-to-end functionality

Port Configuration

By default, Fast Forward Dev uses these ports:

  • Client: 3000
  • Server: 5001

Changing Ports

Client (Next.js):

# Use a different port
PORT=3001 npm run dev

Or modify package.json:

package.json
{
  "scripts": {
    "dev": "next dev -p 3001"
  }
}

Server (Express):

Change the PORT variable in your .env file:

.env
PORT=5002

If you change the server port, update backendUrl in src/config/config.ts in the client:

config.ts
backendUrl: 'http://localhost:5002'  // Changed from 5001

Database Connection

If you’re using MongoDB Atlas (cloud):

  1. Ensure your IP address is whitelisted:

    • Go to MongoDB Atlas dashboard
    • Navigate to “Network Access”
    • Add your current IP address or use 0.0.0.0/0 for development (allow all)

  2. Check your connection string in .env:

MONGODB_URI=mongodb+srv://user:password@cluster.mongodb.net/database

Local MongoDB

If you’re running MongoDB locally:

  1. Install MongoDB on your machine
  2. Start MongoDB:
# macOS
brew services start mongodb-community
 
# Linux
sudo systemctl start mongod
 
# Windows
net start MongoDB
  1. Use local connection string:
MONGODB_URI=mongodb://localhost:27017/ffd-dev

Testing Stripe Locally

To test Stripe webhooks locally, you’ll need the Stripe CLI:

Install Stripe CLI

brew install stripe/stripe-cli/stripe

Forward Webhooks

stripe listen --forward-to localhost:5001/api/stripe/webhook

This will give you a webhook signing secret. Add it to your server .env:

.env
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxx

For detailed Stripe setup, see Stripe Payments.

Common Issues

Port Already in Use

If you see EADDRINUSE error:

# Find what's using the port (macOS/Linux)
lsof -ti:3000 | xargs kill -9
 
# Windows
netstat -ano | findstr :3000
taskkill /PID <PID> /F

MongoDB Connection Failed

  • Check your MONGODB_URI is correct
  • Ensure MongoDB is running (local) or accessible (Atlas)
  • Verify IP whitelist in MongoDB Atlas
  • Check username and password are correct

Module Not Found Errors

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

TypeScript Errors

# Check for type errors
npm run lint
 
# Fix auto-fixable issues
npm run lint:fix

Hot Reload Not Working

  • Restart the development server
  • Clear Next.js cache:
rm -rf .next
npm run dev

Development Tips

Use VS Code Extensions

Recommended extensions:

  • ESLint
  • Prettier
  • TypeScript Vue Plugin (Volar)
  • Tailwind CSS IntelliSense

Browser DevTools

  • React DevTools: Debug React components
  • Network tab: Inspect API calls
  • Console: Check for errors

Database Inspection

  • MongoDB Compass: GUI for viewing your database
  • Mongoose Debug: Add to server code:
mongoose.set('debug', true)

Next Steps

Now that your development environment is running:

Keep both terminals open while developing. If you close them, you’ll need to restart the servers.

Last updated on
InstallationTutorials