User Guides

Step-by-step guides to help you get the most out of JS-Stack CLI.

Getting Started Guides

Creating Your First Project

Choose your project name:
```
npx create-js-stack@latest my-first-app
```
Follow the interactive prompts:
- Select your frontend framework
- Choose a backend (or none for full-stack frameworks)
- Pick a database and ORM
- Configure authentication
- Select addons
Navigate to your project:
```
cd my-first-app
```
Install dependencies (if not auto-installed):
```
npm install
# or
pnpm install
```
Start development:
```
npm run dev
```

Common Workflows

Building a SaaS Application

Create the project:

npx create-js-stack@latest my-saas \
  --frontend next \
  --database postgres \
  --orm prisma \
  --api trpc \
  --auth better-auth \
  --addons docker,testing,biome \
  --package-manager pnpm \
  --git \
  --install

Set up environment variables:

cp .env.example .env
# Edit .env with your configuration

Set up database:
```
npx prisma migrate dev
```
Start development:
```
pnpm dev
```

Creating an API Backend

Create API-only project:

npx create-js-stack@latest my-api \
  --frontend none \
  --backend express \
  --database postgres \
  --orm prisma \
  --api trpc \
  --auth better-auth \
  --addons docker,testing \
  --package-manager pnpm \
  --git \
  --install

Configure environment:

cp .env.example .env
# Add database URL and other configs

Run migrations:
```
npx prisma migrate dev
```
Start server:
```
pnpm dev
```

Setting Up a Monorepo

Create monorepo project:

npx create-js-stack@latest my-monorepo \
  --frontend react-router,vue \
  --backend express \
  --database postgres \
  --orm prisma \
  --addons turborepo,testing,biome \
  --package-manager pnpm \
  --git \
  --install

Project structure:

my-monorepo/
├── apps/
│   ├── web-react/
│   └── web-vue/
├── packages/
│   ├── api/
│   └── shared/
└── turbo.json

Run all projects:
```
pnpm dev
```

Advanced Topics

Custom Templates

You can extend the CLI with custom templates:

Create template directory:

templates/
└── custom/
    └── component.jsx.hbs

Use Handlebars syntax:

import React from 'react';

export default function {{componentName}}() {
  return (
    <div>
      <h1>{{projectName}}</h1>
    </div>
  );
}

Programmatic Usage

Use the CLI programmatically in your code:

import { createProject } from "create-js-stack";

await createProject({
  projectName: "my-app",
  // ... configuration
});

See Programmatic API for details.

CI/CD Integration

Use the CLI in your CI/CD pipeline:

# .github/workflows/setup.yml
- name: Create project
  run: |
    npx create-js-stack@latest my-app \
      --frontend next \
      --backend none \
      --database postgres \
      --orm prisma \
      --auth better-auth \
      --yes \
      --no-install

Troubleshooting

Common Issues

Issue: Template not found

Solution: Ensure templates directory exists and paths are correct

Issue: Compatibility error

Solution: Check Compatibility Guide for valid combinations

Issue: Directory already exists

Solution: Use --directory-conflict merge or --directory-conflict overwrite

Issue: Dependencies fail to install

Solution: Try --no-install and install manually

User Guides

User Guides

Getting Started Guides

Creating Your First Project

Common Workflows

Building a SaaS Application

Creating an API Backend

Setting Up a Monorepo

Advanced Topics

Custom Templates

Programmatic Usage

CI/CD Integration

Troubleshooting

Common Issues

Next Steps

On this page