Skip to main content

​
Quick Start Guide

Get your Jet application up and running in 30 seconds. This guide will have you serving a fully-featured Angular app with minimal setup.
Prerequisites: Node.js 18+ and npm installed on your system

​
Create Your Project

1

Use the Template

Click the button below or visit the Jet repository to create a new repository from the template:

Create repository from template
This creates a new repository in your GitHub account with all of Jet’s code.
2

Clone Your Repository

Clone your newly created repository to your local machine:
git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name
3

Set Up Environment

Create your environment configuration file:
cp .env.example .env
The .env file should contain:
.env
NG_APP_GOOGLE_ANALYTICS_MEASUREMENT_ID=your-google-analytics-measurement-id
NG_APP_IS_ANALYTICS_ENABLED=false
NG_APP_IS_LOGGING_ENABLED=true
NG_APP_SUPABASE_PUBLISHABLE_OR_ANON_KEY=your-supabase-key
NG_APP_SUPABASE_URL=http://localhost:54321
You can start with the default values. Update Supabase credentials later when you’re ready to add authentication.
4

Install Dependencies

Install all required packages:
npm install
This command also enables Husky for git hooks, which enforces code quality standards.
5

Start Development Server

Launch the development server:
ng serve
Or use the npm script:
npm start
Your app will be available at http://localhost:4200
The development server includes security headers and hot module replacement for a great development experience.

​
Clean Up Template Files

Before you start building, remove template-specific files: 
# Delete all template files
rm .github/FUNDING.yml CHANGELOG.md LICENSE
1

Update Package Version

Reset the version in package.json and package-lock.json to 0.0.0:
package.json
{
  "name": "jet",
  "version": "0.0.0",
  "license": "MIT"
}
Remove the license property if you deleted the LICENSE file, or add your own license.
2

Update Base URL

Find and replace https://jet-tau.vercel.app with your app’s production URL throughout the codebase:
# Using grep to find occurrences
grep -r "jet-tau.vercel.app" .
Update in:
  • Sitemap files in public/sitemaps/
  • Security headers in angular.json
  • Any configuration files

​
Verify Your Setup

Open your browser to http://localhost:4200 and you should see:
  • The Jet home page
  • Working navigation with toolbar and sidenav
  • Theme switcher (light/dark mode)
  • Language selector
  • Responsive layout
All features work out of the box except authentication, which requires Supabase configuration.

​
Available Commands

Here are the most commonly used commands: 
# Start dev server
ng serve
# or
npm start

# Run tests
ng test

# Lint code
ng lint

​
Project Structure

Jet follows a clean, organized structure: 
jet/
├── src/
│   ├── app/
│   │   ├── components/      # UI components
│   │   ├── services/        # Business logic
│   │   ├── guards/          # Route guards
│   │   ├── interceptors/    # HTTP interceptors
│   │   ├── directives/      # Custom directives
│   │   ├── enums/           # Enumerations
│   │   ├── interfaces/      # TypeScript interfaces
│   │   ├── constants/       # App constants
│   │   ├── injection-tokens/ # DI tokens
│   │   └── app.config.ts    # App configuration
│   ├── styles.scss          # Global styles
│   └── main.ts              # Entry point
├── public/
│   ├── i18n/                # Translation files
│   ├── images/              # Static images
│   └── sitemaps/            # SEO sitemaps
├── supabase/
│   ├── functions/           # Edge functions
│   └── migrations/          # Database migrations
└── angular.json             # Angular config

​
What’s Next?

Customize Your App

Update colors, fonts, and branding to match your style

Add Authentication

Set up Supabase for user authentication and database

Create Components

Generate new components with ng g c components/my-component

Deploy

Deploy to Vercel, Netlify, or any static hosting

​
Common Tasks

​
Generate a New Component

ng g c components/my-component

​
Generate a New Service

ng g s services/my-service/my-service

​
Add a New Route

Edit src/app/app.routes.ts: 
export const routes: Routes = [
  { component: HomePageComponent, path: '' },
  { component: MyNewPageComponent, path: 'my-page' },
  // ... other routes
];

​
Nice to Do

Optional improvements for production apps:
Update the namespace in src/app/services/storage/storage.service.ts to something unique to your app:
private readonly NAMESPACE = 'my-app'; // Change from 'jet'
Also update project_id in supabase/config.toml:
project_id = "my-unique-project-id"
Customize README.md with your project information, removing Jet-specific content.
Adjust pre-commit hooks in .husky/pre-commit to match your workflow.

​
Need Help?

If you encounter issues:

Check Installation Guide

Detailed setup and troubleshooting

Create an Issue

Report bugs or ask questions
The development server runs with strict CSP headers and security features enabled, so you might need to adjust them for certain third-party scripts.

​
What You Get Out of the Box

  • Angular 21+ with latest features (Signals, control flow, Zoneless)
  • Angular Material with custom theming
  • Supabase integration for auth and database
  • PWA support with service worker
  • i18n via Transloco
  • Strict linting with ESLint
  • Auto formatting with Prettier
  • Git hooks with Husky
  • Commit linting with Commitlint
  • Security headers configured
  • Production services (alerts, analytics, logging)
  • Responsive layout with Material components
You’re now ready to build! Check out the Installation guide for advanced configuration options.

Build docs developers (and LLMs) love

Get started for freeTalk to us