What is google firebase hosting ?
Firebase Hosting is production-grade web content hosting for developers.
It allows fast and secure hosting for our web application, static and dynamic content, and microservices. It is production-grade web content hosting for the developers.
Why google firebase hosting ?
At present, most of the web hosting charges us, and the available free hosting services are slow. We also have to pay extra money to get an SSL certificate to convert our website to a secure one with HTTPS.
Firebase Hosting is free and by default, provides an SSL certificate and offers an impressive speed across several geographical locations.
How to use Firebase Hosting with React ?
I will assume that you already have a Firebase project set up. If not, you can create one using Firebase Console.
- First, We need a React App. You can create this by running the following command where you want your project to be stored.
npx create-react-app learn-firebase-hosting2. We also need a Google account. These days, everyone has a Google/Gmail account. Your Gmail account is enough to use Firebase Hosting. If you don’t have one, then create a new account.
3. We need to have Firebase CLI installed. To install Firebase-CLI, we need to have Node.js in our machine. Assuming you have it already, we will install the Firebase CLI by running the following command.
npm install -g firebase-tools4. Now login to Firebase. We will now need to log in to Firebase. You will be prompted to enter your email and password if you’re not already logged in.
firebase loginthis command connects our machine to Firebase and grants us access to our Firebase projects.
To, check whether we can access our account, we will run the following command which will display our existing firebase projects
firebase projects:list
5. Now, we Initialize Firebase. We initialize our Firebase in our project directory using the following command
firebase initThis command needs to be run in the same directory as the project root directory. This will create a new firebase.json file in our directory
Now we will be prompted with various questions to help us configure our React App
Type Y and press enter
Go to Hosting option using the arrow keys, press space to select and press Enter to continue forward.
Select “Use an existing project”
Select your firebase project (learn-firebase-hosting in my case)
Type what you want to use as your public directory. By default, Create React App generates a build folder that contains our production assets.
Now firebase should ask whether we want to configure our project as a single-page app. Enter yes for this option.
Now we are asked whether we want to set up automatic builds and deploys with GitHub. Type N.
You may be asked whether or not Firebase should overwrite your existing build/index.html. If you haven’t created a build for your app yet, then you won’t see this. If asked, enter N.
Firebase initialization is complete.
We should see 2 new files
.firebasercandfirebase.json. These files are automatically generated and they contain your firebase hosting configs.
firebaserc may look like this :
firebase.json will look like this :
6. Now, we deploy our React App.
Now that everything is set up, we can go ahead and deploy our app! Run the following command :
firebase deploy
After Successfully deploying, we will be provided with a unique URL of where our React app is deployed. It will look like this:
https://learn-firebase-hosting-78fce.web.app/By following the above steps you have now deployed your react app using firebase hosting !
You may notice that your app is hosted securely over HTTPS. Now you also know how easy and quick it is to deploy react apps using firebase.
If you have any suggestions or appreciate this, please leave a comment below 😊
