terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity
next.js/examples/with-firebase-hosting/README.md
James Hegedus 84de7f9397 With Firebase Hosting Example (#2642) 
* Rename Firebase Auth example

* Update gitignore to include npm5 lockfile

* Cloud Function

* Add Next app with two pages to demonstrate navigation

* Add Firebase Hosting and configuration to Host & Deploy

* Fix errors in rename for firebase-auth example

* Recommend pkg managers with caches for better perf

* Update with-firebase-hosting example

Fix code

* Update with-firebase-hosting example

Fix npm scripts and package.json files

* Update with-firebase-hosting example

Update README & install scripts

* Update with-firebase-hosting example

Update example package name

* Update with-firebase-hosting example

Fix to use single-quotes

* Update with-firebase-hosting example

VSCode did not like single-quotes! Sorry

* Fix gitignore file
2017-07-26 07:52:49 +02:00

2 KiB
Raw Blame History

With Firebase Hosting example

How to use

Download the example or clone the repo:

curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-firebase-hosting
cd with-firebase-hosting

It is recommended to use a package manager that uses a lockfile and caching for faster dev/test cycles:

Set up firebase:

Install project:

npm install

Run Next.js development:

npm run next

Run Firebase locally for testing:

npm run serve

Deploy it to the cloud with Firebase

npm run deploy

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 & Caveats

  • 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.
  • Testing on Firebase locally requires a complete build of the Next.js app. npm run serve handles everything required.
  • Any npm modules dependencies used in the Next.js app (app/ folder) must also be installed as dependencies for the Cloud Functions project (functions folder).