This content originally appeared on DEV Community and was authored by Alvison Hunter Arnuero | Front-End Web Developer
Get started with Firebase Hosting
Firebase Hosting gives you a fast, secure, and reliable way to host your app's static assets (HTML, CSS, JavaScript, media files, etc.) as well as to serve dynamic content and host microservices.
Our production-grade hosting is backed by a global content delivery network (CDN). Hosting serves your content over SSL, by default, and can be used with your own custom domain or on your project's subdomains at no cost on web.app and firebaseapp.com.
Before you begin
Before you can set up Firebase Hosting, you need to create a Firebase project. To deploy the project to the firebase servers, please follow the steps below.
Step 1: Install the Firebase CLI
Visit the Firebase CLI documentation to learn how to install the Firebase CLI Tools or update to its latest version.
Update to the latest CLI version
Generally, you want to use the most up-to-date Firebase CLI version. How you update the CLI version depends on your operating system and how you installed the CLI.
In many cases, new features and bug fixes are available only with the latest version of the Firebase CLI. It's a good practice to frequently update the CLI to its latest version.
First, install the Firebase CLI Tools package in the current project using NPM. You can find alternative ways of installing or updating this in the Firebase Docs.
$ npm install -g firebase-tools
Once you have successfully installed this tool, login to the Firebase platform:
$ firebase login
Once you enter the command, a wording similar to the below console result will be displayed in the terminal. you will be prompted to login to Firebase and allow this app to run from the terminal. If everything goes well, a successfull authentication message will be displayed on the console.
i Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.
? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? Yes
i To change your data collection preference at any time, run `firebase logout` and log in again.
Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=000000-feejsdfjdfjdfjdsfjdfoef342265225622626.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=182344245&redirect_uri=http%3A%2F%2Flocalhost%3A9005
Waiting for authentication...
✔ Success! Logged in as johndoe@gyourmailprovider.com
Visit the URL provided, then log in using a Google account. After you have successfully logged in to the Firebase platform, review the current list of projects linked to this account. For that, you need to type in the following command:
$ firebase projects:list
A List of the projects linked to your account will be displayed with somehting similar to the below information:
$ ✔ Preparing the list of your Firebase projects...
| Project Display Name | Project ID | Project Number | Resource Location ID |
|---|---|---|---|
| firebase-project-name | firebase-project-name | 45632833938 | us-central |
$ 1 project(s) total.
Step 2: Initialize your project
To connect your local project files to your Firebase project, run the following command from the root of your local project directory:
$ firebase init hosting
The console will display something similar to the below code:
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/ComputerUserName/Documents/FolderName/local_project_name
Before we get started, keep in mind:
* You are initializing within an existing Firebase project directory
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
i Using project firebase-project-name (firebase-project-name)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
✔ Wrote n/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
During project initialization, from the Firebase CLI prompts:
- Select a Firebase project to connect to your local project directory.
The selected Firebase project is your "default" Firebase project for your local project directory. To connect additional Firebase projects to your local project directory, set up project aliases.
- Specify a directory to use as your public root directory.
This directory contains all your publicly served static files, including your index.html file and any other assets that you want to deploy to Firebase Hosting.
-
The default for the public root directory is called public.
- You can specify your public root directory now or you can specify it later in your
firebase.jsonconfiguration file. - If you select the default and don't already have a directory called
public, Firebase creates it for you.
- You can specify your public root directory now or you can specify it later in your
If you don't already have a valid
index.htmlfile or404.htmlfile in your public root directory, Firebase creates them for you.
- Choose a configuration for your site.
If you select to make a one-page app, then Firebase automatically adds rewrite configurations for you.
At the end of initialization, Firebase automatically creates and adds two files to the root of your local app directory:
A
firebase.jsonconfiguration file that lists your project configuration. Learn more about this file on the configure hosting behavior page.A
.firebasercfile that stores your project aliases.
Getting the config file ready for deploy
The firebase.json file
The firebase init command creates a firebase.json configuration file in the root of your project directory. The firebase.json file is required to deploy assets with the Firebase CLI because it specifies which files and settings from your project directory are deployed to your Firebase project.
With the generated firebase.json file in our local project, a new property named "public" has to be added or updated with the value of the name of your build folder. This might vary depending on the name you specify in your build configuration. The following is an example of this config file and its default properties:
{
"hosting": {
"public": "/build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Step 3: Deploy to your site
To deploy to your site, run the following command from the root of your local project directory:
$ firebase deploy --only hosting
Note: By running this command with the --only hosting flag, you're only deploying your Hosting content and config. If you also want to deploy other project resources or configurations (like functions or database rules), run this command with a comma-separated list in the flag (for example, --only hosting,functions).
This command deploys your Hosting content and config to the following Firebase-provisioned subdomains:
- PROJECT_ID.web.app
- PROJECT_ID.firebaseapp.com
If everything goes smoothly with this command, the terminal will display something similar to the below console's result:
=== Deploying to 'firebase-project-name'...
i deploying hosting
i hosting[firebase-project-name]: beginning deploy...
i hosting[firebase-project-name]: found 16 files in /build
✔ hosting[firebase-project-name]: file upload complete
i hosting[firebase-project-name]: finalizing version...
✔ hosting[firebase-project-name]: version finalized
i hosting[firebase-project-name]: releasing new version...
✔ hosting[firebase-project-name]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/firebase-project-name/overview
Hosting URL: https://firebase-project-name.web.app
Now your site is ready to share with the world! If you would like to learn more about the next steps on this matter, please take a look at the full documentation for the Firebase CLI.
Happy Deploying, folks!
❤️ If you've enjoyed this article, that motivates to write more!
🦄 If you truly consider this article helped you wholly!
🔖 If you need to check back on this article later on.
🤔 Please leave your comment, your opinion very important.
This content originally appeared on DEV Community and was authored by Alvison Hunter Arnuero | Front-End Web Developer
Alvison Hunter Arnuero | Front-End Web Developer | Sciencx (2023-03-02T03:40:16+00:00) How to deploy a React App using Firebase Hosting. Retrieved from https://www.scien.cx/2023/03/02/how-to-deploy-a-react-app-using-firebase-hosting/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.