--- title: "React in production with Firebase Hosting" description: "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." author: "Oscar Barajas Tavares" language: "en" canonical: "https://gndx.dev/en/blog/react-en-produccion-firebase-hosting/" datePublished: "2017-10-10T00:00:00.000Z" dateModified: "2017-10-10T00:00:00.000Z" categories: ["others"] tags: ["firebase","react","resources"] --- # 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. **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_](https://github.com/gndx/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](http://firebase.google.com)) and enable a new project by choosing a name for your new app. ![React Firebase](https://i1.wp.com/gndx.co/wp-content/uploads/2017/10/react-firebase-gndx-01.png?resize=700%2C482&ssl=1) 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. ![React Firebase](https://i0.wp.com/gndx.co/wp-content/uploads/2017/10/react-firebase-gndx-02.png?resize=691%2C839&ssl=1) 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. ![React Firebase](https://i0.wp.com/gndx.co/wp-content/uploads/2017/10/react-firebase-gndx-03.png?resize=700%2C402&ssl=1) **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/](https://barajas-mx.firebaseapp.com/) ![React Firebase](https://i1.wp.com/gndx.co/wp-content/uploads/2017/10/react-firebase-gndx-04.png?resize=700%2C453&ssl=1) \*\*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](https://tudominio.com)_ your project working. In my case I used my domain [https://barajas.mx](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… --- Fuente canónica: [https://gndx.dev/en/blog/react-en-produccion-firebase-hosting/](https://gndx.dev/en/blog/react-en-produccion-firebase-hosting/) Autor: [Oscar Barajas Tavares](https://gndx.dev/en/about/)