Running Your App

Now that your project is configured, let’s start the development server and explore the generated application.

Start the Development Server

1. Navigate to your project

   cd my-app

2. Start the dev server

   npm run dev

   You’ll see output like:

   ▲ Next.js 15.x.x
   - Local:        http://localhost:3000
   - Environments: .env
   
   ✓ Starting...
   ✓ Ready in 2.1s

3. Open in your browser

   Visit http://localhost:3000 to see your app.

Explore the Generated App

If you selected Clerk during setup, your app includes a complete authentication system.

Authentication Pages

Sign Up

Visit /sign-up to create a new account. Uses Clerk’s pre-built sign-up component with built-in validation.

Sign In

Visit /sign-in to sign in with existing credentials. Uses Clerk’s pre-built sign-in component with error handling.

Try the Auth Flow

1. Create an account

   Go to http://localhost:3000/sign-up and register with:

   • Email address
   • Password

2. Sign in

   After registration, go to http://localhost:3000/sign-in and sign in.

3. Check the database

   Use Drizzle Studio to inspect your data:

   npx drizzle-kit studio

   This opens a web interface at https://local.drizzle.studio where you can browse your tables and data.

Available Scripts

Your project includes these npm scripts:

Script	Description
npm run dev	Start development server with hot reload
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint

Database Scripts

Script	Description
npx drizzle-kit push	Push schema changes to database
npx drizzle-kit studio	Open Drizzle Studio GUI
npx drizzle-kit generate	Generate migration files
npx drizzle-kit migrate	Run pending migrations

Using Docker Compose

If you selected BullMQ during setup, your project includes a docker-compose.yml for Redis:

# Start Redis in the background
docker compose up -d

# View logs
docker compose logs -f

# Stop services
docker compose down

Making Changes

Adding UI Components

RocketFuel includes shadcn/ui. Add new components with:

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog

Browse all available components at ui.shadcn.com.

Modifying the Database Schema

1. Edit the schema

   Open src/server/db/schema.ts and add or modify tables.

2. Push changes

   npx drizzle-kit push

   For production, use migrations instead:

   npx drizzle-kit generate
   npx drizzle-kit migrate

Tip

During development, drizzle-kit push is faster for rapid iteration. Use migrations for production deployments.

Troubleshooting

Database Connection Errors

If you see connection errors:

1. Verify PostgreSQL is running
2. Check DATABASE_URL in your .env file
3. Ensure the database exists
4. Test the connection string with a tool like psql

Auth Not Working

If authentication fails:

1. Verify NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY is set
2. Verify CLERK_SECRET_KEY is set
3. Ensure database migrations have run (npx drizzle-kit push)

Port Already in Use

If port 3000 is busy:

# Find what's using the port
lsof -i :3000

# Or use a different port
npm run dev -- -p 3001

Next Steps

You now have a working RocketFuel application! Here’s where to go next:

• CLI Reference - Learn about all available commands
• Environment Variables - Configure your app for different environments
• Authentication - Deep dive into Clerk configuration
• Database Setup - Advanced Drizzle ORM patterns