Showing posts with label React JS. Show all posts
Showing posts with label React JS. Show all posts

8/01/2018

Deploying React JS App to Firebase Hosting

Firebase hosting was launched on May 13, 2014 and it is one of my favorite firebase features because it allows you to deploy your static web files such as CSS, HTML, Javascript and other files, as well as dynamic Node JS apps.

Today I will be providing steps on how to deploy your React JS app so it can be live online through Firebase hosting.

Assuming that you already have your React JS app ready to be deployed, but if not you can create a new project just for testing purposes.

STEP 1:


Login to your firebase account and click GO TO CONSOLE at the top right corner of the page.

deploying-react-js-app-to-firebase-hosting

STEP 2:


Click the box ADD PROJECT to setup a new project. Each project account has its own hosting feature.

deploying-react-js-app-to-firebase-hosting-add-project

STEP 3:


Enter the name of your project (project ID will be generated automatically, you can change it but I prefer to use the generated one to keep it unique). Check all the three(3) boxes and click the button "Create project" to finish setting it up.

deploying-react-js-app-to-firebase-hosting-add-project-proj-name

Once the project is ready, it should display like this:

deploying-react-js-app-to-firebase-hosting-add-project-proj-name

Click "Continue" so you will be redirected to Firebase control panel or console panel.

STEP 4:


Open your terminal and change your directory to where your React project is located.

$cd Documents/reactjs/awesomeproj/

STEP 5:


Make sure to install Firebase Tools CLI globally.

$sudo npm install -g firebase-tools

Make sure it is successfully installed by checking the version:

$firebase --version
3.19.3

STEP 6:


Login to your Firebase account through firebase CLI in the terminal by entering the command:

$firebase login

When asked "Allow Firebase to collect anonymous CLI usage and error reporting information?" type Y and press enter.

$firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information? (Y/n) Y

This will going to open a page and allows you to select the Google account you want to link to your firebase project.

After selecting an account it will ask for permission that Firebase CLI will access your Google account. Just click button "Allow" to proceed.

Once successful the page will display:

firebase CLI successful access

And your terminal should display:

$ Success! Logged in as testemail@gmail.com

STEP 7:


Build your React JS app in order for it to run in Firebase hosting environment. To build your app just run the command below inside your React JS project root directory.

$npm run build

STEP 8:


Initialize firebase inside your app by running:

$firebase init


  • When asked "Which Firebase CLI features do you want to setup for this folder?". Just choose "Hosting: Configure and deploy Firebase Hosting sites".
  • When given an option to "Select a default Firebase project for this directory:". Choose the project name we created in step 3.
  • When asked "What do you want to use as your public directory? (public)", just type "build" and enter.
  • When asked "Configure as a single-page app (rewrite all urls to /index.html)?", type "y" and enter.
  • When asked "File build/index.html already exists. Overwrite? (y/N)", type "N" and enter.

Below is how my setup looks like:

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File build/index.html already exists. Overwrite? No
i  Skipping write of build/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...


  Firebase initialization complete!

After initializing firebase hosting, you can now deploy your app by running the command below:

$firebase deploy

Once you successfully deploy your app, the Hosting URL will be provided to you. If you go to your Firebase account's console page and click Hosting on the left side under Develop category, you can see your temporary website URL which can be changes later on if you decided to purchase a domain and connect it to your app by clicking the button "Connect domain".