Back to Schedule

Project Week 2: Application Deployment

As we begin working on our group projects, you may be wondering how to publish your applications from your local machines onto a globally accessible server on the internet. With the help of Firebase, it’s never been easier to host your React projects. All it takes is a few simple steps:

1. Navigate to your project directory (this should be a React project you built with create-react-app). You should be in the same folder that contains your package.json file.

2. Run npm run build from your command line. This step will compile all your React files to plain JavaScript that can be read by the browser. You can see the result in the /build/static directory after it completes. You should see the following message if the build was successful:

    ```
    The build folder is ready to be deployed.
    You may serve it with a static server:
   
    npm install -g serve
    serve -s build
    ```
   

3. Run firebase login. This will take you to a Google website where you can provide your Google credentials to login. Be sure to login with the same account that you used for Firebase.

4. If you have not created a project at https://firebase.google.com/ yet, go ahead and do that. Follow the steps from the Firebase homework we previously did to set it up. You may need to select that project in the following step for setup. You must use the same Firebase project for hosting as you do for the database for this project.

5. Run firebase init to initialize the files you need to deploy your Firebase project. Respond to the questions as follows:

    `Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.` For our projects, you will need to select **Database** and **Hosting**.
   
    `What file should be used for Database Rules?` Use the default `database.rules.json`
   
    `What do you want to use as your public directory?` Type in `build` to use the build folder we created in step 1. (Do not use public)
   
    `Configure as a single-page app (rewrite all urls to /index.html)` Respond `Y` for yes.
   
    `File build/index.html already exists. Overwrite?` Respond `N` for no.
   

6. Now all should be ready for deployment! Run firebase deploy and then you will see a success message with the URL that your application has been deployed at.