SYNDROM - Angular / NestJS SAAS Boilerplate

Quickstart

PreviousIntroducing the Ultimate Angular & NestJS SaaS Boilerplate NextRegister your admin user

Last updated 2 months ago

After completing your payment, you'll receive an email with access to the GitLab repository containing both the Angular frontend and NestJS backend projects.

Clone both projects to your local machine.

For each project, run the following command to install dependencies:
```
npm i
```
To set up the database and API, run:
```
docker compose up -d
```

Backend Setup

Environment Variables

Create a .env file in the root of your backend project and add the following variables:

API_NAME=db-api
PORT_HTTP=4001

DATABASE_URL=postgresql://dbuser:dbpassword@db-postgres:5432/db

FIREBASE_API_KEY=...
FIREBASE_AUTH_DOMAIN=..
FIREBASE_PROJECT_ID=...
FIREBASE_PRIVATE_KEY=-...
FIREBASE_CLIENT_EMAIL=...
FIREBASE_STORAGE_BUCKET=...

STRIPE_SECRET_KEY=...
STRIPE_WEBHOOK_SECRET=...

Frontend Setup

In the Angular project, locate the app.config.ts file and update the firebaseConfig object with your Firebase credentials:

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "..."
};

Third-Party Services Setup

Stripe

Create a Stripe account at stripe.com.
Retrieve your API keys from the Stripe dashboard.
Update the STRIPE_SECRET_KEY and STRIPE_WEBHOOK_SECRET in your backend .env file with your Stripe credentials.

Firebase

Create a new project on the Firebase Console.
Set up Authentication and Storage services for your project.
Retrieve your Firebase configuration and credentials.
Update the Firebase-related environment variables in your backend .env file.
Update the firebaseConfig object in your frontend app.config.ts file.

Running the Application

Start the backend server:
```
npm run start:dev
```
Start the frontend development server:
```
ng serve
```