Skip to content
Cloudwerk

Installation

Get started with Cloudwerk by creating a new project or adding it to an existing Cloudflare Workers project.

Prerequisites

Section titled “Prerequisites”

Before you begin, ensure you have:

  • Node.js 18+ - Cloudwerk requires Node.js 18 or later
  • pnpm, npm, or yarn - Any package manager works
  • Cloudflare account - Sign up for free
  • Wrangler CLI - Cloudflare’s CLI tool (installed automatically)

Create a New Project

Section titled “Create a New Project”
Terminal window
pnpm create cloudwerk@latest my-app
cd my-app
pnpm install
pnpm dev

The CLI will prompt you with a few questions:

? Project name: my-app
? Include example pages? Yes
? Include authentication? Yes
? Include database (D1)? Yes
? TypeScript or JavaScript? TypeScript

Manual Installation

Section titled “Manual Installation”

If you prefer to set up Cloudwerk manually or add it to an existing project:

  1. Create a new directory and initialize your project:

    Terminal window
    mkdir my-app && cd my-app
    pnpm init

  2. Install Cloudwerk packages:

    Terminal window
    pnpm add @cloudwerk/core @cloudwerk/cli @cloudwerk/ui

  3. Install development dependencies:

    Terminal window
    pnpm add -D wrangler typescript @types/node

  4. Create a cloudwerk.config.ts file:

    // cloudwerk.config.ts
    import { defineConfig } from '@cloudwerk/core';
    

    export default defineConfig({
      // Your configuration options
    });

  5. Create your app directory structure:

    Terminal window
    mkdir -p app

  6. Add scripts to package.json:

    {
      "scripts": {
        "dev": "cloudwerk dev",
        "build": "cloudwerk build",
        "deploy": "cloudwerk deploy"
      }
    }

Project Structure

Section titled “Project Structure”

After installation, your project will look like this:

my-app/
├── app/
│   ├── page.tsx              # Home page (/)
│   ├── layout.tsx            # Root layout
│   ├── middleware.ts         # Global middleware
│   └── api/
│       └── health/
│           └── route.ts      # API endpoint (/api/health)
├── public/                   # Static assets
├── cloudwerk.config.ts       # Configuration
├── wrangler.toml             # Cloudflare config
├── tsconfig.json
└── package.json

Verify Installation

Section titled “Verify Installation”

Start the development server:

Terminal window
pnpm dev

Open http://localhost:8787 in your browser. You should see the Cloudwerk welcome page.

Next Steps

Section titled “Next Steps”