archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rsnext/examples/with-firebase-hosting
History
Oscar Busk 077097b7f8
Remove licence from all example/package.json that has them (#28007) 
* Add licences to all example/package.json that lack them

* Revert "Add licences to all example/package.json that lack them"

This reverts commit 5d4e25012f7334772b8ef5924bc355277e827cba.

* Update check-examples to remove `license` field from examples

* Remove `license` from all examples.

This was mentioned in vercel/next.js#27121 but it looks like it didn't end up being in the merge?

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2021-08-14 10:48:39 -05:00
..
public Update with-firebase-hosting[-and-typescript] examples (#11685) 2020-05-02 00:56:40 -04:00
src More redundant imports @ examples (#13190) 2020-05-22 15:33:04 +00:00
.firebaserc With Firebase Hosting Example (#2642) 2017-07-26 07:52:49 +02:00
.gitignore Added .gitignore to examples that are deployed to vercel (#15127) 2020-07-16 10:52:23 -04:00
firebase.json Update Firebase hosting example to use Node.js 14. (#27988) 2021-08-12 21:46:23 -05:00
firebaseFunctions.js Fix with-firebase-hosting running locally (#21971) 2021-02-09 08:52:21 -06:00
package.json Remove licence from all example/package.json that has them (#28007) 2021-08-14 10:48:39 -05:00
README.md Fix typos found on examples docs (#20516) 2020-12-27 17:14:58 +00:00

README.md

with Firebase Hosting 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.

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

Make sure that firebase is set up and you have the projectID
  • Install Firebase Tools: npm i -g firebase-tools
  • Create a project through the firebase web console
  • Login to the Firebase CLI tool with firebase login
  • Grab the projectID from firebase projects:list or the web consoles URL: https://console.firebase.google.com/project/<projectID>

How to use

Execute create-next-app with npm or Yarn 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

Important: Update .firebaserc and add your firebase project ID.

To run Firebase locally for testing:

npm run serve
# or
yarn serve

To deploy it to the cloud with Firebase:

npm run deploy
# or
yarn deploy

Typescript

To use Typescript, simply follow Typescript setup as normal (package.json scripts are already set).

i.e: npm install --save-dev typescript @types/react @types/node

Then you can create components and pages in .tsx or .ts

Only src/next.config.js and firebaseFunctions.js must remain in *.js format.

Good to know

  • firebase.json outlines the catchall rewrite rule for our Cloud Function.
  • The empty public/.gitignore file is to ensure public/ dir exists as it is required for Firebase Hosting. It is configured (by default) that dotfiles (public/.*) are ignored from being publicly served.
  • The Cloud Function is named nextjsFunc (changeable in firebaseFunctions.js and firebase.json).
  • public/* files are statically served through Firebase hosting, not through NextJs server.

Customization

Next App is in src/ directory.

The crucial files for the setup:

  • .firebaserc
  • firebase.json
  • firebaseFunctions.js
  • src/next.config.js
  • In package.json: firebase-* packages.

References