Skip to content

%PUBLIC_URL% in development #6280

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 9 commits into from
Closed

%PUBLIC_URL% in development #6280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9b7d2a7
Add example "homepage" (to be removed later)
ericclemmons Jan 26, 2019
115135b
Set publicPath to paths.servedPath for all environments
ericclemmons Jan 26, 2019
500eee7
Add note about bug with webpackDevServer + html plugin
ericclemmons Jan 26, 2019
19b4218
Use publicUrl for all environments
ericclemmons Jan 26, 2019
2dacd86
webpackDevServer uses paths.servedPath
ericclemmons Jan 29, 2019
4091c07
Support custom `pathname` in WebpackDevServerUtils.prepareUrls
ericclemmons Jan 29, 2019
66cb8b7
prepareUrls with paths.servedPath
ericclemmons Jan 29, 2019
3a714cf
Revert package.json#homepage
ericclemmons Jan 29, 2019
c189feb
Remove comments about publicPath
ericclemmons Jan 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/react-dev-utils/WebpackDevServerUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,20 @@ const forkTsCheckerWebpackPlugin = require('./ForkTsCheckerWebpackPlugin');

const isInteractive = process.stdout.isTTY;

function prepareUrls(protocol, host, port) {
function prepareUrls(protocol, host, port, pathname = '/') {
const formatUrl = hostname =>
url.format({
protocol,
hostname,
port,
pathname: '/',
pathname,
});
const prettyPrintUrl = hostname =>
url.format({
protocol,
hostname,
port: chalk.bold(port),
pathname: '/',
pathname,
});

const isUnspecifiedHost = host === '0.0.0.0' || host === '::';
Expand Down
10 changes: 4 additions & 6 deletions packages/react-scripts/config/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,19 +59,17 @@ module.exports = function(webpackEnv) {
// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
// In development, we always serve from the root. This makes config easier.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose the last part of the comment isn't true after this PR? :D

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// In development, we always serve from the root. This makes config easier.

const publicPath = isEnvProduction
? paths.servedPath
: isEnvDevelopment && '/';
const publicPath = paths.servedPath;

// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';

// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = isEnvProduction
? publicPath.slice(0, -1)
: isEnvDevelopment && '';
const publicUrl = publicPath.slice(0, -1);

// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);

Expand Down
2 changes: 1 addition & 1 deletion packages/react-scripts/config/webpackDevServer.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ module.exports = function(proxy, allowedHost) {
hot: true,
// It is important to tell WebpackDevServer to use the same "root" path
// as we specified in the config. In development, we always serve from /.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Last part of the comment here as well

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// as we specified in the config. In development, we always serve from /.
// as we specified in the config.

publicPath: '/',
publicPath: paths.servedPath.slice(0, -1),
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have been messing around with this locally and I have found that
further down in this file needs to be updated as well, something similar to:

    historyApiFallback: {
      // Paths with dots should still use the history fallback.
      // See https://github.com/facebook/create-react-app/issues/387.
      disableDotRule: true,
      index: paths.servedPath,
    },

otherwise when you go to pages other than the home page with react router setup and refresh it will fail to load files.

// WebpackDevServer is noisy by default so we emit custom message instead
// by listening to the compiler events with `compiler.hooks[...].tap` calls above.
quiet: true,
Expand Down
8 changes: 7 additions & 1 deletion packages/react-scripts/scripts/start.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,11 +91,17 @@ checkBrowsers(paths.appPath, isInteractive)
// We have not found a port.
return;
}

const config = configFactory('development');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const appName = require(paths.appPackageJson).name;
const useTypeScript = fs.existsSync(paths.appTsConfig);
const urls = prepareUrls(protocol, HOST, port);
const urls = prepareUrls(
protocol,
HOST,
port,
paths.servedPath.slice(0, -1)
);
const devSocket = {
warnings: warnings =>
devServer.sockWrite(devServer.sockets, 'warnings', warnings),
Expand Down