mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
b1d8b839dd
* remove global npm install of create-next-app * add npx to create-next-app command in examples * add bash to shell snippets * add yarn create to next-app command in examples * fix READMEs named with lowercase * change READMEs to use UPPERCASE
77 lines
2.7 KiB
Markdown
77 lines
2.7 KiB
Markdown
# With Firebase Hosting example
|
|
|
|
## How to use
|
|
|
|
### Using `create-next-app`
|
|
|
|
Download [`create-next-app`](https://github.com/segmentio/create-next-app) 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
|
|
```
|
|
|
|
### Download manually
|
|
|
|
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
|
|
|
```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
|
|
```
|
|
|
|
Set up firebase:
|
|
|
|
* 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`
|
|
|
|
#### Install project:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
#### Run Next.js development:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
#### Run Firebase locally for testing:
|
|
|
|
Unfortunately I have been unable to get any combination of
|
|
|
|
```bash
|
|
firebase serve --only functions,hosting
|
|
```
|
|
|
|
to locally host the built Next.js app as expected. [This issue is where solutions are being explored](https://github.com/firebase/firebase-tools/issues/535) and they will be shared here and on the [Next.js repo's similar issue](https://github.com/zeit/next.js/issues/3167) when discovered.
|
|
|
|
#### Deploy it to the cloud with Firebase:
|
|
|
|
```bash
|
|
npm run deploy
|
|
```
|
|
|
|
#### Clean dist folder
|
|
|
|
```bash
|
|
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. 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).
|
|
|
|
## 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](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`.
|