React + Firestore : Deploying Your Application
To get setup please refer to part 1 : React + Firestore : Get Setup In Five Steps.
Please refer to part 2 for the basics of reading and writing to the database in React + Firestore: CRUD.
Initialise A Firebase Project
To be able to deploy a project to firebase hosting you will need to have firebase-tools installed on your computer. To do this open up your terminal and type npm install -g firebase-tools
When firebase-tools is finished installing, navigate to your the folder with the react project you want to deploy. Then type firebase init into the terminal.
You will be asked which firebase features you would like to include. We are going to use the example project in React + Firestore: CRUD](https://joshpitzalis.svbtle.com/crud) so we are going to select Firestore and Hosting. Use teh arrow keys to move up and down and then the space bar to select a feature. Press enter to continue.
Next you will be asked which Firebase project you want to connect your React app to. If this is the first time you are deploying an app then there should only be one option. If you have done this before then make sure you pick the one that has the same name as the project you set up in the firebase console.
The next option will be to which file you want to use for firebase rules. Just press enter to select the default option.
The same for which file you want to use for firebase indexes. Just press enter to select the default option.
The next option will be to which folder you want to use as your public directory. Make sure you type build for this option. When we optimise our react app in the next step, we push all our optimised code to a folder named build and we want firebase to use that code.
The last question is whether you want to configure the project as a single page app. type y for yes and press enter.
Firebase initialization is now complete.
You should see three new files in the root of your react project: .firebaserc, database.rules.json and firebase.json.
Optimise Your React Project for Deployment
If you have used create-react-app to get started then there is a simple way to minify and bundle all your files so that it is ready to deploy. In your terminal, make sure you’re at the root of react project and then type npm run build.
When this is complete you should see a new build folder in the root of your react project.
Deploy to Firebase
In your terminal, make sure you’re at the root of react project and then type firebase deploy.
Once deployment is complete, you will be shown a url in your terminal. You can copy this url into a brower and you will see a hosted version of your app.
Congratulation you have successfully deployed your react application to the web.
If you’d like to learn how to build a full-stack application with React and Firebase from scratch, I am putting together a course that will show you how to.
The course will involve building and deploying a web application using Firebase, React 16 and React Router 4. The course is aimed at front-end developers who want to make the jump to building full-stack applications.
You can sign up to be notified when the Firebase + React Course is released at firebasereact.com.