Twenty Minutes of Code: Deploying to Firebase Hosting

This is Part 2 of my “20 Minutes of Code” series. Last time, I started to deploy to Firebase hosting but ended up figuring out how to generate a production build with create-react-app instead.

For real this time: we’re going to deploy the new production build to Firebase.

Of course, the first step to any Firebase app is to create a new app-space. The easiest way is to use the web console. Point your browser at https://console.firebase.google.com and log in with your Google account.

Click the “Add Project” button to create a new app-space. This will give you everything you need – including hosting – for your application. By default, it will generate a something.firebaseapp.com URL, but you can also use your own domain name if you want.

All you have to do is fill out a name, and agree to give Google all the personal information they ever want.

If you’ve never used the Firebase command line utilities, you will want to install them now. Head over to a Terminal window (or PowerShell) and use npm to install.

If this is your first time using the Firebase command line utilities, you will have to go through an OAuth flow to sign in to Google from the command line. Just type firebase login and your browser will open with a button to allow the command line utility to access your Firebase data.

Just click “Accept” because you don’t have any privacy left anymore anyway.

After you get signed in, you should see something like the following.

Now you’re finally ready. In this case, since we already have an application with a certain file structure, we will do the usual firebase init but with a few small adjustments. We’ll still kick it off with the usual command.

Choose your new project from the menu. Fill out the other configuration options. The defaults are generally fine. For this particular project, I know that I will want “hosting” for sure. I also will want “Firestore” to store my data. And there’s an off chance I will want file storage, so I checked that optional service as well.

As you work your way through this wizard, you will have to answer some more questions. Again, the defaults are generally fine. In this case, I did say “yes” to the Single Page Application question, and I changed the “public” directory to be “build” instead. If you’ll recall, create-react-appcreated a “build” directory for the production-ready files.

I wrapped it all up with firebase deploy --only hostingto send my production build up to the default website.

That’s it for today! Next time we will look at adding some data persistence with Firestore.

Leave a Reply

Your email address will not be published. Required fields are marked *