mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

History

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
..
pages	Add prettier for examples directory (#5909 )	2018-12-17 17:34:32 +01:00
.babelrc	Fix with-custom-reverse-proxy example (#5064 )	2018-08-30 23:32:19 +02:00
.eslintrc	Example to add custom reverse proxy like in webpack-dev-server (#2660 )	2017-07-29 14:45:12 +02: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
server.js	Add prettier for examples directory (#5909 )	2018-12-17 17:34:32 +01:00

README.md

Reverse Proxy example

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-custom-reverse-proxy with-custom-reverse-proxy-app
# or
yarn create next-app --example with-custom-reverse-proxy with-custom-reverse-proxy-app

Download manually

Download the example:

curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-custom-reverse-proxy
cd with-custom-reverse-proxy

Install it and run:

npm install
npm run dev
# or
yarn
yarn dev

The idea behind the example

This example applies this gist https://gist.github.com/jamsesso/67fd937b74989dc52e33 to Nextjs and provides:

Reverse proxy in development mode by add http-proxy-middleware to custom server
NOT a recommended approach to production scale (hence explicit dev flag) as we should scope proxy as outside UI applications and have separate web server taking care of that.

Sorry for the extra packages. I belong to the minority camp of writing ES6 code on Windows developers. Essentially you only need http-proxy-middleware on top of bare-bone Nextjs setup to run this example.

What it does

Take any random query string to the index page and does a GET to /api/<query string> which gets routed internally to https://swapi.co/api/<query string>, or any API endpoint you wish to configure through the proxy.

Expectation

/api/people/2 routed to https://swapi.co/api/people/2 Try Reset

{
  "name": "C-3PO",
  "height": "167",
  "mass": "75",
  "hair_color": "n/a",
  "skin_color": "gold",
  "eye_color": "yellow",
  "birth_year": "112BBY",
  "gender": "n/a",
  "homeworld": "https://swapi.co/api/planets/1/",
  "films": [
    "https://swapi.co/api/films/2/",
    "https://swapi.co/api/films/5/",
    "https://swapi.co/api/films/4/",
    "https://swapi.co/api/films/6/",
    "https://swapi.co/api/films/3/",
    "https://swapi.co/api/films/1/"
  ],
  "species": ["https://swapi.co/api/species/2/"],
  "vehicles": [],
  "starships": [],
  "created": "2014-12-10T15:10:51.357000Z",
  "edited": "2014-12-20T21:17:50.309000Z",
  "url": "https://swapi.co/api/people/2/"
}