zenstack/docs/quick-start.md

3.2 KiB

Quick start

Please check out the corresponding guide for creating a new project or adding to an existing project.

Creating a new project

You can choose from these preconfigured starter to create a new project:

With Next-Auth

Follow these steps to create a new project from a preconfigured template using Next-Auth for authentication:

  1. Clone from starter template
npx create-next-app --use-npm -e https://github.com/zenstackhq/nextjs-auth-starter
  1. Install dependencies
npm install
  1. Generate CRUD services and hooks code from the starter model
npm run generate
  1. push database schema to the local sqlite db
npm run db:push
  1. start dev server
npm run dev

With iron-session

Follow these steps to create a new project from a preconfigured template using iron-session for authentication:

  1. Clone from starter template
npx create-next-app --use-npm -e https://github.com/zenstackhq/nextjs-iron-session-starter
  1. Install dependencies
npm install
  1. Generate CRUD services and hooks code from the starter model
npm run generate
  1. push database schema to the local sqlite db
npm run db:push
  1. start dev server
npm run dev

Without integrating authentication

If you would rather not use a template preconfigured with authentication, you can use the barebone starter instead. You can add an authentication solution later or hand-code it by yourself.

  1. Clone from starter template
npx create-next-app --use-npm -e https://github.com/zenstackhq/nextjs-barebone-starter
  1. Install dependencies
npm install
  1. Generate CRUD services and hooks code from the starter model
npm run generate
  1. push database schema to the local sqlite db
npm run db:push
  1. start dev server
npm run dev

Check result

If everything worked, you should see a simple blog app like this: starter screen shot

No worries if a blogger app doesn't suit you. The created project contains a starter model at /zenstack/schema.zmodel. You can modify it and build up your application's own model following this guide.

Adding to an existing project

To add ZenStack to an existing Next.js + Typescript project, run command below:

npx zenstack init

You should find a /zenstack/schema.model file created, containing a simple blogger model in it. No worries if a blogger app doesn't suit you. You can modify it and build up your application's own model following this guide.

Installing VSCode extension

It's good idea to install the VSCode extension so you get syntax highlighting and error checking when authoring model files.