From 4345343d886b8733b11934aa001dc6e236bcf49a Mon Sep 17 00:00:00 2001 From: Oscar Busk Date: Tue, 11 Dec 2018 23:24:18 +0100 Subject: [PATCH] Update/fix "examples/with-firebase-hosting-and-typescript" (#5864) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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` --- .../.gitignore | 3 ++ .../README.md | 4 ++ .../package.json | 38 ++++++++++--------- .../functions/{src/app/next.ts => index.ts} | 6 +-- .../src/functions/src/index.ts | 3 -- .../src/functions/tsconfig.json | 11 +++--- .../src/functions/tslint.json | 3 -- 7 files changed, 36 insertions(+), 32 deletions(-) rename examples/with-firebase-hosting-and-typescript/src/functions/{src/app/next.ts => index.ts} (67%) delete mode 100644 examples/with-firebase-hosting-and-typescript/src/functions/src/index.ts diff --git a/examples/with-firebase-hosting-and-typescript/.gitignore b/examples/with-firebase-hosting-and-typescript/.gitignore index 849ddff3..20005587 100644 --- a/examples/with-firebase-hosting-and-typescript/.gitignore +++ b/examples/with-firebase-hosting-and-typescript/.gitignore @@ -1 +1,4 @@ dist/ + +# Firebase cache +.firebase/ diff --git a/examples/with-firebase-hosting-and-typescript/README.md b/examples/with-firebase-hosting-and-typescript/README.md index a73ab480..fc12fac6 100644 --- a/examples/with-firebase-hosting-and-typescript/README.md +++ b/examples/with-firebase-hosting-and-typescript/README.md @@ -72,3 +72,7 @@ If you're having issues, feel free to tag @sampsonjoliver in the [issue you crea * 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](https://firebase.google.com/docs/cli/#predeploy_and_postdeploy_hooks) 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`. +* Specifying [`"engines": {"node": "8"}`](package.json#L5-L7) in the `package.json` is required for firebase functions + to be deployed on Node 8 rather than Node 6 + ([Firebase Blog Announcement](https://firebase.googleblog.com/2018/08/cloud-functions-for-firebase-config-node-8-timeout-memory-region.html)) + . This is matched in by specifying target as `es2017` in [`src/functions/tsconfig.json`](src/functions/tsconfig) so that typescript output somewhat compacter and moderner code. diff --git a/examples/with-firebase-hosting-and-typescript/package.json b/examples/with-firebase-hosting-and-typescript/package.json index 1db67e3c..6688fd17 100644 --- a/examples/with-firebase-hosting-and-typescript/package.json +++ b/examples/with-firebase-hosting-and-typescript/package.json @@ -1,10 +1,14 @@ { - "name": "with-firebase-hosting", + "name": "with-firebase-hosting-and-typescript", "version": "1.0.0", - "description": "Host Next.js SSR app on Firebase Cloud Functions with Firebase Hosting redirects.", + "description": "Host Next.js SSR app on Firebase Cloud Functions with Firebase Hosting redirects. Built with typescript.", + "engines": { + "node": "8" + }, "scripts": { "dev": "next src/app", - "serve": "NODE_ENV=production firebase serve --only functions,hosting", + "preserve": "npm run build-public && npm run build-functions && npm run build-app && npm run copy-deps && npm run install-deps", + "serve": "cross-env NODE_ENV=production firebase serve", "deploy": "firebase deploy", "clean": "rimraf \"dist/functions\" && rimraf \"dist/public\"", "build-app": "next build \"src/app\"", @@ -13,26 +17,26 @@ "lint-app": "tslint --project src/app", "typecheck-app": "tsc --project src/app", "lint-functions": "tslint --project src/functions", - "copy-deps": "cpx \"*{package.json,package-lock.json,yarn.lock}\" \"dist/functions\"", + "copy-deps": "cpx \"*{package.json,package-lock.json,yarn.lock}\" \"dist/functions\" -C", "install-deps": "cd \"dist/functions\" && npm i" }, "dependencies": { - "@zeit/next-typescript": "1.1.0", - "firebase-admin": "~5.12.1", - "firebase-functions": "^1.0.1", - "next": "^6.0.3", - "react": "^16.3.2", - "react-dom": "^16.3.2" + "@zeit/next-typescript": "^1.1.0", + "firebase-admin": "^6.3.0", + "firebase-functions": "^2.1.0", + "next": "^7.0.0", + "react": "^16.6.0", + "react-dom": "^16.6.0" }, "devDependencies": { - "@types/next": "^2.4.10", - "@types/react": "^16.3.14", + "@types/next": "^7.0.0", + "@types/react": "^16.6.0", "cpx": "1.5.0", - "firebase-tools": "3.18.4", - "prettier": "1.12.1", + "cross-env": "5.2.0", + "firebase-tools": "^6.1.0", "rimraf": "2.6.2", - "tslint": "^5.8.0", - "tslint-react": "3.6.0", - "typescript": "^2.5.3" + "tslint": "^5.11.0", + "tslint-react": "^3.6.0", + "typescript": "^3.2.0" } } diff --git a/examples/with-firebase-hosting-and-typescript/src/functions/src/app/next.ts b/examples/with-firebase-hosting-and-typescript/src/functions/index.ts similarity index 67% rename from examples/with-firebase-hosting-and-typescript/src/functions/src/app/next.ts rename to examples/with-firebase-hosting-and-typescript/src/functions/index.ts index 061f11a3..6ced035b 100644 --- a/examples/with-firebase-hosting-and-typescript/src/functions/src/app/next.ts +++ b/examples/with-firebase-hosting-and-typescript/src/functions/index.ts @@ -1,11 +1,11 @@ import * as functions from 'firebase-functions'; -const next = require('next'); +import * as next from 'next'; const dev = process.env.NODE_ENV !== 'production'; const app = next({ dev, conf: { distDir: 'next' } }); const handle = app.getRequestHandler(); export const nextApp = functions.https.onRequest((req, res) => { - console.log('File: ' + req.originalUrl); - return app.prepare().then(() => handle(req, res)); + console.log('File: ' + req.originalUrl); + return app.prepare().then(() => handle(req, res)); }); diff --git a/examples/with-firebase-hosting-and-typescript/src/functions/src/index.ts b/examples/with-firebase-hosting-and-typescript/src/functions/src/index.ts deleted file mode 100644 index 6b630050..00000000 --- a/examples/with-firebase-hosting-and-typescript/src/functions/src/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import * as functions from 'firebase-functions'; - -export { nextApp } from './app/next'; \ No newline at end of file diff --git a/examples/with-firebase-hosting-and-typescript/src/functions/tsconfig.json b/examples/with-firebase-hosting-and-typescript/src/functions/tsconfig.json index 04348322..7e15c07c 100644 --- a/examples/with-firebase-hosting-and-typescript/src/functions/tsconfig.json +++ b/examples/with-firebase-hosting-and-typescript/src/functions/tsconfig.json @@ -1,13 +1,12 @@ { "compilerOptions": { - "lib": ["es6"], + "lib": ["es2017"], "module": "commonjs", - "noImplicitReturns": true, + "strict": true, "outDir": "../../dist/functions", "sourceMap": true, - "target": "es6", - "baseUrl": "./src" + "target": "es2017", + "baseUrl": "./" }, - "compileOnSave": true, - "include": ["src"] + "compileOnSave": true } diff --git a/examples/with-firebase-hosting-and-typescript/src/functions/tslint.json b/examples/with-firebase-hosting-and-typescript/src/functions/tslint.json index 4d35c4e1..c952af39 100644 --- a/examples/with-firebase-hosting-and-typescript/src/functions/tslint.json +++ b/examples/with-firebase-hosting-and-typescript/src/functions/tslint.json @@ -107,9 +107,6 @@ // Warns if function overloads could be unified into a single function with optional or rest parameters. "unified-signatures": {"severity": "warning"}, - // Warns if code has an import or variable that is unused. - "no-unused-variable": {"severity": "warning"}, - // Prefer const for values that will not change. This better documents code. "prefer-const": {"severity": "warning"},