Old Time Tunes Dev Log 4: Firebase App Hosting deploy

davidshortman

David

Posted on September 29, 2024

Old Time Tunes Dev Log 4: Firebase App Hosting deploy

This is a long-running series of logs that I'm sharing with my spouse to incrementally share everything I do to contribute to our project Old Time Tunes. My goal is to make tiny records of what it takes to build a web platform.

Before making any features for the app, I want to set up deployment of the empty Next app to Firebase.

Firebase automatically configures a bunch of things for you in order to deploy a Next app. It figures out how to host it in a Docker container and manages the cloud resources for you.

I created a new project in Firebase from the web UI: https://console.firebase.google.com/u/0/project/old-time-tunes/overview.

Then, I followed a guide to add an "App Hosting" app from a monorepo into Firebase: https://firebase.google.com/docs/app-hosting/monorepos.

I had to change a few build configurations to help Firebase deploy the app:

  • I had to configure Next to build a "standalone" copy of the app for Docker (https://nextjs.org/docs/pages/api-reference/next-config-js/output#automatically-copying-traced-files). I added output: 'standalone' to the next.config.js file
  • I had to change where Next built files. I saw errors in the Google Cloud console where it was looking in apps/ott-app for the files, but by default Nx was building in dist/apps/ott-app. Ideally, I would have configured Firebase to look in the dist folder instead, but since I didn't find a way to do that, I updated the project.json file for the app to output build files in the expected location with "outputPath": "apps/ott-app"
  • I had to add an apphosting.json file in the root of the repo to explicitly tell Firebase what resources should be used. It specifies the CPU and memory that should be used. Firebase appears to be dumb and expects this to be at the root of the repo instead of in the apps/ott-app directory

I make this change in the PR https://github.com/david-shortman/old-time-tunes/pull/2/files, chore: deploy with firebase.

Now the (empty) app is deployed at https://ott-app--old-time-tunes.us-central1.hosted.app/!

💖 💪 🙅 🚩
davidshortman
David

Posted on September 29, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related