Angular 4 Development and Production Environments with Firebase

Welcome to Angular Firebase. Today, I'm going to show you how to create separate backend environments for development and production with Angular 4. Maintaining separate environments allows you to build and test new features without screwing up data from your live production app.

Step 1 - Create two Firebase Projects

Before jumping into the code, you will need two separate Firebase projects one for development and one for production.

Step 2 Create the Environment Files

I just cloned the FireStarter App from github and the first step is to create the environment files. If you created a new app with the Angular CLI, these files will be here by default. Also, make sure to add these files to your gitignore as they will hold sensitive credentials for your app.

Step 3 paste in the firebase config using the unique API credentials from each of your projects.

Step 4 - Bootstrap the environment in the app module

Now we can import the environment anywhere in our app. In this case, we want to bootstrap firebase config in the app module. These are the necessary lines to wire up the environments with Firebase.

Step 5 - Serve or Build the App

With that done, its possible to serve our app locally using either environment. It will serve in development by default with

ng serve

or serve in product with the --prod flag

ng serve --prod

When deploying the app, make sure to always include the --prod flag.

ng build --prod

Thanks for watching. I'll see you on the other side.

[zpdvyhe]

I just watch this to know the humble beginning of a Legend

[mbkjgtb]

0:00 the beginning of one of the greatest programming YouTube channel

[ytpeerz]

I'm a timetraveler from the 2023. Damn this channel makes my day everyday. It's quite nice and motivating to see where and how he started. Looking up to you man.

[SakirSoft]

Hey Man,
looking at this video retroactively, you come a long way.
Keep up the good work 💪
It is amazing to see your progress.

[winstonmisha]

It is so surreal to hear Jeffs voice uncut.

[rustapan]

It's like someone else was talking back then. Incredible progress!

[schwde]

This is the beginning of 2M subscribers. What a great work!

[marcels.]

the beginning of the greatest coding youtube channel

[masterofcosmos]

Who knows one day he'll hit 10M
And we all just Love his voice 😍

[ggabyte]

The start of my fav code channel. Yr doing great buddy 👌🏼👍✌️

[cybetheus]

Came here to get some motivational bump. I am also going to start a YouTube channel related to technology stuff. But I am quite confused whether should I make videos in English(I am just descent in English) or in my native language (Hindi, I am from India). I am deeply interested in technology and from past 1 year I am grinding in different domains like css, js, ts, react, tailwind, next.js, docker, react native, rust, web assembly, data structures & algorithms (C++), machine learning (python), MERN, postgres, etc.
I am second year college student 😃

[PGamerX]

You deserve the 1 million subscribers, keep up the good work!

[hsdev]

Came here to see the first video after watching your Honeypot documentary. You are an inspiration Jeff.

[thecodingpress]

Who knew that in 5 years, this guy would be a legend :)

[AtomicCodeX]

I decided to scroll up and see your first video
Cuz I started to create fast paced videos
Btw you pretty much inspired me to make content cuz you said “learning is your full time job” and I thought... man I wish I could do that.

[linuxfi]

Amazing! in short time everything important to achieve two environments!

[sudoalex]

Great! Congrats on 1 million subscribers!

[AtomicCodeX]

Dudes inspiring.
Did I hear an audio jungle in the end of the video? 🤣🤣

[srin_meow]

how many of you are here after watching today's 1M sub video

[awlt]

I think this guy has a potential, idk