Hosting React Project With Firebase

Hosting with Firebase is a quick and easy way to get one of your projects online so your friends and family can check it out! Hosting is one of the first things I think about when starting a new project. Is it vital that users can get on the website? Or is this something employers would like to see in the future? If the answer to either of those is yes, then it’s best to host from the beginning.

When you start hosting from the beginning it is a whole lot easier to find those bugs that might be in your production build. This will cause a lot less headaches once you are “completed” with your project.

To get started with hosting you will need a project to work on, so let’s start with creating a React app. Once you have the React boilerplate stuff it’s best to get rid of all the extra things your not going to need. Your App.js file should look something like this…

Once your here make an H1 tag within the Div with something in it to make sure everything is working correctly before we start. Then run either npm start or yarn start in the terminal, whichever you prefer. If all is working then it's time to get you project to the world!

Step 1)

Head to firebase.google.com to either create an account or get signed in. Once you are signed in, in the top right corner there is a button at says Go to Console. Click that.

Once in your console you have several options. You can create a project (what we will be doing) or you can go to an existing project within Firebase.

Step 2)

Click on add a project. From there you will need to put in a project name. Now that you have a project name time to continue to the next page. Google Analytics, this part is sort of up to you. Personally I like to have it on because google provides a lot of good analytics on your site to hopefully help in making your site better and more importantly helping you scale the site if need be.

If you chose to use Google Analytics it will ask you for an analytics account, best to just use the Default Account for Firebase opinion when using Firebase for the first time. Once done you should see it setting up the project for you…

Step 3)

This is where we get into the fun part of using Firebase. Now that you are in your project dashboard you will see a whole lot of information but don't worry, Google has made this super simple to use.

On the right side of the window there is a bunch of micro services that Firebase offers. This is all about hosting so we will be working within the hosting tab on the right side.

Once in the hosting tab you will see a get started button in the middle of the screen. Click on that.

Step 4)

Your going to want to add the Firebase cli into you project. Best way is to click on the clipboard next to the chunk of code. Paste this code into you terminal for you project. Also, leave the checkbox under the code snippet unchecked we can add those in to the project once we need them.

Click next, now you are going to have to login to Firebase from the cli app in the terminal using firebase login (this will be the same login as the firebase website). Now that we are logged in we need to initialize our app for hosting. Type firebase init in the terminal to start this process.

From there use the arrow keys to go Hosting then press space to select then enter to start the initializing process.

Step 5)

Now that we started initializing our project we have a couple key decisions to make. But don't worry if you mess up you can always run firebase init again to fix something. And if all else fails you can alway create a new React app because we aren't 100 hours into our code!

Setting up the project we want to select Use an existing project option since we created one on the Firebase website already.

From there you will have a list of the projects that you have created within Firebase. Select the one that you made a couple of steps ago.

Once you have the correct firebase project selected it will ask you “What do you want to use as your public directory?”. While you are using React it should recognize that you have a public fold so you can just press enter. If not type in what you want your public folder to be.

Next it's going to ask you if you want to “Configure as a single-page app (rewrite all urls to /index.html)?”. No matter what you ALWAYS want to say yes (just type y in the terminal and hit enter)!

This next part is up to you. “Set up automatic builds and deploys with GitHub? (y/N)”. Personally i'm not huge fan of this but if want to deploy every time you push to GitHub thats up to you.

So at this point your terminal should look something like this…

Now we are on the last part of our initialization. This is very IMPORTANT, to not overwrite your index.html page. Very important that you don't do that so type N for no then hit enter.

Initialization is complete!

Step 6)

Now that we have Firebase hosting all set up you will see some new files in your project

No need to mess with these. From here we are ready to deploy! Everytime you add to your code and it’s ready to be deployed you’ll want to run npm run build first, to create production code for you project. Once that is done run firebase deploy to get it on the web!

Now that you have deployed, it will give you a free domain name… not the greatest but we can get that changed (will go over in another blog post)

Congratulations you deployed your first project with Firebase! Now send the link to your friends and family!