How to deploy create react app to firebase


Posted 3 months ago | by Ryan Dhungel | on Firebase  | Viewed 2235 times

This article shows you the steps necessary to deploy your React app that you generated using create-react-app to the Firebase hosting.

I love firebase hosting because its damn easy to deploy your app that is running locally in your computer to the whole world to see woo...

What are the steps to deploy react app to firebase?

Just follow the steps I am about to show you below, you will be laughing how awesome it was and get fascinated by seeing your react app running in localhost gone live.

React Project Setup

  • Create a new react app.
create-react-app reactfirebase
  • Get inside your newly created react project
cd reactfirebase
  • Install firebase tools globally
npm install -g firebase-tools
  • Initialize firebase
firebase init
  • You will see the following screenshot in your terminal with the prompt to choose Firebase CLI from the available options:

deploy react to firebase

Firebase database setup

  • I want to use Database and Hosting. I can choose using the up and down arrow key of my keyboard.
  • Then to select/deselect one or more than one, press spacebar. In this case choose Database and Hosting both.
  • Then press enter.
  • Choose from your existing firebase projects using up and down arrow key and hit enter. If you dont already have one. You can create from firebase.google.com  Click on get started and Add Project.
  • You will be asked What file should be used for Database Rules? Just press enter. The new database.rules.json file will be automatically created in the root of your project file.
  • By default it will require auth. This is how it looks by default. See it in database.rules.json. If you already have specific rules set in firebase database, then they will be copied automatically.
{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}
  • If you have not setup auth, set it to true. Make sure to change it in production. This allows anyone to read and write to your database.
{
  "rules": {
    ".read": "auth != true",
    ".write": "auth != true"
  }
}

Firebase hosting setup

Your public directory is the folder (relative to your project directory) that will contain Hosting assets to be uploaded with firebase deploy.

You will be asked  What do you want to use as your public directory? (public) In our case it is build, which is the folder where our production build will be located. 

I said will be, because I have not run build yet. so lets do it. You will run this command each time you make changes to your project and want to push it to live hosting. Run npm run build command in your terminal. Make sure you are in the correct project folder. In our case it's reactfirebase.

You can open another terminal window, get inside your project and run this command.
npm run build

This will create a new folder called build in the root of your project. This folder will contain all the html, css and javascript files for static hosting. 

Back to the terminal window where we were working on firebase. This message should still be there asking you about the public directory. What do you want to use as your public directory? (public) Type build and press enter.

Configure as single page app?

Firebase will ask you if you want the app to be configured as a single-page app. Type y and press enter.

Later on you'll be able to use react-router-dom to navigate through your application.

It will say  File build/index.html already exists. Overwrite?  Press N - Because we don't want to overwrite. Hurray, Firebase initialization complete!

By now we have 3 files created by firebase in our root directory.

  • .firebaserc – Consists of the project information that you selected.
  • database.rules.json – Consists of the database rules for Firebase.
  • firebase.json – The min configuration file.

Deploy React app to firebase

We are finally there. It is time to deploy our react app to firebase hosting.

firebase deploy

Awesome! Now you should see two URL's. One for your firebase project and another for your Hosting URL. Copy the URL and paste in the browser, hit enter (really?)  and smile. WOW!

By the way if you are still stuck with React’s props and state, arrow functions, destructuring etc and not really sure how to make your way through the basics to the real world web development, this course is your answer!. Click the link below to see what it's all about?

BUILD YOUR FIRST REACT REDUX FIREBASE CRUD APP WITH AUTHENTICATION

React firebase deploy app shows empty screen?

In case you did not type build when firebase was asking What do you want to use as your public directory? (public) then you will have to go to firebase.json file in your root project folder and manually change hosting -> "public": "build"

Conclusion

When I was able to host my local react app on firebase, I got super excited. Its easy to add custom domain too (visit firebase console -> Hosting) and the best part of it is that you get free SSL. Now go ahead and create awesome react apps and reach out to the world riding on the back of firebase. Thanks to google :)



Specials


Build Laravel React CRUD/SPA APP in 2 hours
Build Laravel React CRUD/SPA APP in 2 hours

Build Laravel React CRUD/SPA APP in 2 hours

COUPON CODE: REACTCRUD with 90% off


Laravel with React JS - Build Twitter Like Real Ti...
Laravel with React JS - Build Twitter Like Real Time Web App

Laravel with React JS - Build Twitter Like Real Time Web App

COUPON CODE: LARAVELREACT with 90% off


Learn Laravel Building Multi User Blogging Platfor...
Learn Laravel Building Multi User Blogging Platform with SEO


React Redux Firebase CRUD App with Authentication
React Redux Firebase CRUD App with Authentication

React Redux Firebase CRUD App with Authentication

COUPON CODE: RRFTEN with 86% off


Become a Master of JavaScript from Scratch in 2018
Become a Master of JavaScript from Scratch in 2018

Become a Master of JavaScript from Scratch in 2018

COUPON CODE: JSMASTERSALE with 92% off


REACT - Up and Running with React ES6 and Open Sou...
REACT - Up and Running with React ES6 and Open Source API


Sublime Text for Rapid Web Development
Sublime Text for Rapid Web Development

Sublime Text for Rapid Web Development

COUPON CODE: LEARNSUBLIME with 90% off