Firebase and React go nicely like avocado on toast 🙂
Have you ever built an application and then realized you have no idea how to set it up online? Then you thought to google and got bombarded with so many options of technologies to use, and some seem impossible to even get through the first step.
Firebase has made it to my list of painless technologies when it comes to deployment.
What is it?
Firebase is a mobile and web development platform that provides developers with tools and services to develop high-quality applications, support them and increase their user base.
Now that that’s out of the way, here’s a picture based guide of how you can deploy your React application in 5 minutes:
Get started
Get started here by signing up to firebase using your google account.
Select the option to Create a new project
Select a name for your project
Set up google analytics for your project
Create your project
Specify what kind of application it is: Android app, iOS, Web app.
This tutorial uses a web application.
Deploying
After selecting web app, give your application a name and select firebase hosting.
Name it…
Copy the code snippet and paste it at the bottom of the body tag in your index.html file.
The next step is to install firebase-tools on your computer. Run this command in your terminal.
npm install -g firebase-tools
PS: Make sure to update your PATH environment variable to include the path of the folder to where firebase has been installed.
This will allow you to run firebase commands from the terminal.
In my case : C:\Users\Hp\AppData\Roaming\npm
The npm folder contains firebase.cmd which is what allows us to run firebase commands.
Add that path to the PATH environment variable.
We’re almost there….
Head to the root of your project and run these commands in order;
Firebase commands to begin deployment
Things to note when initializing (firebase init)
In the Firebase CLI Features, select only Hosting: Configure and deploy firebase hosting sites; if you are deploying an application that does not have database or cloud storage requirements, otherwise select according to the project’s requirements.
How to configure the some options when initializing firebase:
What do you want to use as your public directory? `build`
Configure as a single app(rewrite all urls to /index.html )? `Yes`
File index.html already exists. Overwrite? `No`
After running firebase deploy, your react project is online for the world to see… Congratulations!
PS: Constantly make commits so that when you make a mistake you can always go back to what was there before using:
git reset --hard
If you haven’t been making commits and had to manually change the contents of a file in your project, run npm run build just before running firebase deploy.
<lulu>
