Hi slightly_smiling_fac…
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?
Responses:
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
this
I need them (also?) in dev mode
no
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