05-local-development-and-runtime-setup.md

layout	default
title	Chapter 5: Local Development and Runtime Setup
nav_order	5
parent	Onlook Tutorial

Chapter 5: Local Development and Runtime Setup

Welcome to Chapter 5: Local Development and Runtime Setup. In this part of Onlook Tutorial: Visual-First AI Coding for Next.js and Tailwind, you will build an intuitive mental model first, then move into concrete implementation details and practical production tradeoffs.

This chapter covers local development setup for contributors and advanced operators.

Learning Goals

• install local prerequisites for Onlook development
• bootstrap and run the monorepo runtime
• prepare database and environment dependencies
• establish repeatable local development workflows

Prerequisites (Docs References)

Onlook development docs reference key dependencies including:

• Bun
• Docker
• Node.js
• Codesandbox account/keys and model provider keys for certain flows

Common Development Commands

From the developer docs flow:

bun dev

Additional setup in the docs includes database migration/seed commands for local environments.

Local Ops Checklist

1. clone repo and install dependencies
2. configure required environment variables
3. run database setup commands (if needed)
4. start dev server
5. open local URL and validate editor startup

Source References

• Onlook Running Locally
• Onlook Developer Docs

Summary

You now have a repeatable foundation for local Onlook development.

Next: Chapter 6: Deployment and Team Collaboration

Depth Expansion Playbook

Source Code Walkthrough

docker-compose.yml

The docker-compose module in docker-compose.yml handles a key part of this chapter's functionality:

name: onlook

services:
  web-client:
    build:
      context: .
      dockerfile: Dockerfile
    env_file:
      - apps/web/client/.env
    ports:
      - "3000:3000"
    restart: unless-stopped
    network_mode: host

networks:
  supabase_network_onlook-web:
    external: true

This module is important because it defines how Onlook Tutorial: Visual-First AI Coding for Next.js and Tailwind implements the patterns covered in this chapter.

docs/next.config.ts

The next.config module in docs/next.config.ts handles a key part of this chapter's functionality:

/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
import { createMDX } from 'fumadocs-mdx/next';
import { NextConfig } from 'next';
import path from 'node:path';

const withMDX = createMDX();

const nextConfig: NextConfig = {
    reactStrictMode: true,
};

if (process.env.NODE_ENV === 'development') {
    nextConfig.outputFileTracingRoot = path.join(__dirname, '../../..');
}

export default withMDX(nextConfig);

This module is important because it defines how Onlook Tutorial: Visual-First AI Coding for Next.js and Tailwind implements the patterns covered in this chapter.

eslint.config.js

The eslint.config module in eslint.config.js handles a key part of this chapter's functionality:

import baseConfig from "@onlook/eslint/base";

/** @type {import('typescript-eslint').Config} */
export default [
  ...baseConfig,
  {
    files: ["tooling/**/*.js"],
  },
];

This module is important because it defines how Onlook Tutorial: Visual-First AI Coding for Next.js and Tailwind implements the patterns covered in this chapter.

How These Components Connect

flowchart TD
    A[docker-compose]
    B[next.config]
    C[eslint.config]
    A --> B
    B --> C

Loading