Webpack with .JSP index file

Question

So heres the issue, current I am working on a project where the frontend is tightly coupled to the backend. The legacy version of the application is built using .JSP files, the index file is an index.JSP file.

My current task is to write a development environment for our new frontend in Vue and use the webpack dev server to serve our new stuff and also to inject the bundles into the index.jsp file. That's where i'm getting stuck, I don't know any way of injecting the webpack dev server or HtmlWebpackPlugin script tags into the JSP file.

Any help would be appreciated as I'm really at a wall with this.

Lambrecht

Answer 1

I am afraid bundling (or processing) a server side component like JSP with webpack is not a good idea. More over, I dont think the webpack and loaders/plugins does support server side component. Good thing is that its not required and there is a middle ground.

That said, the options to use JSPs along with webpack assuming webpack is in-place to bundle all/part of your CLIENT side code (JS, CSS, SCSS etc...)

Option 1: Make webpack bundling part of maven/ant/gradle build

• Webpack bundles out the code into bundle.js
• Update your JSP page to include this bundle.js via script tag
• Modify your build (maven/ant/gradle/ etc) to include webpack bundling in one of the java code build phases
• Deploy your code in the app/web server

Coming to limitation, this is somewhat restrictive in the sense that every time there is a change in one of the CLIENT side code, one has to run full java build (maven/ant/gradle etc). This is obviously time consuming.

Option 2: Use deployed app folder in app/web server installed location for bundles

• Have webpack output bundle files inside the application/web server (may need to run webpack with sudo access depending on the app/web server env). One can use --output-path to do that with webpack.
• Run webpack in watch mode (can choose dev/production mode per your convenience, speed etc)

One can continue working with CLIENT code as usual. No need to use traditional maven/ant/gradle build and deploy. So, this option is better compared to Option1.

This is what we have been using for development and is proved to be good

Option 3: Have apache in the front to serve both webpack dev server bundles and JSPs from app/web server

Using webpack dev server wont be possible as long as JSP is in the picture. Reason : while webpack dev server will bundle the client side code, the JSP is served by your app/web server. Now, that app/web server has only the static files deployed as part of your ear/war. It does not know anything about the webpack dev server keeping track of the client side code and auto bundling whenever there is change.

That said, what you can try is to have apache web server in the front that in turn will talk to both app server and webpack dev server. That way you can avoid building source code when the change is only in client side code. I haven't tried that though with Option2 sufficing our needs.

Hope that helps.

Update : Added second option that works nicer.

Pothole

That's a really nice breakdown has helped me clear up some of my thought processes with this problem, I for one would love to remove JSP from the picture all together and simply have our applications speak via REST endpoints but alas I do not think this will be possible. I might give option 1 a good and see what happens with it this week. – Lambrecht

@EvanBurbidge, I was thinking of doing something similar so I wouldn't have to manually add script tags of bundles produced from webpack. I'm curious, how did this turn out for you? Also, if it worked, can you please share your webpack.config file? Thanks in advance :) – Swordcraft

Answer 2

I was able to solve the webpack devServer problem with JSPs & Webpack 4. I use Intellij with Tomcat for dev. The idea is while in development the js bundles are served by the webpack dev server on port 3000 (tomcat is on 8080). I used a JSP var for the base path to the bundles to easily switch between dev & prod.

Here is the webpack.dev.js section for the devServer:

 devServer: {
        contentBase: './webroot/dist',
        watchContentBase: true,
        port: 3000,
        publicPath: 'http://localhost:3000/bigtech/dist'
    }

My actual dev path (after jsp resolution) for the bundles is like this: http://localhost:3000/bigtech/dist/index-bundle.js

In jsp, it's like this:

<script src="<%=baseJSBundleDir%>/dist/index-bundle.js" ></script>

We set baseJSBundleDir through a java function that checks if dev mode or not (set in a properties file).

After running the webpack devServer, when I save a change in any js file, my browser immediately auto-reloads with the updated new bundle code, nice!

Lakin

Answer 3

In my case JPS is a container for JS app so it's complicated to use dev server.

Try "watch": "webpack --watch"

You will have to refresh the page manually but as a workaround works fine

Wendelina