Deploying Firebase

As I mentioned earlier, Firebase comes with a baked-in deployment solution. Let's get our app up and working on the real live web! Here's how to do it:

1. To do so, we'll first need to install the Firebase command-line tools:

npm install -g firebase-tools

Don’t forget the -g. This flag installs the tools globally on your machine.

1. The next step is to log in to our Firebase tools:

firebase login

1. To complete our Firebase tools setup, we can now initialize our app as a Firebase project, similar to what we did with npm. Ensure that you run this from the root of the project folder:

firebase init

In the first question it then prompts you for, use the arrow keys and the Spacebar to select both Functions and Hosting. We will use Firebase's Cloud Functions later on. Don't select Database, that's for configuring database rules locally; we'll rely on the Firebase console instead.

Your selections should look like this:

When it asks for a default Firebase project, select chatastrophe(or whatever you named this project in the Firebase console).

For the question Do you want to install dependencies with npm now?, enter y.

Next, it'll ask you what folder you want to use as your public directory. Enter build, not public. Firebase is asking what folder to use to deploy your project; we want our final compiled build, including our transpiled JavaScript and therefore, we want the build folder.

Let's move to the next question now! Do we want to configure our app as a single-page application? Heck yes. Decline overwriting index.html though (however, no worries if you say yes; we regenerate our build/index.html every time we run our build command).

Okay, we're all set up to deploy. Let's make an npm script to make our lives easier.

Every time we deploy, we'll want to rerun our build command to ensure that we have the freshest build of our project. Our npm script will thus combine both, added into our package.json:

"scripts": {
  "build": "node scripts/copy_assets.js && node_modules/.bin/webpack --config webpack.config.prod.js",
  "start": "node_modules/.bin/webpack-dev-server",
  "deploy": "npm run build && firebase deploy"
},

Run the script with yarn deploy, and then check out the URL it displays in the Terminal. If all goes well, your app should look exactly like it does in development. Open up the console and check for warnings; if you see any, skim the Webpack chapter and see whether you missed any of the settings for our webpack.config.prod.js (you can take a peek at the final file in the branch here: https://github.com/scottdomes/chatastrophe/tree/chapter4):

Awesome! We have a deployed app ready to share with our friends. The only problem is what we discussed at the end of the last chapter; it doesn't actually do much yet.

Let's get started with using Firebase by adding an authentication process.