mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
with-firebase-hosting: update to work with next v6 (#4435)
* with-firebase-hosting: update next.js 6, readme about customization * now next.js 6 is on Babel 7, remove conflicting babel deps * update Next Server/Cloud Function .babelrc config * update other deps: Cloud Functions to 1.x.x etc * rm install-deps script as it is no longer used on deployment (firebase does not upload node_modules) * make scripts consistent in their wrapping of dirs with \" (escaped double quotes) * with-firebase-hosting: pin next to "latest" version * with-firebase-hosting: fix lint errors
This commit is contained in:
James Hegedus
Tim Neutkens
parent
35d32b48cc
commit
57be892d02
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## How to use
|
||||
|
||||
### Using `create-next-app`
|
||||
**Using `create-next-app`**
|
||||
|
||||
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
|
||||
|
||||
|
|
@ -12,7 +12,8 @@ npx create-next-app --example with-firebase-hosting with-firebase-hosting-app
|
|||
yarn create next-app --example with-firebase-hosting with-firebase-hosting-app
|
||||
```
|
||||
|
||||
### Download manually
|
||||
<details>
|
||||
<summary><b>Download manually</b></summary>
|
||||
|
||||
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
||||
|
||||
|
|
@ -21,15 +22,21 @@ curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2
|
|||
cd with-firebase-hosting
|
||||
```
|
||||
|
||||
Set up firebase:
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><b>Set up firebase</b></summary>
|
||||
|
||||
* install Firebase Tools: `npm i -g firebase-tools`
|
||||
* create a project through the [firebase web console](https://console.firebase.google.com/)
|
||||
* grab the projects ID from the web consoles URL: https://console.firebase.google.com/project/<projectId>
|
||||
* grab the projects ID from the web consoles URL: `https://console.firebase.google.com/project/<projectId>`
|
||||
* update the `.firebaserc` default project ID to the newly created project
|
||||
* login to the Firebase CLI tool with `firebase login`
|
||||
|
||||
#### Install project:
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><b>Install Project</b></summary>
|
||||
|
||||
```bash
|
||||
npm install
|
||||
|
|
@ -59,6 +66,8 @@ npm run deploy
|
|||
npm run clean
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
## 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.
|
||||
|
|
@ -71,4 +80,25 @@ If you're having issues, feel free to tag @jthegedus in the [issue you create on
|
|||
|
||||
* 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 run most of the npm scripts when `npm run deploy` runs `firebase deploy`. The only scripts you should need are `dev`, `clean` and `deploy`.
|
||||
* The [Firebase predeploy](https://firebase.google.com/docs/cli/#predeploy_and_postdeploy_hooks) hooks run most of the npm scripts when `npm run deploy` runs `firebase deploy`. The only scripts you should need are `clean`, `dev`, `serve` and `deploy`.
|
||||
|
||||
### Customization
|
||||
|
||||
Next App and Next Server development are separated into two different folders:
|
||||
|
||||
* app - `src/app/`
|
||||
* server - `src/functions/`
|
||||
|
||||
If you wish to modify any configuration of the Next App, you should only modify the contents of `src/app`.
|
||||
|
||||
For instance, the `.babelrc` in `src/functions` is used only to compile the Firebase Cloud Functions code, which is our the Next Server code. If you wish to customize the `.babelrc` for the Next App compilation, then you should create one at `src/app/.babelrc` and follow the [customization guide](https://github.com/zeit/next.js#customizing-babel-config).
|
||||
|
||||
### _app.js
|
||||
|
||||
If using `_app.js` you may receive the following error on your deployed Cloud Function:
|
||||
|
||||
```
|
||||
{ Error: Cannot find module '@babel/runtime/regenerator'...
|
||||
```
|
||||
|
||||
Despite next.js having `@babel/runtime` as a dependency, you must install it as a dependency directly in this project.
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
},
|
||||
"functions": {
|
||||
"source": "dist/functions",
|
||||
"predeploy":
|
||||
"npm run build-funcs && npm run build-app && npm run copy-deps && npm run install-deps"
|
||||
"predeploy": "npm run build-funcs && npm run build-app && npm run copy-deps"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +1,29 @@
|
|||
{
|
||||
"name": "with-firebase-hosting",
|
||||
"version": "3.0.0",
|
||||
"version": "4.0.0",
|
||||
"description": "Host Next.js SSR app on Firebase Cloud Functions with Firebase Hosting redirects.",
|
||||
"scripts": {
|
||||
"dev": "next src/app",
|
||||
"serve": "NODE_ENV=production firebase serve --only functions,hosting",
|
||||
"dev": "next \"src/app\"",
|
||||
"serve": "NODE_ENV=production firebase serve",
|
||||
"deploy": "firebase deploy",
|
||||
"clean": "rimraf \"dist/functions\" && rimraf \"dist/public\"",
|
||||
"clean": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
|
||||
"build-public": "cpx \"src/public/**/*.*\" \"dist/public\" -C",
|
||||
"build-funcs": "babel \"src/functions\" --out-dir \"dist/functions\"",
|
||||
"build-app": "next build \"src/app\"",
|
||||
"copy-deps": "cpx \"*{package.json,package-lock.json,yarn.lock}\" \"dist/functions\"",
|
||||
"install-deps": "cd \"dist/functions\" && npm i"
|
||||
"copy-deps": "cpx \"*{package.json,package-lock.json,yarn.lock}\" \"dist/functions\" -C"
|
||||
},
|
||||
"dependencies": {
|
||||
"firebase-admin": "5.8.1",
|
||||
"firebase-functions": "^0.8.1",
|
||||
"next": "^5.1.0",
|
||||
"react": "^16.2.0",
|
||||
"react-dom": "^16.2.0"
|
||||
"firebase-admin": "5.12.1",
|
||||
"firebase-functions": "1.0.2",
|
||||
"next": "latest",
|
||||
"react": "16.3.2",
|
||||
"react-dom": "16.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.0.0-beta.40",
|
||||
"@babel/core": "^7.0.0-beta.40",
|
||||
"@babel/preset-env": "^7.0.0-beta.40",
|
||||
"@firebase/app-types": "^0.1.2",
|
||||
"cpx": "^1.5.0",
|
||||
"prettier": "^1.10.2",
|
||||
"rimraf": "^2.6.2"
|
||||
"@babel/cli": "7.0.0-beta.42",
|
||||
"cpx": "1.5.0",
|
||||
"firebase-tools": "3.18.4",
|
||||
"prettier": "1.12.1",
|
||||
"rimraf": "2.6.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import * as React from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default ({ pathname }) => (
|
||||
const Header = ({ pathname }) => (
|
||||
<header>
|
||||
<Link href='/'>
|
||||
<a className={pathname === '/' ? 'is-active' : ''}>Home</a>
|
||||
|
|
@ -11,3 +11,5 @@ export default ({ pathname }) => (
|
|||
</Link>
|
||||
</header>
|
||||
)
|
||||
|
||||
export default Header
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import * as React from 'react'
|
||||
import App from '../components/App'
|
||||
|
||||
export default () => (
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import * as React from 'react'
|
||||
import App from '../components/App'
|
||||
|
||||
export default () => (
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"presets": [
|
||||
[
|
||||
"env",
|
||||
"@babel/preset-env",
|
||||
{
|
||||
"targets": {
|
||||
"node": "6.11.5"
|
||||
|
|
@ -9,4 +9,4 @@
|
|||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue