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 57be892d02 with-firebase-hosting: update to work with next v6 (#4435)
* with-firebase-hosting: update next.js 6, readme about customization

* now next.js 6 is on Babel 7, remove conflicting babel deps
* update Next Server/Cloud Function .babelrc config
* update other deps: Cloud Functions to 1.x.x etc
* rm install-deps script as it is no longer used on deployment (firebase does not upload node_modules)
* make scripts consistent in their wrapping of dirs with \" (escaped double quotes)

* with-firebase-hosting: pin next to "latest" version

* with-firebase-hosting: fix lint errors
2018-05-21 10:28:09 +02:00
..
src with-firebase-hosting: update to work with next v6 (#4435) 2018-05-21 10:28:09 +02: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 with-firebase-hosting: update to work with next v6 (#4435) 2018-05-21 10:28:09 +02:00
package.json with-firebase-hosting: update to work with next v6 (#4435) 2018-05-21 10:28:09 +02:00
README.md with-firebase-hosting: update to work with next v6 (#4435) 2018-05-21 10:28:09 +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 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/<projectId>
  • update the .firebaserc default 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:

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 clean, dev, serve and deploy.

Customization

Next App and Next Server development are separated into two different folders:

  • app - src/app/
  • server - src/functions/

If you wish to modify any configuration of the Next App, you should only modify the contents of src/app.

For instance, the .babelrc in src/functions is used only to compile the Firebase Cloud Functions code, which is our the Next Server code. If you wish to customize the .babelrc for the Next App compilation, then you should create one at src/app/.babelrc and follow the customization guide.

_app.js

If using _app.js you may receive the following error on your deployed Cloud Function:

{ Error: Cannot find module '@babel/runtime/regenerator'...

Despite next.js having @babel/runtime as a dependency, you must install it as a dependency directly in this project.