1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-firebase-hosting
James Hegedus f2e56609cd Examples: stabalise README format and create-next-app usage (#4009)
* Examples: clarify language around Yarn create & npx

* add missing READMEs and create-next-app usage

* suggest people tag jthegedus in firebase related issues

* add yarn alt instructions

* cerebraljs example readme & fixes
2018-04-03 14:19:05 +02:00
..
src with-firebase-hosting improvements & fixes (#3886) 2018-02-28 11:54:48 +01:00
.firebaserc With Firebase Hosting Example (#2642) 2017-07-26 07:52:49 +02:00
.gitignore with-firebase-hosting improvements & fixes (#3886) 2018-02-28 11:54:48 +01:00
firebase.json FIX deploy with-firebase-hosting (#3946) 2018-03-08 13:54:32 +01:00
package.json Merge branch 'canary' of github.com:zeit/next.js into canary 2018-03-31 16:07:16 +02:00
README.md Examples: stabalise README format and create-next-app usage (#4009) 2018-04-03 14:19:05 +02:00

With Firebase Hosting example

How to use

Using create-next-app

Execute create-next-app with Yarn or npx to bootstrap the example:

npx create-next-app --example with-firebase-hosting with-firebase-hosting-app
# or
yarn 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 project:

npm install

Run Next.js development:

npm run dev

Run Firebase locally for testing:

npm run serve

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.

If you're having issues, feel free to tag @jthegedus in the issue you create on the next.js repo

Important

  • The empty placeholder.html file is so Firebase Hosting does not error on an empty public/ folder and still hosts at the Firebase project URL.
  • firebase.json outlines the catchall rewrite rule for our Cloud Function.
  • The Firebase predeploy hooks run most of the npm scripts when npm run deploy runs firebase deploy. The only scripts you should need are dev, clean and deploy.