Client public path #740

gregmartyn · 2018-08-30T21:23:49Z

Adds a CLIENT_PUBLIC_PATH env var so that the dev environment can work on a non-http://localhost:3000 url.

E.g. I have a local setup somewhat similar to Laravel Valet https://laravel.com/docs/5.6/valet. We deal with many clients, so it's nice to be able to go to http://clientA.dev and http://clientB.dev instead of remembering which localhost port each client is on, or bringing one down before switching to the next.

…h a non-localhost hostname

…treating it as a boolean

…path2

jaredpalmer

Generally speaking, environment variables should not have their environment name in them. I think the code for this PR is okay, just need to rework names of these options.

jaredpalmer · 2018-09-09T18:50:26Z

README.md

-* `process.env.PORT`: default is `3000`, unless changed
-* `process.env.HOST`: default is `0.0.0.0`
+* `process.env.PORT`: The `BUILD_TARGET=server` build listens on this port for all NODE_ENVs. default is `3000`
+* `process.env.PORT_DEV`:  The `NODE_ENV=development` `BUILD_TARGET=client` listens on this port. Unused when `NODE_ENV=production`. default is `3001`


Let’s discuss the naming convention here. Im not fan of PORT_DEV. Should probably be like HMR_PORT or something.

Looking back, I didn't even use that var and assumed PORT+1. I'll remove it unless there's any good reason to have it.

Someone else added PORT_DEV
f979863#diff-7c88c5c3855db79976ff110d7e59c9fc
Looks like I was carrying that over from packages/razzle/README.md

Hmm must have missed that. We should probably rename it.

In a different PR though, right?

jaredpalmer · 2018-09-09T18:50:59Z

README.md

@@ -236,17 +236,19 @@ export default Component;

 **The following environment variables are embedded during the build time.**

-* `process.env.RAZZLE_PUBLIC_DIR`: Path to the public directory.
+* `process.env.RAZZLE_PUBLIC_DIR`: Absolute path to the public directory in the server's filesystem.


Pretty sure it can be relative.

It technically can, but the default is a path.resolve-generated absolute path. I figure it's better that it predictably be an absolute path, and anyone putting in a relative path can do so at their own risk. I changed the wording in the doc because "Path" alone didn't tell me to expect the default to be "/public" or "/full/path/to/public/"

jaredpalmer · 2018-09-09T18:51:48Z

README.md

 * `process.env.RAZZLE_ASSETS_MANIFEST`: Path to a file containing compiled asset outputs
 * `process.env.REACT_BUNDLE_PATH`: Relative path to where React will be bundled during development. Unless you are modifying the output path of your webpack config, you can safely ignore this. This path is used by `react-error-overlay` and webpack to power up the fancy runtime error iframe. For example, if you are using common chunks and an extra entry to create a vendor bundle with stuff like react, react-dom, react-router, etc. called `vendor.js`, and you've changed webpack's output to `[name].js` in development, you'd want to set this environment variable to `/static/js/vendor.js`. If you do not make this change, nothing bad will happen, you will simply not get the cool error overlay when there are runtime errors. You'll just see them in the console. Note: This does not impact production bundling.
 * `process.env.VERBOSE`: default is false, setting this to true will not clear the console when you make edits in development (useful for debugging).
-* `process.env.PORT`: default is `3000`, unless changed
-* `process.env.HOST`: default is `0.0.0.0`
+* `process.env.PORT`: The `BUILD_TARGET=server` build listens on this port for all NODE_ENVs. default is `3000`


Isn’t this available on client?

It depends what you mean by client. I'm talking about the webpack build target here. The browser connects to the PORT used by BUILD_TARGET=server for the HTML, then connects to PORT+1 for HMR. (HMR is the BUILD_TARGET=client)

jaredpalmer · 2018-09-09T18:52:48Z

README.md

 * `process.env.NODE_ENV`: `'development'` or `'production'`
 * `process.env.BUILD_TARGET`: either `'client'` or `'server'`
-* `process.env.PUBLIC_PATH`: Only in used in `razzle build`. You can alter the `webpack.config.output.publicPath` of the client assets (bundle, css, and images). This is useful if you plan to serve your assets from a CDN. Make sure to _include_ a trailing slash (e.g. `PUBLIC_PATH=https://cdn.example.com/`). If you are using React and altering the public path, make sure to also [include the `crossorigin` attribute](https://reactjs.org/docs/cdn-links.html#why-the-crossorigin-attribute) on your `<script>` tag in `src/server.js`.
+* `process.env.PUBLIC_PATH`: Only in used in `razzle build`. You can alter the `webpack.config.output.publicPath` of the client assets (bundle, css, and images). This is useful if you plan to serve your assets from a CDN. Make sure to *include* a trailing slash (e.g. `PUBLIC_PATH=https://cdn.example.com/`). If you are using React and altering the public path, make sure to also [include the `crossorigin` attribute](https://reactjs.org/docs/installation.html#using-a-cdn) on your `<script>` tag in `src/server.js`.
+* `process.env.CLIENT_PUBLIC_PATH`: The `NODE_ENV=development` build's `BUILD_TARGET=client` has a different `PUBLIC_PATH` than `BUILD_TARGET=server`. Default is `http://${process.env.HOST}:${process.env.PORT_DEV}/`


I don’t understand why this is needed. It’s just the public path.

There are two different public paths that the browser connects to when in NODE_ENV=development. One for the webpack server build at PUBLIC_PATH, and one for the webpack client build. Razzle doesn't currently let you specify a PUBLIC_PATH for the client build, and assumes that it's available at http://${dotenv.raw.HOST}:${devServerPort}/

HOST is the IP that the dev server is binding to, which may not be accessible from the host OS when the app is running inside a container/vm. We need some way to differentiate between what the user's browser connects to for HMR and what the dev server binds to, because when containers enter the picture, those can be two different things.

jaredpalmer

Generally speaking, environment variables should not have their environment name in them. I think the code for this PR is okay, just need to rework names of these options.

…path2

jaredpalmer

This looks fine. Just Go back to original readme aside from the addition of the new environment variable

jaredpalmer · 2018-09-27T17:53:16Z

README.md

@@ -246,7 +246,7 @@ export default Component;
 * `process.env.NODE_ENV`: `'development'` or `'production'`
 * `process.env.BUILD_TARGET`: either `'client'` or `'server'`
 * `process.env.PUBLIC_PATH`: Only in used in `razzle build`. You can alter the `webpack.config.output.publicPath` of the client assets (bundle, css, and images). This is useful if you plan to serve your assets from a CDN. Make sure to *include* a trailing slash (e.g. `PUBLIC_PATH=https://cdn.example.com/`). If you are using React and altering the public path, make sure to also [include the `crossorigin` attribute](https://reactjs.org/docs/installation.html#using-a-cdn) on your `<script>` tag in `src/server.js`.
-* `process.env.CLIENT_PUBLIC_PATH`: The `NODE_ENV=development` build's `BUILD_TARGET=client` has a different `PUBLIC_PATH` than `BUILD_TARGET=server`. Default is `http://${process.env.HOST}:${process.env.PORT_DEV}/`
+* `process.env.CLIENT_PUBLIC_PATH`: The `NODE_ENV=development` build's `BUILD_TARGET=client` has a different `PUBLIC_PATH` than `BUILD_TARGET=server`. Default is `http://${process.env.HOST}:${process.env.PORT + 1}/`


Can we actually remove all changes to the README aside from this line in this PR? Let's add the others separately.

thecodedrift · 2018-11-01T23:04:04Z

In case someone else finds this thread & you need this in Razzle <= 2.4.0, you can use the following in your razzle.config.js as a workaround.

module.exports = {
  modify: (config, { target, dev }, webpack) => {
    // note the use RAZZLE_ prefix
    if (dev && process.env.RAZZLE_CLIENT_PUBLIC_PATH) {
      config.output.publicPath = process.env.RAZZLE_CLIENT_PUBLIC_PATH;
    }
    return config;
  }
};

When you upgrade razzle, nothing will break, and you can migrate from RAZZLE_CLIENT_PUBLIC_PATH to CLIENT_PUBLIC_PATH at your leisure.

gregmartyn and others added 8 commits May 22, 2018 15:20

Merge remote-tracking branch 'jaredpalmer/master'

4a38ce4

add CLIENT_PUBLIC_PATH to support running dev-mode in a container wit…

d2da629

…h a non-localhost hostname

Merge remote-tracking branch 'jaredpalmer/master'

b5ad45e

Merge branch 'master' into client_public_path2

ceb2d4c

preserve the full --inspect= flag as passed to yarn start instead of …

b1c3574

…treating it as a boolean

Merge remote-tracking branch 'jaredpalmer/master' into client_public_…

d65adc2

…path2

Merge remote-tracking branch 'jaredpalmer/master' into client_public_…

80a85eb

…path2

revert some changes that were in next but not master

2c61647

This was referenced Aug 30, 2018

Add CLIENT_PUBLIC_PATH env var #530

Closed

Keep the default development Host (localhost) unopinionated or configurable via razzle.config.js #713

Closed

jaredpalmer requested changes Sep 9, 2018

View reviewed changes

gregmartyn added 2 commits September 9, 2018 15:55

Merge remote-tracking branch 'jaredpalmer/master' into client_public_…

42cb808

…path2

not using PORT_DEV

7db7a51

jaredpalmer assigned jackjocross Sep 27, 2018

jaredpalmer requested changes Sep 27, 2018

View reviewed changes

gregmartyn mentioned this pull request Sep 27, 2018

Add CLIENT_PUBLIC_PATH env var (no extraneous doc updates) #761

Merged

gregmartyn closed this Sep 27, 2018

gregmartyn mentioned this pull request Sep 27, 2018

doc updates #762

Merged

gregmartyn mentioned this pull request Oct 14, 2018

Use the correct port when PORT is not set #723

Merged

gregmartyn deleted the client_public_path2 branch January 24, 2020 23:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Client public path #740

Client public path #740

gregmartyn commented Aug 30, 2018 •

edited

Loading

jaredpalmer left a comment

jaredpalmer Sep 9, 2018

gregmartyn Sep 9, 2018

gregmartyn Sep 9, 2018

jaredpalmer Sep 9, 2018

gregmartyn Sep 9, 2018

jaredpalmer Sep 9, 2018

gregmartyn Sep 9, 2018

jaredpalmer Sep 9, 2018

gregmartyn Sep 9, 2018

jaredpalmer Sep 9, 2018

gregmartyn Sep 9, 2018

gregmartyn Sep 9, 2018

jaredpalmer left a comment

jaredpalmer left a comment

jaredpalmer Sep 27, 2018

thecodedrift commented Nov 1, 2018

Client public path #740

Client public path #740

Conversation

gregmartyn commented Aug 30, 2018 • edited Loading

jaredpalmer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaredpalmer left a comment

Choose a reason for hiding this comment

jaredpalmer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thecodedrift commented Nov 1, 2018

gregmartyn commented Aug 30, 2018 •

edited

Loading