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-zones
Juan Olvera 89a4cabbd6 Change React version of examples to latest (#5990)
I changed the version to the following files:

- [x] - examples/with-next-css/package.json
- [x] - examples/with-draft-js/package.json
- [x] - examples/custom-server-polka/package.json
- [x] - examples/with-cerebral/package.json
- [x] - examples/with-zones/package.json
- [x] - examples/with-universal-configuration-runtime/package.json
- [x] - examples/with-apollo/package.json
- [x] - examples/with-higher-order-component/package.json
- [x] - examples/with-hashed-statics/package.json
- [x] - examples/with-pkg/package.json
- [x] - examples/with-jest/package.json
- [x] - examples/with-glamorous/package.json
- [x] - examples/with-custom-reverse-proxy/package.json
- [ ] - examples/with-emotion/package.json
- [x] - examples/with-styled-jsx-scss/package.json
- [x] - examples/with-styled-jsx-plugins/package.json

`with-emotion/package.json` already has the latest, so I guess it's other packabe. BUT I think we need to update this example with the latest version of `emotion` since it changed a little bit (for better).
2019-01-05 12:16:07 +01:00
..
blog Change React version of examples to latest (#5990) 2019-01-05 12:16:07 +01:00
home Change React version of examples to latest (#5990) 2019-01-05 12:16:07 +01:00
package.json Change React version of examples to latest (#5990) 2019-01-05 12:16:07 +01:00
README.md #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
rules-dev.json Universal Webpack (#3578) 2018-01-30 16:44:44 +01:00
rules-prod.json Universal Webpack (#3578) 2018-01-30 16:44:44 +01:00

Deploy to now

Using multiple zones

How to use

Using create-next-app

Execute create-next-app with Yarn or npx to bootstrap the example:

npx create-next-app --example with-zones with-zones-app
# or
yarn create next-app --example with-zones with-zones-app

Download manually

Download the example:

curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-zones
cd with-zones

Install it and run:

npm install
# or
yarn

The idea behind this example

With Next.js you can use multiple apps as a single app using it's multi-zones feature. This is an example showing how to use it.

In this example, we've two apps: 'home' and 'blog'. We also have a set of rules defined in rules.json for the proxy.

Now let's start two of our app using:

npm run home
npm run blog
# or
yarn home
yarn blog

Then start the proxy:

npm run proxy
# or
yarn proxy

Now you can visit http://localhost:9000 and access and develop both apps a single app.

Proxy Rules

This is the place we define rules for our proxy. Here are the rules(in rules.json) available for this app:

{
  "rules": [
    {
      "pathname": "/blog",
      "method": ["GET", "POST", "OPTIONS"],
      "dest": "http://localhost:5000"
    },
    { "pathname": "/**", "dest": "http://localhost:4000" }
  ]
}

These rules are based on ZEIT now path alias rules and use micro-proxy as the proxy.

Special Notes

  • All pages should be unique across zones. A page with the same name should not exist in multiple zones. Otherwise, there'll be unexpected behaviour in client side navigation.
    • According to the above example, a page named blog should not be exist in the home zone.

Production Deployment

Here's how are going to deploy this application into production.

  • Open the now.json file in both blog and home directories and change the aliases as you wish.
  • Then update rules-prod.json accordingly.
  • Now deploy both apps:
cd home
now && now alias
cd ../blog
now && now alias
cd ..
  • Finally, set the path alias rules with
now alias with-zones.now.sh -r rules-prod.json

You can use a domain name of your choice in the above command instead of with-zones.now.sh.

That's it. Now you can access the final app via: https://with-zones.now.sh