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.
2024-02-04T08:42:42.647Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
abc56614-a6f1-4b82-a29f-b720db32a715
605fd0d113edda3fb8c5bb652ec975824358ea286dc3f9f4d9fc44612834dd75
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Welcome to Angular Firebase.
Today, I'm gonna show you how to create separate back end 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 2 firebase projects.
Before jumping into the code, you'll need 2 separate projects on fire firebase.
1 for development and 1 for production.
Step 2, create the environment files.
In this case, I've cloned the Firestarter app from GitHub and the first step is to create the environment files manually.
If you create a new app with the Angular CLI, then these files are gonna be here by default.
And then also make sure to add these files to your git ignore, um, because they hold sensitive credentials and you don't want that ending up in a public repo.
Step 3, paste in the Firebase configuration into each of the environment files.
Step 4, bootstrap the environment in the app module.
Now we can import the environment variables anywhere in our app.
In this case, we wanna bootstrap the Firebase configuration directly in the app module.
The code you're looking at right now is what is specifically needed to wire up Angular Firebase with these separate environments in your app module.
Step 5, serve or compile the app.
With that done, it's possible to serve the app locally using either environment.
Um, all we have to do is add the prod flag to NG serve, and that'll serve the app in production.
Thanks for watching.
I'll see you on the other side.

Speaker 0: Welcome to Angular Firebase. Today, I'm gonna show you how to create separate back end 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 2 firebase projects. Before jumping into the code, you'll need 2 separate projects on fire firebase.

1 for development and 1 for production. Step 2, create the environment files. In this case, I've cloned the Firestarter app from GitHub and the first step is to create the environment files manually. If you create a new app with the Angular CLI, then these files are gonna be here by default. And then also make sure to add these files to your git ignore, um, because they hold sensitive credentials and you don't want that ending up in a public repo.

Step 3, paste in the Firebase configuration into each of the environment files. Step 4, bootstrap the environment in the app module. Now we can import the environment variables anywhere in our app. In this case, we wanna bootstrap the Firebase configuration directly in the app module. The code you're looking at right now is what is specifically needed to wire up Angular Firebase with these separate environments in your app module.

Step 5, serve or compile the app. With that done, it's possible to serve the app locally using either environment. Um, all we have to do is add the prod flag to NG serve, and that'll serve the app in production. Thanks for watching. I'll see you on the other side.
Welcome to Angular Firebase. Today, I'm gonna show you how to create separate back end 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 2 firebase projects. Before jumping into the code, you'll need 2 separate projects on fire firebase. 1 for development and 1 for production. Step 2, create the environment files. In this case, I've cloned the Firestarter app from GitHub and the first step is to create the environment files manually. If you create a new app with the Angular CLI, then these files are gonna be here by default. And then also make sure to add these files to your git ignore, um, because they hold sensitive credentials and you don't want that ending up in a public repo. Step 3, paste in the Firebase configuration into each of the environment files. Step 4, bootstrap the environment in the app module. Now we can import the environment variables anywhere in our app. In this case, we wanna bootstrap the Firebase configuration directly in the app module. The code you're looking at right now is what is specifically needed to wire up Angular Firebase with these separate environments in your app module. Step 5, serve or compile the app. With that done, it's possible to serve the app locally using either environment. Um, all we have to do is add the prod flag to NG serve, and that'll serve the app in production. Thanks for watching. I'll see you on the other side.
Welcome to Angular Firebase. Today, I'm gonna show you how to create separate back end 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 2 firebase projects. Before jumping into the code, you'll need 2 separate projects on fire firebase. 1 for development and 1 for production. Step 2, create the environment files. In this case, I've cloned the Firestarter app from GitHub and the first step is to create the environment files manually. If you create a new app with the Angular CLI, then these files are gonna be here by default. And then also make sure to add these files to your git ignore, um, because they hold sensitive credentials and you don't want that ending up in a public repo. Step 3, paste in the Firebase configuration into each of the environment files. Step 4, bootstrap the environment in the app module. Now we can import the environment variables anywhere in our app. In this case, we wanna bootstrap the Firebase configuration directly in the app module. The code you're looking at right now is what is specifically needed to wire up Angular Firebase with these separate environments in your app module. Step 5, serve or compile the app. With that done, it's possible to serve the app locally using either environment. Um, all we have to do is add the prod flag to NG serve, and that'll serve the app in production. Thanks for watching. I'll see you on the other side.
Welcome
welcome
to
to
Angular
angular
Firebase.
firebase
Today,
today
I'm
i'm
gonna
gonna
show
show
you
you
how
how
to
to
create
create
separate
separate
back
back
end
end
environments
environments
for
for
development
development
and
and
production
production
with
with
Angular
angular
4.
4
Maintaining
maintaining
separate
separate
environments
environments
allows
allows
you
you
to
to
build
build
and
and
test
test
new
new
features
features
without
without
screwing
screwing
up
up
data
data
from
from
your
your
live
live
production
production
app.
app
Step
step
1,
1
create
create
2
2
firebase
firebase
projects.
projects
Before
before
jumping
jumping
into
into
the
the
code,
code
you'll
you'll
need
need
2
2
separate
separate
projects
projects
on
on
fire
fire
firebase.
firebase
1
1
for
for
development
development
and
and
1
1
for
for
production.
production
Step
step
2,
2
create
create
the
the
environment
environment
files.
files
In
in
this
this
case,
case
I've
i've
cloned
cloned
the
the
Firestarter
firestarter
app
app
from
from
GitHub
github
and
and
the
the
first
first
step
step
is
is
to
to
create
create
the
the
environment
environment
files
files
manually.
manually
If
if
you
you
create
create
a
a
new
new
app
app
with
with
the
the
Angular
angular
CLI,
cli
then
then
these
these
files
files
are
are
gonna
gonna
be
be
here
here
by
by
default.
default
And
and
then
then
also
also
make
make
sure
sure
to
to
add
add
these
these
files
files
to
to
your
your
git
git
ignore,
ignore
um,
um
because
because
they
they
hold
hold
sensitive
sensitive
credentials
credentials
and
and
you
you
don't
don't
want
want
that
that
ending
ending
up
up
in
in
a
a
public
public
repo.
repo
Step
step
3,
3
paste
paste
in
in
the
the
Firebase
firebase
configuration
configuration
into
into
each
each
of
of
the
the
environment
environment
files.
files
Step
step
4,
4
bootstrap
bootstrap
the
the
environment
environment
in
in
the
the
app
app
module.
module
Now
now
we
we
can
can
import
import
the
the
environment
environment
variables
variables
anywhere
anywhere
in
in
our
our
app.
app
In
in
this
this
case,
case
we
we
wanna
wanna
bootstrap
bootstrap
the
the
Firebase
firebase
configuration
configuration
directly
directly
in
in
the
the
app
app
module.
module
The
the
code
code
you're
you're
looking
looking
at
at
right
right
now
now
is
is
what
what
is
is
specifically
specifically
needed
needed
to
to
wire
wire
up
up
Angular
angular
Firebase
firebase
with
with
these
these
separate
separate
environments
environments
in
in
your
your
app
app
module.
module
Step
step
5,
5
serve
serve
or
or
compile
compile
the
the
app.
app
With
with
that
that
done,
done
it's
it's
possible
possible
to
to
serve
serve
the
the
app
app
locally
locally
using
using
either
either
environment.
environment
Um,
um
all
all
we
we
have
have
to
to
do
do
is
is
add
add
the
the
prod
prod
flag
flag
to
to
NG
ng
serve,
serve
and
and
that'll
that'll
serve
serve
the
the
app
app
in
in
production.
production
Thanks
thanks
for
for
watching.
watching
I'll
i'll
see
see
you
you
on
on
the
the
other
other
side.
side
success
The speaker explains how to create separate back end environments for development and production using Angular 4. They provide step 1, 2, and 3 steps, including creating projects, creating environment files, and copying them into a chain. The speaker also advises against using environment variables and suggests using a code that includes variables to wire up Angular Guinea.
Angular 4 Development and Production Environments with Firebase
Welcome to Angular Firebase. Today, I'm gonna show you how to create separate back end 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 2 firebase projects. Before jumping into the code, you'll need 2 separate projects on fire firebase. 1 for development and 1 for production. Step 2, create the environment files. In this case, I've cloned the Firestarter app from GitHub and the first step is to create the environment files manually. If you create a new app with the Angular CLI, then these files are gonna be here by default. And then also make sure to add these files to your git ignore, um, because they hold sensitive credentials and you don't want that ending up in a public repo. Step 3, paste in the Firebase configuration into each of the environment files. Step 4, bootstrap the environment in the app module. Now we can import the environment variables anywhere in our app. In this case, we wanna bootstrap the Firebase configuration directly in the app module. The code you're looking at right now is what is specifically needed to wire up Angular Firebase with these separate environments in your app module. Step 5, serve or compile the app. With that done, it's possible to serve the app locally using either environment. Um, all we have to do is add the prod flag to NG serve, and that'll serve the app in production. Thanks for watching. I'll see you on the other side.
The speaker explains how to create separate back end environments for development and production using Angular 4. They provide step 1, 2, and 3 steps, including creating projects, creating environment files, and copying them into a chain. The speaker also advises against using environment variables and suggests using a code that includes variables to wire up Angular Guinea.