Hosting React Apps with Google Firebase.

Hosting React Apps with Google Firebase.

The fastest way to develop and deploy.

ยท

9 min read

If you are here you probably have some Idea of React Apps, hosting. But I am assuming, my readers have just gotten into the habit of reading. What do I mean by this? I will try to keep the contents as simple as possible and of course, before we jump into the main scope of this blog, I will walk you through the things we will be dealing with.

Now, before we start, I would like to share my personal experience. I prefer Firebase because its is super reliable and super flexible and makes the development experience extremely nice.


Introduction and quick walk-through of React, Hosting, Google Firebase, and the services it provides.

Quick Recap of creating React applications with CRA template.

Signing in firebase and using its services(Hosting)

Initializing firebase project.

Deploying React Apps with firebase.

Track and deploy changes to an app already hosted, in a very easy way.


To give you a gentle introduction, React is an open-source Javascript library that specializes in frontend development, which was developed by Facebook. Its component-based library lets you build high-quality user interfaces for web apps. This library helps you to write HTML codes inside javascript(JSX) and works with virtual DOM. JSX is just syntactic sugar, which makes writing and building React applications easier. Read more about JSX here.

Web Hosting makes the files, which make up the website or web app available for viewing online. Every site you have ever visited on the web is hosted on the webserver. A hosting service provider is a business that provides websites or web apps the technologies required to be viewed on the web. Websites are hosted, or stored on servers.

Google Firebase is a Google-backed application developer software that enables developers to develop iOS, Android, or web apps and makes the development experience extremely nice. Google Firebase provides a number of services including Authentication, Analytics, Cloud Messaging, Database, Storage, Hosting, Crashlytics, and microservices(cloud functions).

Read More About Firebase

The scope of this blog is an easy way to deploy your React application with firebase. So, the service we will be concerned with is, the Hosting service provided by Firebase.

If you are reading this blog, chances are you are well accustomed to the creation of React Apps. Let me just quickly walk you through the process, to set up the development space for React Applications, in your IDE.

  • Make sure you have nodejs installed.

  • Open terminal.

  • Install npm using the following command.

npm install -g npm
  • Creating React Apps using CRA(Create-React-App) template is the easiest way to automate the routine setup.
  • Install the Create-React-App template using the following command.
npm install -g npm

The (-g) stands for global install flag. It is advised to install globally if the package provides command-line tools. Install locally, if you are using the package as part of your application.

  • You are almost there, the final step would be to create the application folder and name it. This can be achieved by the command, below
create-react-app {name of the folder}

create-react-app my-first-react-app
  • You are good to go. You will see folders getting created, this may take some time.
  • Once the folder is created, go to the folder you just created, using the terminal, and run npm start to check if everything's up and working.
cd my-first-react-app

If you do not know already, cd stands for change directory. Once you are inside the folder you just created, run the following command.

npm start

This command will start your application. If everything's fine you shall see, the screen in the picture below:

Screenshot (28).png

You can make all the necessary changes as per your requirements in the app.js file in the src folder. That is a whole different topic and hopefully, I will simplify that for you too. Till then you can visit the documentation of React to find out more about how React performs under the hood. The documentation of React is one of the best docs, and it is perfectly crafted for everyone.

Read more about React

As obvious as it sounds, in order to deploy your application with firebase, you need to create an account in firebase and sign in, to use the benefits provided. The sign-in process is rather much simpler, you can just do it within seconds, by signing in with one of your google accounts.

The rest of the process for hosting is much simpler, but a little tricky as well. For your convenience, I will break down the steps into smaller points that you can read and understand instead of long and complicated parts which will make you lose interest.

  • The first step is, as said above, creating an account in firebase and signing in.

  • Now that you are on the landing page, you should see something like this:

Screenshot (29).png

  • Click on 'Go to console' on the top right corner of the page, in the navigation bar.

  • Once you click on that, you shall be redirected to the console and you will see something like this:

Screenshot (31).png Now, if you have recently just created an account in firebase you won't be having any projects so you will not be seeing anything besides the add project tab.

  • Click on 'Add Project'. And you will be on the create project page.

Screenshot (32).png

Give a name as per your choice but remember the Project name can only contain letters, numbers, spaces, and these characters: ( - ! ' ")

Screenshot (33).png

After you have given a name as per your choice. Click Continue to proceed.

  • Now you are at step 2 of creating a Firebase project. Click Continue.

Screenshot (34).png

  • Step 3 requires you to choose or create an account for google analytics.

Screenshot (35).png

Screenshot (36).png

Choose default firebase account.

Screenshot (37).png

Click on 'Create Project'

Firebase starts creating your new project.

Screenshot (38).png

This may take some time to finish, but once it is done you will be prompted about the completion of the project creation step and you are good to go.

Screenshot (39).png

  • Henceforth, you can press continue to land the project page you just created on firebase or open your IDE and open a new terminal.

  • Run the following command to install the firebase tools which lets us manage, test deploy firebase projects from the command line. It is recommended that you install the firebase tools package globally.

npm install -g firebase-tools
  • To make sure you are logged in Firebase, run the following command.
    firebase login
    
    If you are logged in you should see an immediate prompt in the terminal.

Screenshot (40).png

  • Now, this the step you need to take care of. This is important. You need to run the npm build. This command performs any necessary building tasks for the project before the project can be used in another project. Basically, what happens is, you are willing to deploy your React Project with Firebase to your firebase project that you created.

To run the build command using npm, type in the following command in the terminal

npm run build

As soon as the building tasks are finished, you will be shown a message, like in the screenshot below.

Screenshot (41).png

  • So far, so good. Now you are required to initialize a Firebase project in the directory. (Relative to the path of your React Project Folder)
  • Run the following command in the terminal to start initializing the firebase project in the directory. s
    firebase init
    
    The firebase init command creates a firebase.JSON config file in the root of the project directory. The firebase.json file is required to deploy assets with the Firebase CLI because it specifies which files and settings from your project directory are deployed to your Firebase project.

Upon running the firebase init command you shall see something like :

Screenshot (42).png

Press Y/y to confirm and proceed.

  • You will be shown a list of services that Firebase offers.

Screenshot (43).png

The scope of this blog is limited to hosting. So, select hosting. Use arrow keys to navigate the options, spacebar to select the service options you need, and enter to proceed.

  • After you select hosting service and proceed. You will be asked to associate the current project directory with a firebase project.

Screenshot (44).png

  • From now you can choose any option. But since we have already created a Firebase project at the start, go with use an existing project, and press enter to continue.

Upon selecting that option, you will be shown the list of firebase projects that you created.

Screenshot (45).png

  • Use the arrow keys to select the right project and press enter to continue. Upon pressing enter, you will be prompted with a number of questions before your firebase project is initialized.

Screenshot (46).png

  • Make sure to use build folder as the public directory.

Screenshot (47).png

Upon pressing enter , you will be asked another question in the command line.

Screenshot (48).png

  • Press Y/y and enter to proceed.

Screenshot (49).png

  • You can choose to press yes or no. Pressing Yes will just ask you to choose a repository from Github and so to manage auto-deploy from GitHub. For simplicity, press n/N/No and enter to continue. the process Screenshot (50).png
  • Make sure you do not overwrite the build files/index.html files. PRESS n/N and enter to finish. If you wish to overwrite the build/index.html files, firebase will overwrite the current buil#d file with its custom root file. Which is not a big deal, it is fun to play around.

Once finished you will see a positive response saying the initialization is complete:

Screenshot (51).png

  • Finally, the final step to deploy your app. Run the following command,
firebase deploy

And the deployment process starts. It takes some time depending upon the files. Once it is completed, you will be shown a positive response in the terminal and also the URL of your web app.

Screenshot (52).png

  • Once deployed, firebase does not track any changes made to the local repository. So it is recommended that you deploy your app only when you are satisfied with the functionality. #
  • However, you can manage actions from the GitHub repo to track changes and deploy changes automatically from PRs, but I find that to be a little complicated process.

In case you want to make changes to your app after you have deployed it. Just follow these steps.

  1. Delete the firebase.json file, and you are good to go.

    To be double sure that you are no longer using an initialized Firebase project, you can also run the following command.

npm uninstall firebase
  1. Run npm build.
  2. Repeat the processes from initializing the firebase project in the project directory.