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:
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
Make sure to check your emulators ports in the firebase.json
file.
Then when you run emulators for firebase functions, the Angular project will use local emulators for handling authentication, database, functions…
Stripe Setup
First, you need to install Stripe CLI and use stripe login
in order to authenticate.
Forward events to your local server:
Then you can trigger an event via a local trigger:
Now, everything is ready for development. Everything happens locally on your machine.
Testing Stripe Webhooks
When you forward events to the local machine. All webhooks events will be forwarded to Firebase emulators functions.
For example, you create a Stripe Checkout Session, they pay for that session. Then the webhooks will be triggered from the Stripe dashboard. Then on your local machine, the event will be triggered on your Stripe terminal & firebase emulator functions.
Follow me on Twitter for the latest content on Angular, JavaScript & WebDevelopment 👐