Hi slightly_smiling_fac…

2 minute read

Hi :slightly_smiling_face:

in a React app, how to change the base-href resources get loaded from? I tried --base-href to no avail. Does it work for Angular only?


I think it is --baseHref

nope, still /

(of course I also tried to load the app in my browser)

There are 2 properties related to URL deployUrl and baseHref baseHref is only used to set https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base deployUrl is to indicate from where to load your resources <script src="${deployUrl}..." ...

In development mode they don’t have any effects


I need them (also?) in dev mode


your app will be served from root


well, I do :slightly_smiling_face: I’m not the one who’s prepared the dev environment with the complex docker thing :smile:

I have another project with a custom webpack config (also not prepared by me) that’s working in dev with the custom baseHref etc

in dev mode you can open using any URL, because it will still fallback to index.html

that’s for index.html, but I need it for resources

like runtime.js, main.js etc

I understand your requirement. Create React App also lacked this feature, and I implemented it, but don’t know if nx supports this

woah, even editing it in index.html will not work. It gets overwritten.

When I’ll have time I’ll take a look how dev-server internals in nx work.

yup thanks for the pointers! I will dig deeper into the the config from the other project that’s working and see what I can do

To make this clear. Your dev environment works something like this You have a docker container for example (localhost:1234) And localhost:1234/my-app is proxied to localhost:4200 and localhost:1234/my-another-app is proxied to localhost:4300

and you need this both apps to give them a base context to be served from.

yup, and at this very moment I’m trying to customize the base href via custom webpack config

I introduced a new feature in webpack dev server half a year ago that allows to serve static assets from a specific path https://webpack.js.org/configuration/dev-server/#devservercontentbasepublicpath

I tried publicPath but it gets worse and the index.html doesn’t get loaded. Should I try contentBase?

You can take a look how this is implemented in CRA


see historyApiFallback.index option



checkmate! @nrwl/web installs webpack-dev-server 3.9.0 and I’m not sure I want to deal with npm-shrinkwrap ever again

This seems all kinds of wrong, but it works:

```/* eslint-disable @typescript-eslint/no-var-requires */ const IndexHtmlWebpackPlugin = require(‘@nrwl/web/src/utils/third-party/cli-files/plugins/index-html-webpack-plugin’); const nrwlConfig = require(‘@nrwl/react/plugins/webpack.js’); // require the main @nrwl/react/plugins/webpack configuration function.

module.exports = (config, context) => { nrwlConfig(config); // first call it so that it @nrwl/react plugin adds its configs,

// then override your config.

const indexHtmlWebpackPluginIndex = config.plugins.findIndex( (plugin) => plugin instanceof IndexHtmlWebpackPlugin.IndexHtmlWebpackPlugin, );

if (indexHtmlWebpackPluginIndex !== -1) { config.plugins[indexHtmlWebpackPluginIndex]._options = { …config.plugins[indexHtmlWebpackPluginIndex]._options, baseHref: ‘’, }; }

return config; };```

hmm, nice, you make baseHref an empty string instead of slash

ok, this is nicer: no custom webpack and

"configurations": { "dev": { "deployUrl": "/static/partner/" }, still got problems with assets, working on it