After completing any web application, the Next task comes to host it over the server so that the application can be seen globally. At this time we have so many solutions which can be used to host the application. And also the things have become easier than earlier due to the services provided by Firebase.
In this article, we will learn all about deploying the React app over Firebase.
Firebase is a platform developed by Google for creating mobile and web applications. It was originally an independent company founded in 2011. In 2014, Google acquired the platform and it is now their flagship offering for app development. Apart from hosting functionality Firebase provides other services like authentication, real-time database, and cloud functions, etc.
Go to that Firebase official website and create a firebase project.
We will create here a React app which we will deploy over Firebase hosting. We will create app as usual like below:
npx create-react-app firebase-hosting-app
Once the above command completely runs, navigate to the project folder for performing further tasks.
npm install firebase-tools -g
To perform any firebase-related task, we need to log in over the terminal/console. We will use below command for the same.
Initialize firebase into the React app using below command:
After pressing enter after the above questions, Few questions will be asked related to the configuration. Initially it will ask about the service which you want to use for the current project, So choose here Hosting and press enter.
After confirming the above, It will ask one more question. Since we have already created the Firebase project so we will select Use an existing project option and then choose the recently created project from the shown list.
Now it will ask to select the public directory, by default it will be public but react creates build in build folder. So will do like below:
? What do you want to use as your public directory? build
Two more questions will be asked, whether you want to overwrite your index.html and set up GitHub actions, reply No to both.
We are done with the project configuration task over Firebase so our next task is to create the build and deploy it over Firebase. Since we have created app using create-react-app so will use the below command to create build:
npm run build
Deploy it over Firebase using below command:
Now you have your React app hosted for free using Firebase. Once the app will deploy, the Hosting link will show over the screen.
For more follow the below links:
Firebase — https://firebase.google.com
Firebase Hosting Docs — https://firebase.google.com/docs/hosting
Let me know your thoughts over email email@example.com. I would love to hear them and If you like this article, share it with your friends.
Thanks for reading!