JHipster 8.1.0: Custom image won't display in production; logo/images don't display with custom context path

[logicglobe]

Overview of the issue

I have developed an application. Everything works GREAT in development, but I'm experiencing problems in production.

Ultimately, I need to deploy the application with a custom context path of .../myapp/. In other words, once deployed in production, the application would be reached with the following URL: http://xxx.xxx.xxx.xxx:8080/myapp/

The application displays a custom image on the landing/home page which I have stored alongside the application navbar logo at the following location: \src\main\webapp\content\images\myapp.jpg

Under JHipster 7.9.3 and earlier, the method to deploy was simple:

1. Modify: ./src/main/webapp/index.html --> Change <base href="/" /> line to <base href="/myapp/" />
2. In a terminal, build the executable: ./gradlew -Pprod clean bootJar
3. Copy/paste executable jar from ./build/libs/myapp-0.0.1.jar to the server
4. On the server:
   • Rename the jar to: myapp.jar
   • Execute: java -jar myapp.jar --server.servlet.context-path=/myapp
5. Open a browser, and navigate to: http://xxx.xxx.xxx.xxx:8080/myapp/

Current Environment

• JHipster 8.1.0
• OS: openSUSE 15.5
• Java: 21.0.1+12
• DB: MariaDB 11.2.2
• Gradle 8.5
• Node 18.19.0
• Browser: Firefox 121 and Chrome 120.0.6099.200

In JHipster 8.1.0, I am having problems. The basic application functionality appears to works (pages render with data fetched from the database), BUT images and logos are not showing on screen.

Under the following scenarios, I get the following results:

Scenario 0

Make NO changes, build (./gradlew -Pprod clean bootJar) and execute with: java -jar myapp.jar
Nav bar logo shows, but custom image doesn't show. Console error shows:
GET http://xxx.xxx.xxx.xxx:8080/myapp.7815297769ec24a8.jpg [HTTP/1.1 401 Unauthorized 23ms]

I can view the image directly in the browser if I type in the following URL:
http://xxx.xxx.xxx.xxx:8080/content/myapp.7815297769ec24a8.jpg

Likewise, I can view the logo directly in the browser with:
http://xxx.xxx.xxx.xxx:8080/content/images/logo-jhipster.png

Scenario 1

Follow the steps outlined above for JHipster 7.9.3, change index.html <base /> tag, build and execute with: java -jar myapp.jar --server.servlet.context-path=/myapp/
Nav bar logo AND custom images do not show. Console errors are:

GET http://xxx.xxx.xxx.xxx:8080/content/images/logo-jhipster.png [HTTP/1.1 404 Not Found 5ms]
GET http://xxx.xxx.xxx.xxx:8080/content/images/logo-jhipster.png [HTTP/1.1 404 Not Found 5ms]
GET http://xxx.xxx.xxx.xxx:8080/myapp/myapp.7815297769ec24a8.jpg [HTTP/1.1 401 Unauthorized 23ms]

NB: I can fetch the logo and image directly in the browser with the following URL:
http://xxx.xxx.xxx.xxx:8080/myapp/content/images/logo-jhipster.png
http://xxx.xxx.xxx.xxx:8080/myapp/content/myapp.7815297769ec24a8.jpg

Scenario 2

Change index.html <base /> tag as above, modify angular.json projects -> myapp -> architect -> build -> options -> baseHref : '/myapp/', then execute with: java -jar myapp.jar --server.servlet.context-path=/myapp/

Exactly the same outcome as scenario 1

Scenario 3

Change index.html <base /> tag as above, modify angular.json (as above), modify webpack.custom.js -> config.plugins.push( new webpack.DefinePlugin({ ... base: '/myapp/'}), then execute with: java -jar myapp.jar --server.servlet.context-path=/myapp/

Exactly the same outcome as scenario 1

---

At this point, I'm thrashing, and need to ask for help. (Any suggestions and pointers will be welcomed with gratitude.)

Motivation for or Use Case

Need to render logos and images in production, preferably with custom context path.

Reproduce the error

See above.

Related issues

Suggest a Fix

No idea.

JHipster Version(s)

JHipster 8.1.0

JHipster configuration

.yo-rc.json

{
  "generator-jhipster": {
    "applicationIndex": 0,
    "applicationType": "monolith",
    "authenticationType": "jwt",
    "baseName": "myapp",
    "buildTool": "gradle",
    "cacheProvider": "ehcache",
    "clientFramework": "angular",
    "clientPackageManager": "npm",
    "clientTheme": "minty",
    "clientThemeVariant": "primary",
    "databaseType": "sql",
    "devDatabaseType": "mariadb",
    "devServerPort": 4200,
    "enableHibernateCache": true,
    "enableTranslation": true,
    "entities": [],
    "jhiPrefix": "myapp",
    "jhipsterVersion": "8.1.0",
    "jwtSecretKey": "<-- it's a secret -->",
    "languages": ["en", "es"],
    "lastLiquibaseTimestamp": 1703800394000,
    "nativeLanguage": "en",
    "packageFolder": "com/myapp/app",
    "packageName": "com.myapp.app",
    "prodDatabaseType": "mariadb",
    "testFrameworks": ["cypress"],
    "withAdminUi": true
  }
}
  

Entity configuration(s) entityName.json files generated in the .jhipster directory

Browsers and Operating System

• Checking this box is mandatory (this is just to show you read everything)

[mshima]

Documentation about context-path is available at https://www.jhipster.tech/production/#custom-context-path.
You can use a local blueprint to help #22542 (comment)

But this feature is not officially supported and there is no plan to officially support it.
So I will close this issue.

[mshima]

Please open a discussion for follow-ups and improvements.

[logicglobe]

@mshima -- a couple of things:

1. THANKS! for your response AND that blueprint. I need to take some time to study it, but it looks pretty good.
2. (Perhaps I didn't make this clear, but) Without ANY custom context path, the image in the home page doesn't show in the browser in production (scenario 0 in my OP). Any thoughts?
3. It was so easy to add a custom context path in 7.9.3, that I was surprised when it didn't work in 8.1.0. It's a shame the team have decided NOT to support such a feature, even though I am sure all it really needs is clear and unambiguous documentation on how to manually make the change. I'd be happy to contribute, but first I must solve my production deployment technical issue.

--cheers--

[mshima]

@logicglobe frontend frameworks now requires context-path at build time. Since there is no common config for frontend and backend, they need to be configured separately.
Resources are related to the context-path so they fail to load without the changes.

[logicglobe]

@mshima Couple of things have come to light:

• I got the home page image to show when I changed it from a JPG to a PNG. Are JPG's no longer supported in JHipster 8.1.0? Is there some reason for this? Is there a setting to modify to enable use of JPGs, or does JHipster now insist on using PNG images in production? [NB: The JPG image DOES show up in development, but NOT in production.]
• I tried that blueprint. It attempts to alter a file (app.module.ts) that does not exist in JHipster 8.1.0. I dug into the blueprint code, and attempted manually to make similar modifications to app.config.ts, but without luck. (I may have to abandon a custom path for now, but am still VERY interested in getting it working in the future.)
• I have also noticed that PrimeNG (17.3.0) icons (primeicons 6.0.1) no longer show up (even without path changes). Any ideas why?
  The PrimeNG components function, but the built in icons don't show up. Browser console shows this error:

downloadable font: download failed (font-family: "primeicons" style:normal weight:400 stretch:100 src index:3): status=2147746065 source: http://xxx.xxx.xxx.xxx:8080/primeicons.0112589c5695a9ed.ttf
downloadable font: no supported format found (font-family: "primeicons" style:normal weight:400 stretch:100 src index:5) source: (end of source list)

[NB: The primeicons DO show up in development, but NOT in production.]

It feels like the new JHipster is overly restrictive. Is this by design? All these things worked without issue in JHipster 7.9.3...

(PS: I'm not sure why you closed this issue so quickly. The issue is more than about custom path. It's about images that don't display in production. These are real problems. By closing the issue, you restrict visibility, so no one else will contribute to the solution. Someone else may have encountered these issues, and resolved them...)

[mshima]

It feels like the new JHipster is overly restrictive. Is this by design? All these things worked without issue in JHipster 7.9.3...

(PS: I'm not sure why you closed this issue so quickly. The issue is more than about custom path. It's about images that don't display in production. These are real problems. By closing the issue, you restrict visibility, so no one else will contribute to the solution. Someone else may have encountered these issues, and resolved them...)

The issue description is all about custom path, if you have an issue without custom path you should open a new issue.
Custom path is currently too complex to maintain given the requests.
If we don’t have integration tests the feature is likely to break.

This issue is closed because is a recurring issue and we don’t officially support this feature, context path should be posted in discussions instead.

You can open a new issue to officially support context path again, we already discussed a couple of years ago.

[logicglobe]

@mshima Thanks again. I already well understand that custom context path will not be supported. Indeed, I will likely abandon my attempt at a custom context path for now,

I shall take your advice, and open a new issue. Somehow, this thread became all about context path, and missed the key problem of images not rendering in production. I should have been more clear in defining the issue.

-- cheers --