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 thenext.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 indist/apps/ott-app
. Ideally, I would have configured Firebase to look in thedist
folder instead, but since I didn't find a way to do that, I updated theproject.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 theapps/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/!
Top comments (1)
What a great post one could use to easily set up an app, thank you so much for gathering this in such a readable way!!