React in production with Firebase Hosting

Firebase Hosting is a production-level content storage service from Google aimed at developers so they can deploy Web applications with static content quickly and simply.

In this small manual we are going to go step by step to send your development created in React to production. For this we are going to use a project that I have previously built with React “gresume-react” a free template to create a professional portfolio with react.

Project setup in Firebase

This is where we will need to have a Firebase account (firebase.google.com) and enable a new project by choosing a name for your new app.

Remember that Firebase will create a URL based on the name of your application and that is where your application will be available.

Building our project

Our project is built with “create-react-app” this package allows us to forget about the configurations of an initial project and focus on developing with React.

Therefore, to build our project to send to production, it is only necessary to execute the following command: “npm run build” will create a folder within our project called “build/” which contains our entire project ready to be deployed on a production server.

Setting up Firebase Hosting

To upload our project to Firebase Hosting it is necessary to have Firebase Command Line Interface (CLI) installed, we install it with the following command in the console:

npm install -g firebase-tools

Once installed, it is necessary to log in from the console to access our projects. We execute the following command:

firebase login

This command will open a window where we will log in with our Firebase account which will give you the necessary permissions to work from the console with our projects.

Setting up Firebase within our project, we run the following command:

firebase init

We are going to follow the instructions that the client shows us through the console, to use only Firebase Hosting it is necessary to select the option “Hosting: Configure and deploy Firebase Hosting sites” or, failing that, the options you need for your project.

We choose our project that we previously created in Firebase.google.com by selecting it from the list of projects that we have

Select the folder where our project is located, in our case it is the “build/” folder which contains our react project ready for production.

Firebase will ask us if you want our application to be configured as a “single-page-app”. The default option is “no” in our case, we could really benefit from the configuration, so we will type “y”.

Firebase will warn us that we already have an “index.html” file generated, which we do not want to be overwritten. Type “n” and press enter to keep our own “index.html”, generated by our build process above.

Once we complete the initial configuration, it is time to deploy.

Deploy

We run the following command:

firebase deploy

This command will take everything found in “build/” and host it in Firebase, and will show us the URL it generates to view our project in production.

The URL that has been generated for this example is the following: https://barajas-mx.firebaseapp.com/

**Bonus

**

Configure deploy

We can continue working on our project and if we need to make any changes to our project, we just run the command “npm run build” to generate all our files ready for production again and then we run “firebase deploy“.

You can add this command to our scripts inside “package.json” by calling our deploy script: “firebase deploy”.

Which will allow us to execute the following command in the console:

npm run build && npm run deploy

Set up a domain on Firebase Hosting

Setting up a domain is extremely easy in Firebase, if we already have one we can go to the “Hosting” section and choose “Connect a domain” follow the instructions which will validate our domain with a TXT record and once it has been validated we will proceed to add the main type “A” records for our domain and in a matter of minutes we will be able to see in https://tudominio.com your project working.

In my case I used my domain https://barajas.mx where my portfolio is located.

I am going to prepare another manual on how to integrate Firebase Database to display portfolio information.

Soon…