d3518242a6
* FIX deploy with-firebase-hosting * add npm run command in place of yarn in firebase.json predeploy hooks * Change yarn with npm * firebase-hosting example: Add warning in examples README * firebase-hosting example: clarify warning language * firebase-hosting example: remove the warning and upgrade to canary * firebase-hosting example: actually upgrade pkg.json |
||
|---|---|---|
| .. | ||
| src | ||
| .firebaserc | ||
| .gitignore | ||
| firebase.json | ||
| package.json | ||
| README.md | ||
With Firebase Hosting example
How to use
Using create-next-app
Download create-next-app to bootstrap the example:
npm i -g create-next-app
create-next-app --example with-firebase-hosting with-firebase-hosting-app
Download manually
Download the example or clone the repo:
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-firebase-hosting
cd with-firebase-hosting
Set up firebase:
- install Firebase Tools:
npm i -g firebase-tools - create a project through the firebase web console
- grab the projects ID from the web consoles URL: https://console.firebase.google.com/project/
- update the
.firebasercdefault project ID to the newly created project - login to the Firebase CLI tool with
firebase login
Install project:
npm install
Run Next.js development:
npm run dev
Run Firebase locally for testing:
Unfortunately I have been unable to get any combination of
firebase serve --only functions,hosting
to locally host the built Next.js app as expected. This issue is where solutions are being explored and they will be shared here and on the Next.js repo's similar issue when discovered.
Deploy it to the cloud with Firebase:
npm run deploy
Clean dist folder
npm run clean
The idea behind the example
The goal is to host the Next.js app on Firebase Cloud Functions with Firebase Hosting rewrite rules so our app is served from our Firebase Hosting URL. Each individual page bundle is served in a new call to the Cloud Function which performs the initial server render.
This is based off of the work at https://github.com/geovanisouza92/serverless-firebase & https://github.com/jthegedus/firebase-functions-next-example as described here.
Important
- The empty
placeholder.htmlfile is so Firebase Hosting does not error on an emptypublic/folder and still hosts at the Firebase project URL. firebase.jsonoutlines the catchall rewrite rule for our Cloud Function.- The Firebase predeploy hooks run most of the npm scripts when
npm run deployrunsfirebase deploy. The only scripts you should need aredev,cleananddeploy.