CODEWITHSUNDEEP
jhipster
ccc
ccc

Reputation: 2385

How to set up a base url when using the Vue.js blueprint?

I would like my app to run on /myapp instead of / but I can't seem to make that work.

I would like this to work when running the application as a jar, without running the client separately, and when running it from IntelliJ as a Spring Boot App (again, without running the client separately).

I have generated the application with JHipster and it was working fine on /

Then I did the following:

  1. in application.yml
server.servlet.context-path: /myapp
  1. in webapp/app/router/index.ts
export default new Router({
  mode: 'history',
  base: '/myapp/',
  routes: [
    {

Now, when running the app and calling localhost:8080/myapp I get the error page telling "An error has occured :-(" and I can see that it's trying to call

http://localhost:8080/content/css/loading.css

http://localhost:8080/app/main.bundle.js

http://localhost:8080/app/global.bundle.js

http://localhost:8080/manifest.webapp

which all result in 404s.

What am I missing ?

Thank you.

EDIT

The version html-webpack-plugin version is 3.2.0.

I tried making the change in webpack/webpack.common.js:

    new HtmlWebpackPlugin({
      template: './src/main/webapp/index.html',
      chunks: ['vendors', 'main', 'global'],
      chunksSortMode: 'manual',
      inject: true
    }),
    new BaseHrefWebpackPlugin({ baseHref: '/myapp/' }),

but it didn't work, even after trying 

npm run webpack:build

It only worked after I manually modified the index.html to

<base href="/myapp/" />

The next question is: can this be made dynamic ?

For example, when running the app in a Docker container, that I can pass the path as an environment parameter.

I can do it for Spring, but can it also be done for Vue ?

Thank you.

Upvotes: 1

Views: 6390

Answers (1)

Jon Ruddell
Jon Ruddell

Reputation: 6352

You will need to configure the <base href="/" /> in index.html. You can do this by setting the base config option for the HtmlWebpackPlugin in webpack.common.js or webpack.prod.js (code from sample app). It is set to / by default:

new HtmlWebpackPlugin({
  base: '/',

Change to:

new HtmlWebpackPlugin({
  base: '/myapp/',

This was added to the blueprint in this commit.

If you want to use the context-path in dev with the BrowserSync setup, configure webpack-dev-server with:

  • publicPath: '/myapp/',
  • contentBasePublicPath: '/myapp/',
  • Add .map(path => '/myapp' + path) to the end of devServer.proxy[0].context (the list of paths to proxy like /api). May be a better way to do this part but could not find it.

This is not configurable out-of-the-box for Docker containers through environment variables due to the fact the base href is replaced during the client build process. One possible solution here is to add a step to the entrypoint.sh to replace the base href in /app/resources/static/index.html with the context path (for example if SERVER_SERVLET_CONTEXT_PATH is set).

Note: If you are using jhipster-vuejs with a version of html-webpack-plugin v3.x, then upgrade html-webpack-plugin to v4.3.0, remove <base href="/" /> from index.html, and remove chunkSortMode: 'dependency' like here.

Upvotes: 3

Related Questions