Learn how to use the new multisite hosting feature from Firebase to deploy multiple web apps to a single project https://angularfirebase.com/lessons/deploy-multiple-sites-to-firebase-hosting/

- Multisite Announcement https://firebase.googleblog.com/2018/08/one-project-multiple-sites-plus-boost.html
2024-02-04T07:19:02.664Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
d60388f5-1502-4ed6-b578-5ba44a7fe4fe
28924e8182aec1652c6d2b0184309869a4684f63c1688b4feb7860d3726c2e3f
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
One of the most frustrating limitations of Firebase is that you can only host one website per project.
Well, at least that was the case until they announced multisite hosting on August 21st, which also happens to be my birthday.
A and this is an awesome birthday present because it solves many of the problems that I've run into in the past.
For example, I've had situations where I need an admin site and a public facing site that both share the same database and cloud functions.
And I've also run into the same problem with internationalization where I have different versions of my app for the languages that I support.
In today's video, you'll learn how solved these problems by deploying multiple progressive web apps to a single Firebase project.
If you're new here, like and subscribe, and grab the full source code from angularfirebase.com.
In this video, I'm using Angular's internationalization library to create different builds for my app based on the languages that I support.
I'll cover this in a future video, but the end result is that in your dist folder, you'll have multiple builds for the different languages.
For example, here we have the default English plus Spanish and French.
Is at this point, we don't have Firebase set up.
So let's go ahead and do that and see if we can get these 3 different apps deployed to the same Firebase project, each on their own unique URL.
The first step is to make sure that we're updated on Firebase tools to version 4.2 or greater.
So run npm I flagg for global and Firebase tools at latest.
Then run Firebase version just to double check that you're at 4.2.
From there, we'll run Firebase init hosting just to set up hosting in this project.
Then instead of the public folder, we'll want to point to the dist folder with our default app which is just our English app in this case.
We can say yes to single page app and then we don't want to overwrite any of our existing code.
Running this command gives us a firebase.json config file that we can use to set up our multisite is in you'll notice that the hosting property is currently an object.
Let's highlight it and add brackets to switch it to an array.
Then we'll need to add an additional property to each hosting object called target.
The target just needs to be a unique name that we can choose, and it's used by Firebase to determine which code to deploy where.
For example, the English target will get deployed from the code that lives in the disk folder for the default app.
Now, in this example, we have 3 different Angular apps.
So we can just copy and paste each object and change out the target and the public directory, and that's all we need to do to configure it on this end.
But the cool thing about this is that we can configure our own rules and rewrites for each hosted URL.
So you might have a multi page application with static content for your blog and then a highly interactive Angular app for your actual user dashboard.
It just adds a ton of flexibility to your Firebase projects.
So So now that we have our hosting configuration done, we need to associate the targets with an actual URL on Firebase Hosting.
So so I'm going to type out the command Firebase target colon apply hosting and then I'll take our English target and apply it to a hosting resource that we've already set up on the Firebase console.
As you can see here, I've already configured multiple hosting resources for my project.
But adding an additional site is as easy as going to the hosting tab and clicking add another site and choosing a unique URL for it.
And for each site you set up, you can also apply a custom domain and you can manage the versions of the deployed site 1 by 1.
Now now that we have that set up, we can go back into the command line and the final argument to our command is just the URL that we set up on the console.
In other words, you're connecting your local code and file system to the remote Firebase URL so the CLI tools know where to deploy your code.
We'll need to do that for each target in the config and then we can just run firebase deploy only hosting and it will deploy all 3 of these apps together.
And just as a side note, version 4.2 of Firebase tools will also only deploy files that have changed on your local file system, um, which will give you much faster deployments on larger projects.
Now that that's done, you can see we have 3 different unique hosting URLs, each one with its own Angular app deployed to it.
And you can also deploy your apps individually if only one of these builds actually changed.
Multisite hosting just adds a lot more flexibility to a Firebase project, especially when you have shared resources among multiple front end applications, which I find to be a very, very common thing in the real world.
I'm gonna wrap things up there.
If this video helped do please like and subscribe.
And if you wanna get really good at building cross platform apps with Firebase, consider becoming a pro member at angularfirebasedot com.
You'll get free access to my full courses plus a whole bunch of exclusive content.
Thanks for watching, and I'll talk to you soon.

Speaker 0: One of the most frustrating limitations of Firebase is that you can only host one website per project. Well, at least that was the case until they announced multisite hosting on August 21st, which also happens to be my birthday. A and this is an awesome birthday present because it solves many of the problems that I've run into in the past. For example, I've had situations where I need an admin site and a public facing site that both share the same database and cloud functions. And I've also run into the same problem with internationalization where I have different versions of my app for the languages that I support.

In today's video, you'll learn how solved these problems by deploying multiple progressive web apps to a single Firebase project. If you're new here, like and subscribe, and grab the full source code from angularfirebase.com. In this video, I'm using Angular's internationalization library to create different builds for my app based on the languages that I support. I'll cover this in a future video, but the end result is that in your dist folder, you'll have multiple builds for the different languages. For example, here we have the default English plus Spanish and French.

Is at this point, we don't have Firebase set up. So let's go ahead and do that and see if we can get these 3 different apps deployed to the same Firebase project, each on their own unique URL. The first step is to make sure that we're updated on Firebase tools to version 4.2 or greater. So run npm I flagg for global and Firebase tools at latest. Then run Firebase version just to double check that you're at 4.2.

From there, we'll run Firebase init hosting just to set up hosting in this project. Then instead of the public folder, we'll want to point to the dist folder with our default app which is just our English app in this case. We can say yes to single page app and then we don't want to overwrite any of our existing code. Running this command gives us a firebase.json config file that we can use to set up our multisite is in you'll notice that the hosting property is currently an object. Let's highlight it and add brackets to switch it to an array.

Then we'll need to add an additional property to each hosting object called target. The target just needs to be a unique name that we can choose, and it's used by Firebase to determine which code to deploy where. For example, the English target will get deployed from the code that lives in the disk folder for the default app. Now, in this example, we have 3 different Angular apps. So we can just copy and paste each object and change out the target and the public directory, and that's all we need to do to configure it on this end.

But the cool thing about this is that we can configure our own rules and rewrites for each hosted URL. So you might have a multi page application with static content for your blog and then a highly interactive Angular app for your actual user dashboard. It just adds a ton of flexibility to your Firebase projects. So So now that we have our hosting configuration done, we need to associate the targets with an actual URL on Firebase Hosting. So so I'm going to type out the command Firebase target colon apply hosting and then I'll take our English target and apply it to a hosting resource that we've already set up on the Firebase console.

As you can see here, I've already configured multiple hosting resources for my project. But adding an additional site is as easy as going to the hosting tab and clicking add another site and choosing a unique URL for it. And for each site you set up, you can also apply a custom domain and you can manage the versions of the deployed site 1 by 1. Now now that we have that set up, we can go back into the command line and the final argument to our command is just the URL that we set up on the console. In other words, you're connecting your local code and file system to the remote Firebase URL so the CLI tools know where to deploy your code.

We'll need to do that for each target in the config and then we can just run firebase deploy only hosting and it will deploy all 3 of these apps together. And just as a side note, version 4.2 of Firebase tools will also only deploy files that have changed on your local file system, um, which will give you much faster deployments on larger projects. Now that that's done, you can see we have 3 different unique hosting URLs, each one with its own Angular app deployed to it. And you can also deploy your apps individually if only one of these builds actually changed. Multisite hosting just adds a lot more flexibility to a Firebase project, especially when you have shared resources among multiple front end applications, which I find to be a very, very common thing in the real world.

I'm gonna wrap things up there. If this video helped do please like and subscribe. And if you wanna get really good at building cross platform apps with Firebase, consider becoming a pro member at angularfirebasedot com. You'll get free access to my full courses plus a whole bunch of exclusive content. Thanks for watching, and I'll talk to you soon.
One of the most frustrating limitations of Firebase is that you can only host one website per project. Well, at least that was the case until they announced multisite hosting on August 21st, which also happens to be my birthday. A and this is an awesome birthday present because it solves many of the problems that I've run into in the past. For example, I've had situations where I need an admin site and a public facing site that both share the same database and cloud functions. And I've also run into the same problem with internationalization where I have different versions of my app for the languages that I support. In today's video, you'll learn how solved these problems by deploying multiple progressive web apps to a single Firebase project. If you're new here, like and subscribe, and grab the full source code from angularfirebase.com. In this video, I'm using Angular's internationalization library to create different builds for my app based on the languages that I support. I'll cover this in a future video, but the end result is that in your dist folder, you'll have multiple builds for the different languages. For example, here we have the default English plus Spanish and French. Is at this point, we don't have Firebase set up. So let's go ahead and do that and see if we can get these 3 different apps deployed to the same Firebase project, each on their own unique URL. The first step is to make sure that we're updated on Firebase tools to version 4.2 or greater. So run npm I flagg for global and Firebase tools at latest. Then run Firebase version just to double check that you're at 4.2. From there, we'll run Firebase init hosting just to set up hosting in this project. Then instead of the public folder, we'll want to point to the dist folder with our default app which is just our English app in this case. We can say yes to single page app and then we don't want to overwrite any of our existing code. Running this command gives us a firebase.json config file that we can use to set up our multisite is in you'll notice that the hosting property is currently an object. Let's highlight it and add brackets to switch it to an array. Then we'll need to add an additional property to each hosting object called target. The target just needs to be a unique name that we can choose, and it's used by Firebase to determine which code to deploy where.
For example, the English target will get deployed from the code that lives in the disk folder for the default app. Now, in this example, we have 3 different Angular apps. So we can just copy and paste each object and change out the target and the public directory, and that's all we need to do to configure it on this end.
software
But the cool thing about this is that we can configure our own rules and rewrites for each hosted URL. So you might have a multi page application with static content for your blog and then a highly interactive Angular app for your actual user dashboard. It just adds a ton of flexibility to your Firebase projects. So So now that we have our hosting configuration done, we need to associate the targets with an actual URL on Firebase Hosting. So so I'm going to type out the command Firebase target colon apply hosting and then I'll take our English target and apply it to a hosting resource that we've already set up on the Firebase console.
As you can see here, I've already configured multiple hosting resources for my project. But adding an additional site is as easy as going to the hosting tab and clicking add another site and choosing a unique URL for it. And for each site you set up, you can also apply a custom domain and you can manage the versions of the deployed site 1 by 1.
websites
Now now that we have that set up, we can go back into the command line and the final argument to our command is just the URL that we set up on the console. In other words, you're connecting your local code and file system to the remote Firebase URL so the CLI tools know where to deploy your code. We'll need to do that for each target in the config and then we can just run firebase deploy only hosting and it will deploy all 3 of these apps together. And just as a side note, version 4.2 of Firebase tools will also only deploy files that have changed on your local file system, um, which will give you much faster deployments on larger projects. Now that that's done, you can see we have 3 different unique hosting URLs, each one with its own Angular app deployed to it. And you can also deploy your apps individually if only one of these builds actually changed.
Multisite hosting just adds a lot more flexibility to a Firebase project, especially when you have shared resources among multiple front end applications, which I find to be a very, very common thing in the real world. I'm gonna wrap things up there. If this video helped do please like and subscribe. And if you wanna get really good at building cross platform apps with Firebase, consider becoming a pro member at angularfirebasedot com. You'll get free access to my full courses plus a whole bunch of exclusive content.
youtube
streaming
Thanks for watching, and I'll talk to you soon.
One of the most frustrating limitations of Firebase is that you can only host one website per project. Well, at least that was the case until they announced multisite hosting on August 21st, which also happens to be my birthday. A and this is an awesome birthday present because it solves many of the problems that I've run into in the past. For example, I've had situations where I need an admin site and a public facing site that both share the same database and cloud functions. And I've also run into the same problem with internationalization where I have different versions of my app for the languages that I support. In today's video, you'll learn how solved these problems by deploying multiple progressive web apps to a single Firebase project. If you're new here, like and subscribe, and grab the full source code from angularfirebase.com. In this video, I'm using Angular's internationalization library to create different builds for my app based on the languages that I support. I'll cover this in a future video, but the end result is that in your dist folder, you'll have multiple builds for the different languages. For example, here we have the default English plus Spanish and French. Is at this point, we don't have Firebase set up. So let's go ahead and do that and see if we can get these 3 different apps deployed to the same Firebase project, each on their own unique URL. The first step is to make sure that we're updated on Firebase tools to version 4.2 or greater. So run npm I flagg for global and Firebase tools at latest. Then run Firebase version just to double check that you're at 4.2. From there, we'll run Firebase init hosting just to set up hosting in this project. Then instead of the public folder, we'll want to point to the dist folder with our default app which is just our English app in this case. We can say yes to single page app and then we don't want to overwrite any of our existing code. Running this command gives us a firebase.json config file that we can use to set up our multisite is in you'll notice that the hosting property is currently an object. Let's highlight it and add brackets to switch it to an array. Then we'll need to add an additional property to each hosting object called target. The target just needs to be a unique name that we can choose, and it's used by Firebase to determine which code to deploy where. For example, the English target will get deployed from the code that lives in the disk folder for the default app. Now, in this example, we have 3 different Angular apps. So we can just copy and paste each object and change out the target and the public directory, and that's all we need to do to configure it on this end. But the cool thing about this is that we can configure our own rules and rewrites for each hosted URL. So you might have a multi page application with static content for your blog and then a highly interactive Angular app for your actual user dashboard. It just adds a ton of flexibility to your Firebase projects. So So now that we have our hosting configuration done, we need to associate the targets with an actual URL on Firebase Hosting. So so I'm going to type out the command Firebase target colon apply hosting and then I'll take our English target and apply it to a hosting resource that we've already set up on the Firebase console. As you can see here, I've already configured multiple hosting resources for my project. But adding an additional site is as easy as going to the hosting tab and clicking add another site and choosing a unique URL for it. And for each site you set up, you can also apply a custom domain and you can manage the versions of the deployed site 1 by 1. Now now that we have that set up, we can go back into the command line and the final argument to our command is just the URL that we set up on the console. In other words, you're connecting your local code and file system to the remote Firebase URL so the CLI tools know where to deploy your code. We'll need to do that for each target in the config and then we can just run firebase deploy only hosting and it will deploy all 3 of these apps together. And just as a side note, version 4.2 of Firebase tools will also only deploy files that have changed on your local file system, um, which will give you much faster deployments on larger projects. Now that that's done, you can see we have 3 different unique hosting URLs, each one with its own Angular app deployed to it. And you can also deploy your apps individually if only one of these builds actually changed. Multisite hosting just adds a lot more flexibility to a Firebase project, especially when you have shared resources among multiple front end applications, which I find to be a very, very common thing in the real world. I'm gonna wrap things up there. If this video helped do please like and subscribe. And if you wanna get really good at building cross platform apps with Firebase, consider becoming a pro member at angularfirebasedot com. You'll get free access to my full courses plus a whole bunch of exclusive content. Thanks for watching, and I'll talk to you soon.
One
one
of
of
the
the
most
most
frustrating
frustrating
limitations
limitations
of
of
Firebase
firebase
is
is
that
that
you
you
can
can
only
only
host
host
one
one
website
website
per
per
project.
project
Well,
well
at
at
least
least
that
that
was
was
the
the
case
case
until
until
they
they
announced
announced
multisite
multisite
hosting
hosting
on
on
August
august
21st,
21st
which
which
also
also
happens
happens
to
to
be
be
my
my
birthday.
birthday
A
a
and
and
this
this
is
is
an
an
awesome
awesome
birthday
birthday
present
present
because
because
it
it
solves
solves
many
many
of
of
the
the
problems
problems
that
that
I've
i've
run
run
into
into
in
in
the
the
past.
past
For
for
example,
example
I've
i've
had
had
situations
situations
where
where
I
i
need
need
an
an
admin
admin
site
site
and
and
a
a
public
public
facing
facing
site
site
that
that
both
both
share
share
the
the
same
same
database
database
and
and
cloud
cloud
functions.
functions
And
and
I've
i've
also
also
run
run
into
into
the
the
same
same
problem
problem
with
with
internationalization
internationalization
where
where
I
i
have
have
different
different
versions
versions
of
of
my
my
app
app
for
for
the
the
languages
languages
that
that
I
i
support.
support
In
in
today's
today's
video,
video
you'll
you'll
learn
learn
how
how
solved
solved
these
these
problems
problems
by
by
deploying
deploying
multiple
multiple
progressive
progressive
web
web
apps
apps
to
to
a
a
single
single
Firebase
firebase
project.
project
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
grab
grab
the
the
full
full
source
source
code
code
from
from
angularfirebase.com.
angularfirebase.com
In
in
this
this
video,
video
I'm
i'm
using
using
Angular's
angular's
internationalization
internationalization
library
library
to
to
create
create
different
different
builds
builds
for
for
my
my
app
app
based
based
on
on
the
the
languages
languages
that
that
I
i
support.
support
I'll
i'll
cover
cover
this
this
in
in
a
a
future
future
video,
video
but
but
the
the
end
end
result
result
is
is
that
that
in
in
your
your
dist
dist
folder,
folder
you'll
you'll
have
have
multiple
multiple
builds
builds
for
for
the
the
different
different
languages.
languages
For
for
example,
example
here
here
we
we
have
have
the
the
default
default
English
english
plus
plus
Spanish
spanish
and
and
French.
french
Is
is
at
at
this
this
point,
point
we
we
don't
don't
have
have
Firebase
firebase
set
set
up.
up
So
so
let's
let's
go
go
ahead
ahead
and
and
do
do
that
that
and
and
see
see
if
if
we
we
can
can
get
get
these
these
3
3
different
different
apps
apps
deployed
deployed
to
to
the
the
same
same
Firebase
firebase
project,
project
each
each
on
on
their
their
own
own
unique
unique
URL.
url
The
the
first
first
step
step
is
is
to
to
make
make
sure
sure
that
that
we're
we're
updated
updated
on
on
Firebase
firebase
tools
tools
to
to
version
version
4.2
4.2
or
or
greater.
greater
So
so
run
run
npm
npm
I
i
flagg
flagg
for
for
global
global
and
and
Firebase
firebase
tools
tools
at
at
latest.
latest
Then
then
run
run
Firebase
firebase
version
version
just
just
to
to
double
double
check
check
that
that
you're
you're
at
at
4.2.
4.2
From
from
there,
there
we'll
we'll
run
run
Firebase
firebase
init
init
hosting
hosting
just
just
to
to
set
set
up
up
hosting
hosting
in
in
this
this
project.
project
Then
then
instead
instead
of
of
the
the
public
public
folder,
folder
we'll
we'll
want
want
to
to
point
point
to
to
the
the
dist
dist
folder
folder
with
with
our
our
default
default
app
app
which
which
is
is
just
just
our
our
English
english
app
app
in
in
this
this
case.
case
We
we
can
can
say
say
yes
yes
to
to
single
single
page
page
app
app
and
and
then
then
we
we
don't
don't
want
want
to
to
overwrite
overwrite
any
any
of
of
our
our
existing
existing
code.
code
Running
running
this
this
command
command
gives
gives
us
us
a
a
firebase.json
firebase.json
config
config
file
file
that
that
we
we
can
can
use
use
to
to
set
set
up
up
our
our
multisite
multisite
is
is
in
in
you'll
you'll
notice
notice
that
that
the
the
hosting
hosting
property
property
is
is
currently
currently
an
an
object.
object
Let's
let's
highlight
highlight
it
it
and
and
add
add
brackets
brackets
to
to
switch
switch
it
it
to
to
an
an
array.
array
Then
then
we'll
we'll
need
need
to
to
add
add
an
an
additional
additional
property
property
to
to
each
each
hosting
hosting
object
object
called
called
target.
target
The
the
target
target
just
just
needs
needs
to
to
be
be
a
a
unique
unique
name
name
that
that
we
we
can
can
choose,
choose
and
and
it's
it's
used
used
by
by
Firebase
firebase
to
to
determine
determine
which
which
code
code
to
to
deploy
deploy
where.
where
For
for
example,
example
the
the
English
english
target
target
will
will
get
get
deployed
deployed
from
from
the
the
code
code
that
that
lives
lives
in
in
the
the
disk
disk
folder
folder
for
for
the
the
default
default
app.
app
Now,
now
in
in
this
this
example,
example
we
we
have
have
3
3
different
different
Angular
angular
apps.
apps
So
so
we
we
can
can
just
just
copy
copy
and
and
paste
paste
each
each
object
object
and
and
change
change
out
out
the
the
target
target
and
and
the
the
public
public
directory,
directory
and
and
that's
that's
all
all
we
we
need
need
to
to
do
do
to
to
configure
configure
it
it
on
on
this
this
end.
end
But
but
the
the
cool
cool
thing
thing
about
about
this
this
is
is
that
that
we
we
can
can
configure
configure
our
our
own
own
rules
rules
and
and
rewrites
rewrites
for
for
each
each
hosted
hosted
URL.
url
So
so
you
you
might
might
have
have
a
a
multi
multi
page
page
application
application
with
with
static
static
content
content
for
for
your
your
blog
blog
and
and
then
then
a
a
highly
highly
interactive
interactive
Angular
angular
app
app
for
for
your
your
actual
actual
user
user
dashboard.
dashboard
It
it
just
just
adds
adds
a
a
ton
ton
of
of
flexibility
flexibility
to
to
your
your
Firebase
firebase
projects.
projects
So
so
So
so
now
now
that
that
we
we
have
have
our
our
hosting
hosting
configuration
configuration
done,
done
we
we
need
need
to
to
associate
associate
the
the
targets
targets
with
with
an
an
actual
actual
URL
url
on
on
Firebase
firebase
Hosting.
hosting
So
so
so
so
I'm
i'm
going
going
to
to
type
type
out
out
the
the
command
command
Firebase
firebase
target
target
colon
colon
apply
apply
hosting
hosting
and
and
then
then
I'll
i'll
take
take
our
our
English
english
target
target
and
and
apply
apply
it
it
to
to
a
a
hosting
hosting
resource
resource
that
that
we've
we've
already
already
set
set
up
up
on
on
the
the
Firebase
firebase
console.
console
As
as
you
you
can
can
see
see
here,
here
I've
i've
already
already
configured
configured
multiple
multiple
hosting
hosting
resources
resources
for
for
my
my
project.
project
But
but
adding
adding
an
an
additional
additional
site
site
is
is
as
as
easy
easy
as
as
going
going
to
to
the
the
hosting
hosting
tab
tab
and
and
clicking
clicking
add
add
another
another
site
site
and
and
choosing
choosing
a
a
unique
unique
URL
url
for
for
it.
it
And
and
for
for
each
each
site
site
you
you
set
set
up,
up
you
you
can
can
also
also
apply
apply
a
a
custom
custom
domain
domain
and
and
you
you
can
can
manage
manage
the
the
versions
versions
of
of
the
the
deployed
deployed
site
site
1
1
by
by
1.
1
Now
now
now
now
that
that
we
we
have
have
that
that
set
set
up,
up
we
we
can
can
go
go
back
back
into
into
the
the
command
command
line
line
and
and
the
the
final
final
argument
argument
to
to
our
our
command
command
is
is
just
just
the
the
URL
url
that
that
we
we
set
set
up
up
on
on
the
the
console.
console
In
in
other
other
words,
words
you're
you're
connecting
connecting
your
your
local
local
code
code
and
and
file
file
system
system
to
to
the
the
remote
remote
Firebase
firebase
URL
url
so
so
the
the
CLI
cli
tools
tools
know
know
where
where
to
to
deploy
deploy
your
your
code.
code
We'll
we'll
need
need
to
to
do
do
that
that
for
for
each
each
target
target
in
in
the
the
config
config
and
and
then
then
we
we
can
can
just
just
run
run
firebase
firebase
deploy
deploy
only
only
hosting
hosting
and
and
it
it
will
will
deploy
deploy
all
all
3
3
of
of
these
these
apps
apps
together.
together
And
and
just
just
as
as
a
a
side
side
note,
note
version
version
4.2
4.2
of
of
Firebase
firebase
tools
tools
will
will
also
also
only
only
deploy
deploy
files
files
that
that
have
have
changed
changed
on
on
your
your
local
local
file
file
system,
system
um,
um
which
which
will
will
give
give
you
you
much
much
faster
faster
deployments
deployments
on
on
larger
larger
projects.
projects
Now
now
that
that
that's
that's
done,
done
you
you
can
can
see
see
we
we
have
have
3
3
different
different
unique
unique
hosting
hosting
URLs,
urls
each
each
one
one
with
with
its
its
own
own
Angular
angular
app
app
deployed
deployed
to
to
it.
it
And
and
you
you
can
can
also
also
deploy
deploy
your
your
apps
apps
individually
individually
if
if
only
only
one
one
of
of
these
these
builds
builds
actually
actually
changed.
changed
Multisite
multisite
hosting
hosting
just
just
adds
adds
a
a
lot
lot
more
more
flexibility
flexibility
to
to
a
a
Firebase
firebase
project,
project
especially
especially
when
when
you
you
have
have
shared
shared
resources
resources
among
among
multiple
multiple
front
front
end
end
applications,
applications
which
which
I
i
find
find
to
to
be
be
a
a
very,
very
very
very
common
common
thing
thing
in
in
the
the
real
real
world.
world
I'm
i'm
gonna
gonna
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
do
do
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
get
get
really
really
good
good
at
at
building
building
cross
cross
platform
platform
apps
apps
with
with
Firebase,
firebase
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebasedot
angularfirebasedot
com.
com
You'll
you'll
get
get
free
free
access
access
to
to
my
my
full
full
courses
courses
plus
plus
a
a
whole
whole
bunch
bunch
of
of
exclusive
exclusive
content.
content
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
The speaker explains that using multiple progressive web apps to host multiple websites per project solves problems like shared data and cloud functions, internationalization, and problems like multiple versions of app versions. They provide instructions on how to update the project, configure host and URL settings, and add a multi-page application with each host. The speaker also suggests becoming a pro member to access free courses and exclusive content.
Host Multiple Apps or Websites on Firebase
One of the most frustrating limitations of Firebase is that you can only host one website per project. Well, at least that was the case until they announced multisite hosting on August 21st, which also happens to be my birthday. A and this is an awesome birthday present because it solves many of the problems that I've run into in the past. For example, I've had situations where I need an admin site and a public facing site that both share the same database and cloud functions. And I've also run into the same problem with internationalization where I have different versions of my app for the languages that I support. In today's video, you'll learn how solved these problems by deploying multiple progressive web apps to a single Firebase project. If you're new here, like and subscribe, and grab the full source code from angularfirebase.com. In this video, I'm using Angular's internationalization library to create different builds for my app based on the languages that I support. I'll cover this in a future video, but the end result is that in your dist folder, you'll have multiple builds for the different languages. For example, here we have the default English plus Spanish and French. Is at this point, we don't have Firebase set up. So let's go ahead and do that and see if we can get these 3 different apps deployed to the same Firebase project, each on their own unique URL. The first step is to make sure that we're updated on Firebase tools to version 4.2 or greater. So run npm I flagg for global and Firebase tools at latest. Then run Firebase version just to double check that you're at 4.2. From there, we'll run Firebase init hosting just to set up hosting in this project. Then instead of the public folder, we'll want to point to the dist folder with our default app which is just our English app in this case. We can say yes to single page app and then we don't want to overwrite any of our existing code. Running this command gives us a firebase.json config file that we can use to set up our multisite is in you'll notice that the hosting property is currently an object. Let's highlight it and add brackets to switch it to an array. Then we'll need to add an additional property to each hosting object called target. The target just needs to be a unique name that we can choose, and it's used by Firebase to determine which code to deploy where. For example, the English target will get deployed from the code that lives in the disk folder for the default app. Now, in this example, we have 3 different Angular apps. So we can just copy and paste each object and change out the target and the public directory, and that's all we need to do to configure it on this end. But the cool thing about this is that we can configure our own rules and rewrites for each hosted URL. So you might have a multi page application with static content for your blog and then a highly interactive Angular app for your actual user dashboard. It just adds a ton of flexibility to your Firebase projects. So So now that we have our hosting configuration done, we need to associate the targets with an actual URL on Firebase Hosting. So so I'm going to type out the command Firebase target colon apply hosting and then I'll take our English target and apply it to a hosting resource that we've already set up on the Firebase console. As you can see here, I've already configured multiple hosting resources for my project. But adding an additional site is as easy as going to the hosting tab and clicking add another site and choosing a unique URL for it. And for each site you set up, you can also apply a custom domain and you can manage the versions of the deployed site 1 by 1. Now now that we have that set up, we can go back into the command line and the final argument to our command is just the URL that we set up on the console. In other words, you're connecting your local code and file system to the remote Firebase URL so the CLI tools know where to deploy your code. We'll need to do that for each target in the config and then we can just run firebase deploy only hosting and it will deploy all 3 of these apps together. And just as a side note, version 4.2 of Firebase tools will also only deploy files that have changed on your local file system, um, which will give you much faster deployments on larger projects. Now that that's done, you can see we have 3 different unique hosting URLs, each one with its own Angular app deployed to it. And you can also deploy your apps individually if only one of these builds actually changed. Multisite hosting just adds a lot more flexibility to a Firebase project, especially when you have shared resources among multiple front end applications, which I find to be a very, very common thing in the real world. I'm gonna wrap things up there. If this video helped do please like and subscribe. And if you wanna get really good at building cross platform apps with Firebase, consider becoming a pro member at angularfirebasedot com. You'll get free access to my full courses plus a whole bunch of exclusive content. Thanks for watching, and I'll talk to you soon.
The speaker explains that using multiple progressive web apps to host multiple websites per project solves problems like shared data and cloud functions, internationalization, and problems like multiple versions of app versions. They provide instructions on how to update the project, configure host and URL settings, and add a multi-page application with each host. The speaker also suggests becoming a pro member to access free courses and exclusive content.