Hosting your React app with Firebase hosting
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.
https://hosting-react-with-firebase.firebaseapp.com/ 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”
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
then jump into the the Home.js and write down the following
then in the About.js add this
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.
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.
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 .
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.
woo , almost done.you 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 project.so 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 https://hosting-react-with-firebase.firebaseapp.com/. woo hoo we did it !.
full code repo here
https://github.com/larrySigo/firebase-react-hosting.git
Tnx