How to implement Vue.js applications with Spring MVC or other server-sided frameworks? - spring

I've already read the official Vue.js documentation about building app. What I understood is, by using vue-cli, *.vue files are built (or compiled ?) into a javascript file which is injected in index.html file.
What if I don't have any index.html ? In my current application, html documents are built at runtime from jsp template files, how can I have Vue inject js and 'asset' built files into a chosen jsp template ?
Plus, node server should be used in development mod, is this mandatory ?

I would copy the generated javascript file and put it in the public/static folder. Then on the jsps that would use it, just add a script tag that would point to it and the empty div#app.

Related

How to deploy Static Vue application with Spring Boot on a Weblogic Server?

I have a Spring boot application deployed on a Weblogic server, and I want to add a Vue/vite frontend to it. I created a Vue project and then built it into static assets. I then placed the contents of the resulting Dist folder (index.html and assets folder) into src/main/resources/static of the Spring Boot project.
Then I generate the war file using Maven, and host that on Weblogic. The Spring Boot section of the app functions as normal, but when I navigate to weblogicurl/myapp/index.html- it is just a blank page rather than the complete frontend I'm expecting. Upon inspection, the blank index.html does have the standard Vue div element with id of "app", so weblogic is detecting and showing the static frontend. However, it is not able to pull any assets to actually display html or use the js - as it is 404ing when index.html tries to pull those built files.
I'm thinking that maybe it's because index.html is trying to pull the js and css assets from /weblogicurl/assets rather than /weblogicurl/myapp/assets but I'm not entirely sure as I'm unfamiliar with the intended structure of a Spring Boot Web app hosted on Weblogic. If that is the case, how would I resolve it? Though maybe it's some other issue, so any input would be greatly appreciated.
I'm assuming that your index.html has src URLs starting with / and that would cause weblogic to look in its default js assets folder. Alternatively, the src might include assets in the URL.
In any cases, you should update these URLs to be relative and correct after build aka remove the starting / and check path from html to js.
Turns out the problem was indeed that it was pulling assets from /weblogicurl rather than /weblogicurl/myapp.
Adding base: '/myapp/' to my vite.config.ts (or vue.config.js for non vite) resolved it.

Replace JSP with Thymeleaf in Legacy Application

My company wants to level up by deploying our web-application as spring boot executable jar:
Specifications (Legacy Webpap):
classic web app (25 years old) but now with Spring
Over 100 jsp files
And more jsp files generated by our custom jsp generator
Custom jsp tag lib with more than 30 java classes
All jsp files are html 4 files with Active X components.
Problem
One of the main problems is that jsp rendition is not supported in executable jars. Therefore I consider using Thymeleaf. My best guess is to replace the rendition process in our custom jsp generator. In the future (don't know when that is) we plan to migrate to a single page web app but for now I need to run the web app as jar and with our existing templates and tag library.
Draft
My Question
Is it possible to use Thymeleaf along with our custom tag library?

Access View inside WEB-INF using angular.js

I am new to AngularJS. In my project all views html are inside WEB-INF folder, I want to use AngularJS so I have written app.js and controller.js but view is not rendering.
How can I resolve this?
Don't put them in WEB-INF. By design, WEB-INF is inaccessible from the outside. You can put your templates anywhere you want, except WEB-INF.
Or, since you're apparently using Spring, configure it to serve those resources, instead of using the default servlet.

Is it possible to combine JSTL & Sightly components on a page in AEM6?

I have currently only developed on CQ5 and I'm starting with AEM6 was wondering if you can combine JSTL written components with Sightly written components on a page.
We are considering to upgrade, but we don't want to rebuild all components immediately.
You can use components that are written in sightly on the same page as components that are written in jsp. You can have a component that has a sightly file that includes a jsp file, or a jsp file that includes a sightly file. You cannot have a single file that uses both jsp and sightly.

velocity - which artitecture for flexibility?

I'm building web applications using Spring (scaffolded with ROO) and Velocity for the template engine.
Those applications are very similar in their flow, most of the time the logic doesn't change very much, so I can use the same controllers across multiple webapps. What needs customization is the UI side.
I want to build a flexible system that allows :
To work locally while developing
To package templates outside of the webapp
To change some templates without redeploying the webapp.
So far I have built something which uses the WebappResourceLoader and the URLResourceLoader :
resource.loader=url,webapp
webapp.resource.loader.class=org.apache.velocity.tools.view.WebappResourceLoader
webapp.resource.loader.path=/WEB-INF/views/
webapp.resource.loader.cache=true
webapp.resource.loader.modificationCheckInterval=1
url.resource.loader.class=org.apache.velocity.runtime.resource.loader.URLResourceLoader
url.resource.loader.root=http://localhost/templates/
url.resource.loader.cache=false
So basically, the "default" templates are located inside the webapp, and can be overridden by templates located somewhere accessible by URL (right now in a simple folder in Apache).
In the end, the templates for each "skin" should be packaged in a separate WAR.
Now I don't know how to be able to work locally with this architecture...
Most of the time, I'll be working on customizing the templates code, so I suppose I could have a WAR project with only templates, and use Maven's WAR Overlay to bring them to life.
But in this case, the templates are inside the WAR, and this is not what I want...
Any ideas ?

Resources