SYNDROM - Angular / NestJS SAAS Boilerplate
  • Introducing the Ultimate Angular & NestJS SaaS Boilerplate
  • Getting Started
    • Quickstart
    • Register your admin user
  • Basics
    • Admin Dashboard: Managing Stripe Products
    • Data Management and API Extensibility
    • Media Management with Firebase
    • Frontend Architecture and Reusable Components
    • OpenAPI
    • Testing Strategy
  • What's more ?
Powered by GitBook
On this page
  • Backend Setup
  • Frontend Setup
  • Third-Party Services Setup
  • Running the Application
  1. Getting Started

Quickstart

PreviousIntroducing the Ultimate Angular & NestJS SaaS BoilerplateNextRegister your admin user

Last updated 7 months ago

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

  1. Clone both projects to your local machine.

  1. For each project, run the following command to install dependencies:

    npm i
  2. 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

  1. Retrieve your API keys from the Stripe dashboard.

  2. Update the STRIPE_SECRET_KEY and STRIPE_WEBHOOK_SECRET in your backend .env file with your Stripe credentials.

Firebase

  1. Set up Authentication and Storage services for your project.

  2. Retrieve your Firebase configuration and credentials.

  3. Update the Firebase-related environment variables in your backend .env file.

  4. Update the firebaseConfig object in your frontend app.config.ts file.

Running the Application

  1. Start the backend server:

    npm run start:dev
  2. Start the frontend development server:

    ng serve

Create a Stripe account at .

Create a new project on the .

Your SaaS application should now be up and running! Access the frontend at http://localhost:4200 and the backend API at http://localhost:4001.

stripe.com
Firebase Console