mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

James Hegedus b4b5b1fa6d with-firebase-hosting improvements & fixes (#3886 )

* Next.js v5 update, _error & _document bugs fixes

* document clean script

* remove old build artefact

* add babelrc

* reset next.js version to 'latest' from '^5.0.0'

* typo in readme

* format code

* remove _files as they were a fix for a solved, but unreleased problem

2018-02-28 11:54:48 +01:00

2.6 KiB

Raw Blame History

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 .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:

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.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.

2.6 KiB Raw Blame History