Hosting your React app with Firebase hosting

Bensigo Egwey
Jun 21, 2017 · 5 min read

Hosting your web apps has always been difficult,but all thanks to google and the firebase team, who made it just one command “firebase deploy” which we would be looking at today. Demo App

What is firebase. Firebase is a backend as a service(BAAS) which helps you to forget about the difficulty in scaling and hosting you apps. We won’t be talking about only firebase we would also be talking about react.js which you must have heard of, which is a library for creating the view(“V”)in the MVC pattern which ,we would be using with React-Router-Dom for creating routing for the web with react.js.

To start this tutorial i hope you have node install in your computer . if you don’t you can just google how to install node, then if you are done with that you install the react-cli with this command “npm install -g create-react-app”, then navigate to the dir where you want to put your app then run “create-react-app firebase-react-hosting” in your terminal and you the “cd firebase-react-hosting”. To run your app in local dev by running this command “npm start”

Image for post
Image for post
“the default index page of react”

Now let the fun begin.

open the directory in your favorite code editor , since am an advocate of “vscode” i would recommend you download vscode. Open the the src folder and create a folder called Component and add a file called Home.js and About.js. it should look like this

Image for post
Image for post

then jump into the the Home.js and write down the following

Image for post
Image for post

then in the About.js add this

Image for post
Image for post

what happen here, first we imported React and Component from the react library then we created a react component and also exported it so it can be accessed outside file .

now let make the navigation component, create a new file called Navigation.js in the Component folder and add this code.

“Navigation.js ”

So what did we do here, first we imported React,Component from react then Route,Link from react-router-dom which we installed earlier ,then imported the Home and About Component we just created some minutes ago.

I know it looks different from the other kind of component ,this is a stateless component meaning component without a state, in the Navigation.js we also created a link to each component with the Link component we imported from react-router-dom that have a props of “to”(‘the URL for that link e.g /about’)

now let go to the app.js and put/update this file.

Image for post
Image for post

we created a component called App that return the Navigation Component and a Route component which take exact , path and component for the route .the exact props take a bool value, which we set to true so it should match the exact value of the path, while the path props is for the url path then the component is a props that render a component, which we did for Home and About component.

Go to the index.js and add this code below .

Image for post
Image for post

here we imported BrowserRouter as Router, which we embedded the App Component in it,then render App to the “root” div in the index.html.then run this command “npm start “ in the terminal , please make sure you are in the dir of your project.You would get something like this.

Image for post
Image for post

woo , almost are doing great, so time to build and host on firebase.Go back to the terminal and run this command to build your project so it can be ready to deploy.but first we need to do something like install firebase-tools and initialize firebase in your how do you do that,first run this command “npm install -g firebase-tools” which install firebase globally so it can be used in the ternimal.then navigate to the directory which your project is, then first run “firebase login” then login and run this command “firebase init “ and follw the following step.

Step 1: Select the Firebase features you want to use. Database and Hosting are selected by default — all you need to do is press enter to go to the next step.

Step 2: Firebase command-line interface will pull up your list of Firebase projects, where you can then choose the corresponding project using the up and down keys.

Step 3: Keep the default for the Database Rules file name and just press enter.

Step 4: Pay attention to the question about public directory, which is the directory that will be deployed and served by Firebase. In our case it is “build”, which is the folder where our production build is located. Type “build” and proceed.

Step 5: Firebase will ask you if you want the app to be configured as a single-page app. By default it is “no” — in our case, we could really benefit from the configuration, so we’ll type “y” and press enter. Later on you’ll be able to use react-router and the URLs will just work.

Step 6: Firebase will warn us that we already have “build/index.html,” which we don’t want to be overwritten. Type “n” and press enter to keep our own “index.html,” generated by our build process earlier.

We are now ready to deploy the app! We’ll do that by running firebase deploy. After a few seconds you'll see the URL — where your app is hosted — of your app. It should look something like woo hoo we did it !.

full code repo here

Image for post
Image for post


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store