Before deploying to your live site, you'll want to view and test your changes.
Firebase Hosting enables you to view and test changes locally and interact
with emulated backend project resources. If you need your teammates to view and
test your changes, Hosting can create sharable, temporary preview URLs for
your site. We even support a
GitHub integration
to deploy from a pull
request.
Before you begin
Complete the steps listed on the
Hosting Get Started page
, specifically the
following tasks:
- Install or update the Firebase CLI to its latest version.
- Connect the local project directory (containing your app's content) to your
Firebase project.
You can optionally deploy your app's Hosting content and config, but it's
not a prerequisite for the steps on this page.
Step 1:
Test locally
If you're making quick iterations or you want your app to interact with emulated
backend project resources, you can test your Hosting content and config
locally. When testing locally, Firebase serves your web app at a locally hosted
URL.
Hosting is part of the
Firebase Local Emulator Suite
,
which enables your app to interact with your
emulated
Hosting content and
config, as well as optionally your
emulated
project resources (functions,
databases, and rules).
(Optional)
By default, your locally hosted app will interact with
real
,
not
emulated
, project resources (functions, database, rules, etc.).
You can instead optionally connect your app to use any
emulated
project
resources that you've configured. Learn more:
Realtime Database
|
Cloud Firestore
|
Cloud Functions
From the root of your local project directory, run the following command:
firebase emulators:start
Open your web app at the local URL returned by the CLI (usually
http://localhost:5000
).
To update the local URL with changes, refresh your browser.
Test from other local devices
By default, the emulators only respond to requests from
localhost
. This
means that you'll be able to access your hosted content from your computer's web
browser but not from other devices on your network. If you'd like to test from
other local devices, configure your
firebase.json
like so:
"emulators": {
// ...
"hosting": {
"port": 5000
"host": "0.0.0.0"
}
}
Test locally using
firebase serve
(not recommended)
When using
firebase serve
, your app interacts with an
emulated
backend for
your Hosting content and config (and optionally functions) but your
real
backend for all other project resources.
From the root of your local project directory, run the following command:
firebase serve --only hosting
Open your web app at the local URL returned by the CLI (usually
http://localhost:5000
).
To update the local URL with changes, refresh your browser.
Use
firebase serve
to test from other local devices
By default,
firebase serve
only responds to requests from
localhost
. This
means that you'll be able to access your hosted content from your computer's web
browser but not from other devices on your network. If you'd like to test from
other local devices, use the
--host
flag, like so:
firebase serve --host 0.0.0.0 // accepts requests to any host
Step 2:
Preview and share
If you want others to view changes to your web app before going live, you can
use preview channels.
After you deploy to a preview channel, Firebase serves your web app at a
"preview URL", which is a sharable, temporary URL. When using a preview URL,
your web app interacts with your
real
backend for all project resources (with
the exception of any
"pinned" functions in your rewrites
config
).
Note that although preview URLs are difficult to guess (as they contain a random
hash), they are public. So, anyone who knows the URL can access it.
From the root of your local project directory, run the following command:
firebase hosting:channel:deploy
CHANNEL_ID
Replace
CHANNEL_ID
with a string with no spaces
(for example,
feature_mission-2-mars
). This ID will be used to construct
the preview URL associated with the preview channel.
Open your web app at the preview URL returned by the CLI. It will look
something like this:
PROJECT_ID
--
CHANNEL_ID
-
RANDOM_HASH
.web.app
To update your preview URL with changes, run the same command again. Make
sure to specify the same
CHANNEL_ID
in the command.
Learn about
managing preview channels
,
including how to set a channel's expiration.
Firebase Hosting supports a GitHub Action that automatically creates and
updates a preview URL when you commit changes to a pull request. Learn how to
set up and use this GitHub Action
.
Step 3:
Deploy live
When you're ready to share your changes with the world, deploy your Hosting
content and config to your live channel. Firebase offers a couple different
options for this step depending on your use case (see options below).
Option 1: Clone from a preview channel to your live channel
This option provides confidence that you're deploying to your live channel the
exact
content and config that you tested in a preview channel. Learn more
about
cloning versions
.
From any directory, run the following command:
firebase hosting:clone
SOURCE_SITE_ID
:
SOURCE_CHANNEL_ID
TARGET_SITE_ID
:live
Replace each placeholder with the following:
SOURCE_SITE_ID
and
TARGET_SITE_ID
: These are the IDs
of the Hosting sites that contain the channels.
- For your default Hosting site, use your Firebase project ID.
- You can specify sites that are in the same Firebase project or even in
different Firebase projects.
SOURCE_CHANNEL_ID
: This is the identifier for the channel that
is currently serving the version you want to deploy to your live channel.
- For a live channel, use
live
as the channel ID.
View your changes
(next step).
Option 2: Deploy from your local project directory to your live channel
This option provides you flexibility to adjust configurations specific to the
live channel or to deploy even if you haven't used a preview channel.
From the root of your local project directory, run the following command:
firebase deploy --only hosting
View your changes
(next step).
Step 4:
View your changes on your live site
Both of the options above deploy your Hosting content and config to the
following sites:
The Firebase-provisioned subdomains for your default Hosting site and any
additional Hosting sites:
SITE_ID
.web.app
(like
PROJECT_ID
.web.app
)
SITE_ID
.firebaseapp.com
(like
PROJECT_ID
.firebaseapp.com
)
Any
custom domains
that you've connected to
your Hosting site(s)
To restrict the deploy to a specific Hosting site,
specify a deploy target
in your CLI command.
Other deploy activities and information
You can optionally add a comment to a deploy. This comment will display with the
other deployment information on the
Hosting dashboard
in the Firebase console. For example:
firebase deploy --only hosting -m "Deploying the best new feature ever."
Add predeploy and postdeploy scripted tasks
You can optionally connect shell scripts to the
firebase deploy
command to
perform predeploy or postdeploy tasks. For example, a postdeploy hook could
notify administrators of new site content deploys. Refer to the
Firebase CLI documentation
for more details.
Caching deployed content
When a request is made for
static content
, Firebase Hosting automatically
caches the content on the CDN. If you redeploy your site's content, Firebase
automatically clears
all your cached static content
across the CDN so that new
requests receive your new content.
Note that you can configure the
caching of dynamic content
.
Serving over HTTPS
Make sure that all external resources that are not hosted on
Firebase Hosting are loaded over SSL (HTTPS),including any external scripts.
Most browsers do not allow users to load "mixed content" (SSL and non-SSL
traffic).
Next steps
Integrate with GitHub and iterate your previewed content by
setting up the GitHub Action
.
Learn about further hosting capabilities:
Take a look at the full documentation for the
Firebase CLI
.
Prepare to launch your app: