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-and-typescript
Luke Barton cbfdcce32d Update typescript examples to use 1.0.1 of next-typescript (#4472)
* Update typescript examples to use 1.0.1 of next-typescript

* Add .babelrc modifications to upgraded typescript examples
2018-05-25 11:28:35 +02:00
..
src Create with-firebase-hosting-and-typescript example (#4443) 2018-05-21 10:25:45 +02:00
.babelrc Update typescript examples to use 1.0.1 of next-typescript (#4472) 2018-05-25 11:28:35 +02:00
.firebaserc Create with-firebase-hosting-and-typescript example (#4443) 2018-05-21 10:25:45 +02:00
.gitignore Create with-firebase-hosting-and-typescript example (#4443) 2018-05-21 10:25:45 +02:00
firebase.json Create with-firebase-hosting-and-typescript example (#4443) 2018-05-21 10:25:45 +02:00
package.json Update typescript examples to use 1.0.1 of next-typescript (#4472) 2018-05-25 11:28:35 +02:00
README.md Create with-firebase-hosting-and-typescript example (#4443) 2018-05-21 10:25:45 +02:00

With Firebase Hosting and Typescript 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-and-typescript with-firebase-hosting-and-typescript-app
# or
yarn create next-app --example with-firebase-hosting-and-typescript with-firebase-hosting-and-typescript-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-and-typescript
cd with-firebase-hosting-and-typescript

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, with a complete Typescript stack for both the Next app and for the Firebase Functions. 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 of @jthegedus in the with-firebase-hosting example.

If you're having issues, feel free to tag @sampsonjoliver 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 defined in firebase.json will handle linting and compiling of the next app and the functions sourceswhen firebase deploy is invoked. The only scripts you should need are dev, clean and deploy.