Deploying React Applications to Firebase

When first learning to program, one of the best moments is when you are able to implement your vision into a working application. The next best moment is working out the kinks of the application, at least enough, to deploy it for the world to interact with. There are many great options to do this but the one I will focus on is using Google’s Firebase.

Firebase is a platform that offer many services for web and mobile applications including hosting. Hosting involves providing your code to an infrastructure to run on and by doing so the application becomes accessible over the internet. To get started is very simple. You will want to deploy production level code, that is, an optimized version of the code written while developing your application. The optimized code consists of a smaller code base which translates to faster execution once it is deployed to the internet. To do this, you simply run the following command:

npm run build

This command will create a folder called “build” which will contain the optimized production build. Inside the build folder you will see many folders and files all which represent the files and code written in development mode, albeit smaller and condensed. Once this is done, you will have to set up hosting on Firebase. The first step will be to install the Firebase command line tools using npm like so:

npm install -g firebase-tools

After the Firebase tools are installed, you will need to sign in to Google via:

firebase login

Running this command will prompt you to log in to your Google account via a pop up window. After you have logged in, you will need to initialize Firebase within your application’s root directory. Run the command:

firebase init

After doing so, you will be prompted to select from a series of features for your application, in this case, you can select Hosting from the options.

Afterwards you will be prompted to select which project you want to host, in that case. you can select your project. Next, you will be asked which folder from within your application do you want served as the public directory, in other words, which files to upload for deployment, so you select the build directory with the optimized code.

After this, you will be asked if you want to configure your application as a single-page app to which you input “Yes” to ensure the the Firebase server always returns the index.html file that found within the build directory. By doing so, this allows React’s client-side routing to handle url requests made by the user instead of the server. Finally, you input “No” to overwriting the already existing index.html file that is within your build directory. After these steps are completed, a .firebaserc and .firebase.json file will be generated containing information on your application and hosting configuration. You can now run:

firebase deploy

With this, your build directory will be uploaded to Firebase and a hosting url will be generated in your terminal. You can also configure your own domain to be served by Firebase. Congratulations, at this point, you can now visit that url and see your application running on live.

As mentioned before, Firebase offers a ton of other features which makes developing entire applications easier. You can read more those services here. https://firebase.google.com/docs/web/setup#register-app