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/README.md
Oscar Busk 82c5cc38d5 Update/fix "examples/with-firebase-hosting" (#5853)
Hello! 
I was looking at the [`with-firebase-hosting`](/zeit/next.js/tree/canary/examples/with-firebase-hosting) example and was having some various issues running it:

* `npm run serve` will choke on windows because trying to set enviroment variables with `NODE_ENV=production`
* `npm run build-funcs` failing because of babeljs mismatches between `@babel/cli@^7.0.0-rc.1` and `next@^6.0.3`
* Not being able to deploy because `firebase-tools` being a deprecated version.

I remedied this and also improved some other factors:

* Use standard JSON formatting on `package.json` so that `npm install` doesn't cause changes on every run. (a83e930)
* Remove "prettier" as a devDependency as there is no use of it in the example and most other examples does not have it as a dependency. (6095663)
* Update all dependencies. The simple usecase in this example didn't really require any changes to the code. (ccde086)
  * [`firebase-admin@6`](https://github.com/firebase/firebase-admin-node/releases/tag/v6.0.0)
  * [`firebase-functions@2`](https://github.com/firebase/firebase-functions/releases/tag/v2.0.0) 
  * [`firebase-tools@4`](https://github.com/firebase/firebase-tools/releases/tag/v4.0.0)
  * [`firebase-tools@5`](https://github.com/firebase/firebase-tools/releases/tag/v5.0.0)
  * [`firebase-tools@6`](https://github.com/firebase/firebase-tools/releases/tag/v6.0.0)
* Make `npm run serve` runnable on windows using [`cross-env`](https://www.npmjs.com/package/cross-env). (b20dda7)
* Update `.gitignore` to ignore firebase cache (bf761b7)
* Remove `src/app/.babelrc` that seems to have been added as a previous bugfix but doesn't seem to do anything currently. (1b02045)
* Remove point from [`README.md`](https://github.com/zeit/next.js/blob/canary/examples/with-firebase-hosting/README.md) that was mentioning any `predeploy` hooks in `firebase.json` as they were removed in 4f4b7a1bce. (5636d9f)
* Use the possibility added by upgrading `firebase-tools` to [`>=4.0.0`](https://github.com/firebase/firebase-tools/releases/tag/v4.0.0) and `firebase-functions` to [`>=2.0.0`](https://github.com/firebase/firebase-functions/releases/tag/v2.0.0) to make the deployable functions use node 8 rather than node 6. Also make babel compile with node 8 as target for less polyfills etc. (c954cc2)
  * Added comment to [`README.md`](https://github.com/zeit/next.js/blob/canary/examples/with-firebase-hosting/README.md) explaining how firebase deploys to node 8 and that babel will compile code for node 8. (d8b2e65, 91953dc)

This was tested to `serve` on windows, linux(WSL) and on mac. Deploy was tested on linux(WSL) and mac.

---

This PR is a based on #5806 with correct base.

---

🔔 @jthegedus @timneutkens
2018-12-11 11:45:58 +01:00

107 lines
3.7 KiB
Markdown

# With Firebase Hosting example
## How to use
**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:
```bash
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
```
<details>
<summary><b>Download manually</b></summary>
Download the example:
```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-firebase-hosting
cd with-firebase-hosting
```
</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>`
* update the `.firebaserc` default project ID to the newly created project
* login to the Firebase CLI tool with `firebase login`
</details>
<details>
<summary><b>Install Project</b></summary>
```bash
npm install
```
#### Run Next.js development:
```bash
npm run dev
```
#### Run Firebase locally for testing:
```
npm run serve
```
#### Deploy it to the cloud with Firebase:
```bash
npm run deploy
```
#### Clean dist folder
```bash
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.
This is based off of the work at https://github.com/geovanisouza92/serverless-firebase & https://github.com/jthegedus/firebase-functions-next-example as described [here](https://medium.com/@jthegedus/next-js-on-cloud-functions-for-firebase-with-firebase-hosting-7911465298f2).
If you're having issues, feel free to tag @jthegedus in the [issue you create on the next.js repo](https://github.com/zeit/next.js/issues/new)
## 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.
* 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 [`src/functions/.babelrc`](src/functions/.babelrc) so that babel output somewhat compacter and moderner code.
### 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.