Skip to content

Commit

Permalink
[Examples] Use the vercel CLI for with-zones (#14480)
Browse files Browse the repository at this point in the history
[ch3480]

Fixes #14242
Closes #14264

Updated the readme of the `with-zones` example to use `vercel dev` instead, starting the app independently has some routing issues that don't happen on production (due to `vercel.json`), with `vercel dev` the app will match the production deployment on localhost.
  • Loading branch information
lfades authored Jun 23, 2020
1 parent bc2cb22 commit b90fa0a
Showing 1 changed file with 12 additions and 6 deletions.
18 changes: 12 additions & 6 deletions examples/with-zones/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
With Next.js you can use multiple apps as a single app using it's [multi-zones feature](https://nextjs.org/docs/advanced-features/multi-zones). This is an example showing how to use it.

- All pages should be unique across zones. For example, the `home` app should not have a `pages/blog/index.js` page.
- The `blog` app sets `assetPrefix` so that generated JS bundles are within the `/blog` subfolder.
- The `blog` app sets [`assetPrefix`](https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix) so that generated JS bundles are within the `/blog` subfolder.
- To also support the plain `next dev` scenario, `assetPrefix` is set dynamically based on the `BUILDING_FOR_NOW` environment variable, see [`vercel.json`](vercel.json) and [`blog/next.config.js`](blog/next.config.js).
- Images and other `/static` assets have to be prefixed manually, e.g., `` <img src={`${process.env.ASSET_PREFIX}/static/image.png`} /> ``, see [`blog/pages/blog/index.js`](blog/pages/blog/index.js).
- Images and other `static` assets have to be prefixed manually, e.g., `` <img src={`${process.env.ASSET_PREFIX}/static/image.png`} /> ``, see [`blog/pages/blog/index.js`](blog/pages/blog/index.js).

## Deploy your own

Expand Down Expand Up @@ -34,16 +34,22 @@ curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=
cd with-zones
```

For every app, install dependencies and run the dev server:
Install the dependencies of every app (`/home` and `/blog`):

```bash
npm install
npm run dev
# or
yarn
yarn dev
```

The `home` app will start in the default port (http://localhost:3000), and `blog` will start on http://localhost:4000.
Install the [Vercel CLI](https://vercel.com/download) if you don't have it already, and then run [`vercel dev`](https://vercel.com/docs/cli?query=dev#commands/dev) in the main directory to start the development server:

```bash
vercel dev
```

Your app should be up and running on [http://localhost:3000](http://localhost:3000)!

> We recommend `vercel dev` in this case instead of `next dev`, as it can start both apps at the same time and use the routes defined in [`vercel.json`](vercel.json)
Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

0 comments on commit b90fa0a

Please sign in to comment.