Ultimate Local Development Setup with Angular, Firebase & Stripe

Building an eCommerce website is a complicated task. Especially when you have different services that need to communicate with each other. Here is the scenario where you don’t have everything ready locally for development.

As in the title, the stacks that use to create an eCommerce site are

• Angular — frontend
• Firebase — authentication + database + storage + API
• Stripe — payment handling

Without Local Development Ability

Most of the reasons why you should set up the local development is TIME SAVING, and TIME is $$$.

• Authentication is done directly to your firebase project
• If you are using Webhook, cloud functions deployment takes time & money — especially for starters
• Database activities are eating your free tire— and you shouldn’t work with production data

Without Local Development Ability

What happens in Local, Stays in Local — not for Stripe payment record for development.

Angular & Firebase Emulators Setup

I’m not are going into detail on how to create a new Angular project. Suppose that you already have a working Angular project with @angular/fire in your package.json

// app.module.ts
import { AngularFireAuthModule, USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/auth'
import { AngularFirestoreModule, USE_EMULATOR as USE_FIRESTORE_EMULATOR } from '@angular/fire/firestore'
import { AngularFireFunctionsModule, USE_EMULATOR as USE_FUNCTIONS_EMULATOR } from '@angular/fire/functions'
....
providers: [
    AuthService,
    {
      provide: USE_AUTH_EMULATOR,
      useValue: environment.useEmulators ? ['localhost', 9099] : undefined,
    },
    {
      provide: USE_FIRESTORE_EMULATOR,
      useValue: environment.useEmulators ? ['localhost', 8080] : undefined,
    },
    {
      provide: USE_FUNCTIONS_EMULATOR,
      useValue: environment.useEmulators ? ['localhost', 5001] : undefined,
    },
  ],