Base href URL : How to add a prefix to all URLs ?

samfrach commented 8 years ago

Hello,

I would like to serve my application not from the server root but from /myapp/

I've added a in the index.html file but javascript files are still generated in the server root...

where do I configure that ?

Furthermore, where can I configure the socket that refreshes the page ? I'd like to change the IP and port (I want to configure a nginx server on a machine that proxies to node on a virtual machine ... yes for dev as well)

thank you

mstrzoda commented 8 years ago

i have the same question, any ideas?

ollwenjones commented 8 years ago

I would like to serve my application not from the server root but from /myapp/ I don't have time to test changing this, but I believe this is what the <base href="/"> in the index.html is for. You'll likely have to update some other configuration to match.

Furthermore, where can I configure the socket that refreshes the page ? The webpack-dev-server configuration is in the wepback config in a couple of places:

  /**
   * Output. Add chunk hashes for production.
   * Reference: http://webpack.github.io/docs/configuration.html#output
   */
  config.output = isTest ? {} : {
    path: root('target/dist'),
    publicPath: isProd ? '/' : 'http://localhost:8080/',
    filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js',
    // source maps for production?
    // sourceMapFilename: isProd ? '[name].map' : '[name].[hash].map',
    chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js'
  };

  /**
   * Dev server configuration
   * Reference: http://webpack.github.io/docs/configuration.html#devserver
   * Reference: http://webpack.github.io/docs/webpack-dev-server.html
   */
  config.devServer = {
    contentBase: './src/public',
    historyApiFallback: true,
    stats: 'minimal', // none (or false), errors-only, minimal, normal (or true) and verbose
    host: process.env.host || 'localhost',
    port: process.env.port || 8080,
    proxy: getProxy()
  };

There's pretty extensive reference linking in that file. You should check it out. (Don't treat it as a black box!)

herb-stein commented 7 years ago

I have the same issue. Deploying my project directly to a tomcat webapps directory works fine. But I need to host several webapps each in its own subdirectory. Appending the path path: root('my-app/dist'), dosn't work for me. Any suggestions?

mcescalante commented 7 years ago

I changed the base URL in 2 places to get it to work successfully for me:

Line 62 in webpack.config.js. Change the publicPath '/' to your base:

config.output = isTest ? {} : {
path: root('dist'),
publicPath: isProd ? '/' : 'http://localhost:8080/', //<-- change the '/' in this line to '/yourapp'
filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js',
chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js'
};

In src/public/index.html on line 8 change the <base href> tag:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular 2 App | ng2-webpack</title>
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">

<base href="/"> <!-- change this "/" to "/yourapp" -->
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>

Restart webpack and this change should reflect in both your npm start and npm build commands

babelouest commented 7 years ago

I have the same problem, @mcescalante 's solution works fine except for public folder, all the css and js files return an error 404. For example, a css file url is http://localhost:8080/yourapp/css/bootstrap.css, but it's still accessible to http://localhost:8080/css/bootstrap.css

ollwenjones commented 7 years ago

@babelouest We recently ran into this, and I had forgotten all about it. I'm pretty sure what's missing is some to setting in the CopyWebpackPlugin - since that is what is putting those static assets in the right place.

ollwenjones commented 7 years ago

My mistake, it looks like CopyWebpackPlugin is only used in production, which means it isn't the problem in development.

mcescalante commented 7 years ago

@babelouest good catch, I missed that for some reason. Just tried this out and I think it fixes what you reported there:

On line 62 change both the / and the http://localhost:8080/ and add the new base URL onto both of them. That adjusted the static file location for me so that it was/yourapp/css/test.css and not /css/test.css.

Example:

  .output = isTest ? {} : {
    path: root('dist'),
    publicPath: isProd ? '/yourapp' : 'http://localhost:8080/yourapp', // <-- add new base to end of localhost:8080 as well
    filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js',
    chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js'
  };

Let me know if this is the desired behavior and I'll update my answer above as well.

babelouest commented 7 years ago

Thanks @mcescalante , but it's the config I had and it's still not working to access public folder files.

In fact, since I may access the dev instance from other devices, my publicPath is just:

publicPath: '/',

and if I change it with

publicPath: '/yourapp',

and update the base href tag in the index.html file, I have the error 404 with the public files as described below.

mcescalante commented 7 years ago

@babelouest that's bizarre, can you put your changed webpack.config.js and index.html into a gist so I can take a look to help?

babelouest commented 7 years ago

Better than a gist, here is the source of my app.

webpack.config.js: https://github.com/babelouest/hutch/blob/master/webapp/webpack.config.js index.html: https://github.com/babelouest/hutch/blob/master/webapp/src/public/index.html

herb-stein commented 7 years ago

@babelouest, prefix the pathes in your index.html with slashes: href="/css ...".

babelouest commented 7 years ago

@herb-stone , it still doesn't solve the case, unfortunately.

sadidkhan commented 5 years ago

@babelouest how did you solve it?

babelouest commented 5 years ago

@sadidkhan , I didn't solve it, the generated web site is still on an absolute path.

herb-stein commented 5 years ago

@sadidkhan use the angular cli compiler option --baseHref=baseHref to set the base url for the application being built.

see: https://angular.io/cli/build

preboot / angular-webpack

Base href URL : How to add a prefix to all URLs ? #222