#Quick Start

#1. Initialize Project

#Method 1: Create via CLI

You can create a Zess project using the @zessjs/cli cli:

npx -p @zessjs/cli init my-app

Here, my-app is the name of the project directory to be created. After running the command, simply follow the prompts to enter the project name and select a template to quickly create a Zess project.

The newly created Zess project comes pre-configured with a complete development toolchain, including a routing system, the Vitest testing framework, as well as Tailwind CSS, ESLint, and Prettier, making it ready-to-use out of the box. Its detailed file structure is as follows:

my-app/
├── .gitignore
├── README.md
├── package.json
├── eslint.config.ts
├── index.html
├── tsconfig.json
├── vite.config.ts
├── public/
│   └── zess.svg
├── src/
│   ├── App.tsx
│   ├── assets/
│   │   ├── style.css
│   │   └── vite.svg
│   └── pages/
│       ├── ConditionalPage.tsx
│       ├── CounterPage.tsx
│       ├── HomePage.tsx
│       └── ListPage.tsx
└── tests/
    └── HelloWorld.test.tsx

#Method 2: Manual Creation

First, you can choose an existing project directory, or initialize a new project using the following command:

mkdir my-app && cd my-app && npm init -y

Next, install the Zess core library using npm, pnpm, yarn, or bun:

npm install @zessjs/core

Then install the Zess JSX compiler plugin (if Vite is not installed, please install it as well):

npm install @zessjs/vite-plugin -D

Add the following scripts to your package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Import @zessjs/vite-plugin in your Vite configuration:

import { defineConfig } from 'vite'
import zess from '@zessjs/vite-plugin'

export default defineConfig({
  plugins: [zess()],
})

Also, create a new tsconfig.json with the following content:

{
  "compilerOptions": {
    "target": "ESNext",
    "jsx": "preserve",
    "jsxImportSource": "@zessjs/core",
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "moduleDetection": "force",
    "module": "preserve",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "types": ["vite/client"],
    "strict": true,
    "noUnusedLocals": true,
    "declaration": true,
    "noEmit": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

#2. Start Development Server

Run the following command to start the development server:

npm run dev

This command will start the Vite development server, which runs by default on http://localhost:5173. You can visit this address in your browser to see the project in action.

#3. Build for Production

Run the following command to build the project for production:

npm run build

By default, the build output will be located in the dist directory.

#4. Preview Build Locally

Run the following command to start a local preview server:

npm run preview

This command will start a local server to preview the built project.