In this guide, I’ll talk about how you can deploy your React application using Firebase. Firebase is the platform for developing web applications for Google.
Set up your Firebase account
First, you need to have a Google account to use firebase. So if you haven’t already, please go ahead and create it. After creating your account, you should have something like this in your dashboard:
Second step, click on ‘go to console’ at the top right side of the menu to access your console.
Now you should have a list of existing projects or not. It depends if you already have used it before.
Go ahead and click on “Add project” to create a new project.
You should have this prompted. Enter the name of your project and click on ‘continue’.
You may or may not need to set up Google analytics. For the sake of simplicity, I switch it off:
Click now on the ‘Create project’ button to create your project.
Now your project is ready. Click on ‘Continue’.
Creating your build folder in React
Back to your React app, you need to install the firebase tools. Run
npm i g firebase-toolsThis will install firebase globally on your computer. So that you won’t need to install it again for another project.
Then run:
firebase login You will have a new window opening in your navigator. Enter your login credentials. This way, you won’t have to login again.
Now let’s set up firebase for your project. Run
firebase init
This command will prompt different options you can choose. As you want to host your project, select “Hosting” (you validate your choice with the space keyboard).
Then use “Select existing project” as you have already set up your project:
Here I select the project I created
When the CLI asks you for a public directory, type ‘build’ and select ‘Y’ for the next question.
What is the build folder? This is a very condensed version of your React application to make it faster online. Select yes
We’re going to have it now. Run:
npm run buildTo create a new build folder.
Finally, run npm deploy to deploy your app, and voilà:
