Unable To Run VueJS SPA With Spring Boot
I have VueJS single page appication which I want to move to the Spring Boot project and run it in the production environment. With npm run build
I genereted these files:
Hash: 0e5605ab6a3adbae5bc3
Version: webpack 3.10.0
Time: 34203ms
Asset Size Chunks Chunk Names
static/js/app.a8c2e3befee9add63a47.js 67.9 kB 1 [emitted] app
static/img/bg3.7e9308f.jpg 191 kB [emitted]
static/img/glyphicons-halflings-regular.8988968.svg 109 kB [emitted]
static/fonts/glyphicons-halflings-regular.448c34a.woff2 18 kB [emitted]
static/fonts/glyphicons-halflings-regular.f4769f9.eot 20.1 kB [emitted]
static/fonts/glyphicons-halflings-regular.e18bbf6.ttf 45.4 kB [emitted]
static/fonts/element-icons.6f0a763.ttf 11 kB [emitted]
static/js/vendor.b870d414939280bd7c3a.js 1.1 MB 0 [emitted] [big] vendor
static/fonts/glyphicons-halflings-regular.fa27723.woff 23.4 kB [emitted]
static/js/manifest.58a976c7eeb4e639b033.js 1.49 kB 2 [emitted] manifest
static/css/app.8dfb1913ee552ff55ff81ea142c3f782.css 443 kB 1 [emitted] [big] app
static/css/app.8dfb1913ee552ff55ff81ea142c3f782.css.map 623 kB [emitted]
static/js/vendor.b870d414939280bd7c3a.js.map 3.99 MB 0 [emitted] vendor
static/js/app.a8c2e3befee9add63a47.js.map 267 kB 1 [emitted] app
static/js/manifest.58a976c7eeb4e639b033.js.map 7.8 kB 2 [emitted] manifest
index.html 704 bytes [emitted]
Build complete.
And I copied them to /resources/static
folder. When I run Spring Boot project I'm able to open index.html
file, but all of the related resources like js, css and img files returns 404 Not Found Exception
. I can't even load them with direct link in the browser.
This is very strange, because when I copy and paste, for example, static/css/app.8dfb1913ee552ff55ff81ea142c3f782.css
file and change only one digit in the name, I'm able to load it with the browser.
How is that possible?
Answer
Looks like the coping files to the resource folder is very fragile in Spring Boot. With those exactly steps I was able to run my project:
- Stop application (the embeded Tomcat)
- Delete all files in
/resources/static
folder - Copy new html/css/js/img files
- Clean and Build the project
- Run the application
Related Questions
- → Maximum call stack exceeded when instantiating class inside of a module
- → Browserify api: how to pass advanced option to script
- → Node.js Passing object from server.js to external modules?
- → gulp-rename makes copies, but does not replace
- → requiring RX.js in node.js
- → Remove an ObjectId from an array of objectId
- → Can not connect to Redis
- → React: How to publish page on server using React-starter-kit
- → Express - better pattern for passing data between middleware functions
- → Can't get plotly + node.js to stream data coming through POST requests
- → IsGenerator implementation
- → Async/Await not waiting
- → (Socket.io on nodejs) Updating div with mysql data stops without showing error