Firebase Hosting
This solution for single and multi-tenant strategies only. It does not support subdomains.
This tutorial will use the production environment, but the steps for the staging environment are the same.
Go to the frontend environment configuration:
- frontend/src/config/production.tsx (For React and Vue)
- frontend/src/environments/environment.production.ts (For Angular)
Don't forget the
/api suffix.// Place the URL here with the /api suffix.
// Ex.:`https://domain.com/api`;
const backendUrl = `https://your_production_backend_url/api`;
npm install firebase-tools -g
firebase login
Go to the frontend folder, and run:
firebase init
Mark only the Hosting option.
Select Use an existing project.
Select the production project.
When asked:
What do you want to use as your public directory?
- build (for React)
- dist (for Vue)
- dist/frontend (for Angular)
Configure as a single-page app (rewrite all urls to /index.html)?
Answer Y.
The firebase.json file will look like this:
{
"hosting": {
"public": "build" OR "dist" OR "dist/frontend",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Change the .firebaserc to manage both staging and production environments.
{
"projects": {
"staging": "",
"production": "name-of-the-production-project"
}
}
On the frontend/package.json, add those two new scripts:
{
...
"scripts": {
...
"deploy:staging": "npm run build:staging && firebase use staging && firebase deploy",
"deploy:production": "npm run build:production && firebase use production && firebase deploy",
},
...
}
npm run build:<environment>build the environment using the proper config file. That's needed to build the app with the correct backendUrl.firebase use <environment>makes sure the files will be deployed to the correct environment.firebase deploydeploys the files.
npm run deploy:production
You will now receive the frontend URL.
Go to the configuration file and replace those values:
const frontendUrl = {
host: '<firebase_production_project_id>.web.app',
protocol: 'https',
};
Redeploy the application.
To add a custom domain, follow those steps:
Last modified 3yr ago