> ## Documentation Index
> Fetch the complete documentation index at: https://devkit4ai.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Local Frontend Development

> Run the Starter Kit locally with hot reloading for rapid development.

Develop your AI-powered application locally with the Starter Kit's built-in development server. All changes to components, pages, and styles reload instantly.

## Start development server

<Steps>
  <Step title="Navigate to your project">
    ```bash theme={null}
    cd your-project-name
    ```
  </Step>

  <Step title="Start the development server">
    ```bash theme={null}
    npm run dev
    ```

    The app runs on `http://localhost:3004` by default.
  </Step>

  <Step title="Verify it's running">
    Open your browser to `http://localhost:3004` and you should see your application homepage.

    <Check>
      Any changes to files in `app/`, `components/`, or `lib/` will hot-reload automatically.
    </Check>
  </Step>
</Steps>

## Development features

**Turbopack:** The Starter Kit uses Next.js 15 with Turbopack for fast refresh and instant updates during development.

**Server Components:** Most components render on the server by default. Client components (marked with `"use client"`) also support hot module replacement.

**Type checking:** TypeScript validates your code in real-time as you edit.

## Common workflows

### Adding a new page

1. Create a new file in `app/` following Next.js App Router conventions
2. Server Components render automatically - no "use client" needed
3. Save the file and navigate to the route in your browser

### Modifying components

1. Edit files in `components/ui/`, `components/generic/`, or `components/project/`
2. Changes appear instantly in the browser
3. TypeScript errors show in your editor and terminal

### Updating configuration

1. Edit `config/app.config.ts` for navigation, branding, footer links
2. Changes to server-side config require restarting the dev server
3. Client-side config changes hot-reload automatically

## Troubleshooting

<AccordionGroup>
  <Accordion title="Port 3004 already in use">
    Stop any existing Next.js processes:

    ```bash theme={null}
    # Find process using port 3004
    lsof -ti:3004

    # Kill the process
    kill -9 $(lsof -ti:3004)
    ```

    Or specify a different port:

    ```bash theme={null}
    PORT=3005 npm run dev
    ```
  </Accordion>

  <Accordion title="Changes not hot-reloading">
    Try these steps:

    1. Save the file explicitly (Cmd+S / Ctrl+S)
    2. Check the terminal for TypeScript errors
    3. Restart the dev server: `Ctrl+C` then `npm run dev`
    4. Clear Next.js cache: `rm -rf .next && npm run dev`
  </Accordion>

  <Accordion title="TypeScript errors blocking development">
    Temporarily disable type checking during development:

    ```bash theme={null}
    # In next.config.ts, add:
    typescript: {
      ignoreBuildErrors: true,
    },
    ```

    <Warning>
      Re-enable type checking before deploying to production.
    </Warning>
  </Accordion>
</AccordionGroup>

## Next steps

<CardGroup cols={2}>
  <Card title="Testing" icon="beaker" href="/development-tools/local-dev/testing">
    Run tests locally before deploying
  </Card>

  <Card title="Deployment" icon="rocket" href="/starter-kit/deployment/production-build">
    Deploy your application to production
  </Card>
</CardGroup>