mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
4345343d88
There were several issues with the example [examples/with-firebase-hosting-and-typescript](https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting-and-typescript) * `npm run serve` * Has no `pre` task that actually builds the app. Requires manual running of all build scripts. * Will choke on windows because trying to set environment variables with `NODE_ENV=production` * Outdated Typescript and Tslint * Not being able to deploy because `firebase-tools` being of a deprecated version. * Structure, which I understand is based on `firebase-tools` generation, is confising with `src/functions/src` being generally bad structuring. I remedied this and also improved some other factors: * Remove dependency `prettier` as it is unused (f4d6f54) * Upgrade all dependencies (09a9193) * Use upgraded firebase dependencies to deploy to node 8 environment (87e1e09, 7d8055b) * Remove deprecated tslint rule `no-unused-variable` (9392162) * Flattened filestructure in `src/functions` (097a25a) * Use ES import when importing next (6c99adb) * Fixed incorrect name and added somewhat to the description in package.json. `with-firebase-hosting` → `with-firebase-hosting-and-typescript` (1ffa0b5) * Fixed `serve` script by building before running, using [`cross-env`](https://www.npmjs.com/package/cross-env) to set environment variables and remove unecessary flag. (3a1e221, 422ccee, 8811e44) * Add `.firebase` cache to `.gitignore` (4d7cbe4) * Add `-C` (clean) flag when copying dependency files `copy-deps` (0826708) * Use `strict: true` in the functions tsconfig (229b04f) This was tested by running serve on windows and linx(WSL) and deploy on linux(WSL) --- This is based on #5819 but correctly based from `canary` |
||
|---|---|---|
| .. | ||
| src | ||
| .babelrc | ||
| .firebaserc | ||
| .gitignore | ||
| firebase.json | ||
| package.json | ||
| README.md | ||
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:
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 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
.firebasercdefault 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, 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.htmlfile is so Firebase Hosting does not error on an emptypublic/folder and still hosts at the Firebase project URL. firebase.jsonoutlines the catchall rewrite rule for our Cloud Function.- The Firebase predeploy hooks defined in
firebase.jsonwill handle linting and compiling of the next app and the functions sourceswhenfirebase deployis invoked. The only scripts you should need aredev,cleananddeploy. - Specifying
"engines": {"node": "8"}in thepackage.jsonis required for firebase functions to be deployed on Node 8 rather than Node 6 (Firebase Blog Announcement) . This is matched in by specifying target ases2017insrc/functions/tsconfig.jsonso that typescript output somewhat compacter and moderner code.