heh thanks! I appreciate it - yeah I've gotten a lot of comments on music...it seems like the majority find it too distracting. I'll have to figure out a way to experiment :)
Thank you so much! I tried many articles and implemented their code but got no help. This video was a clean coded guidance and covered all the related scenarios while packaging. Thanks for your help mate.!
@@wazoowebbytes Looking forward to seeing such contents. Do you recommend to use eirslett/frontend-maven-plugin in the production like env? I see it has barely 15 usages overall. I assume whether I should go with building a production build(aka dist) and have them xcopy to src/main/ or I should use eirslett plugin.
@@mrcoder9401 sorry I missed this in the shuffle! I've worked on many projects that rely on eirslett, so it's definitely been production worthy for a long time. Not sure how the Maven Repo tracks that usage number, so I wouldn't totally rely on that
@@wazoowebbytes Awesome, thanks for responding. :) Have been keeping an eye on this. I've built a ui was planning to with xcopy, now I can think over eirslett and implment. Thanks Wazoo. love from India :)
The video is super interesting. Thank you so much! I have a question, can I set routers(navigation) and api calls all from react js? Will it work ok or do I have to do that thru springboot?
@@wazoowebbytes followed this tutorial and it worked perfectly fine. but when I tried the same with VITE react frontend it was not compiling. I believe i was missing some maven build configuration settings. can you take some time and do this and share whole or part of the tutorial. Hope I explained my problem well. Thanks in Advance.
Thank you so much! I was looking for proper explanation step-by-step and yours is only one on youtube. I wish you could also show it how react could be integrated in Spring Security, because every time I request /index.html in the browser, it responses ERR_TOO_MANY_REDIRECTS error. Do you have any idea what can be the reason?
Thanks for the feedback! Hmm maybe there's a redirect feedback loop somewhere in your chain. Assuming you have the forwarding controller setup, and a rule for allowing / in the security config...have you tried enabling debug logging? in your app.properties use logging.level.web=DEBUG and see what shows up. I wonder if it's another resource being requested from the html -- like a CSS file which is throwing your server for a loop
Hey hi, Great Wazoo. Great video. I built an application using Next.js as frontend and spring-boot 3 for the backend, during development everything works fine but can't seem to build a JAR for both framework to work as a one application. Do you have any video that can compile Next.js and spring-boot one executable JAR file?
not yet, but that's an interesting idea! I found this doc on the next.js site around "static exports" - nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features - so you SHOULD be able to have Maven run this static export of your site, then copy it into the Spring Boot folders the same as what I'm doing in the video with React. Good luck, and hope that helps!
thanks for the helpful video, but one thing I want to ask. How can I work on the project in my local without building it again each time I make a change, because it takes such a long time. Running on port 3000 doesn't fetch data from my backend, so not useful for me.
there's 2 pieces to this - for the spring backend, if you include the devtools in your pom.xml, then your IDE (like VS Code) should be able to restart on any Java changes. For the frontend, usually you're running dev tooling locally (aka. npm run start or npm run dev, etc) and regardless of the library / framework you're using it should be capable of updating based on code changes. Then you would just need to define a server proxy configuration to map your data requests to your spring boot backend (aka. "/api/foo" will properly resolve to "localhost:8080/api/foo") - hope that helps!
Thanks for leaving a comment! Yeah I sometimes forget that my shell on Windows gives me a few extras that aren't supported in "native" windows. Try just "mvnw package" if you haven't already. I also just realized I never finished posting the source for this one, so I've updated the description. Maybe that might help?
Is the frontend of react now running on the tomcat server of spring-boot or are there two servers running in parallel, one from react and one from spring-boot and spring-boot just forwards the stuff. If it is just forwarded, can you make it so that react is built in spring-boot and you can just use spring-boot?
Hey Raphael, thanks for stopping by! Yes your first theory is correct - the react codebase is packaged up within the pom.xml so that the Tomcat server is delivering both the spring boot and react content. Apologies if I didn't make that clearer in the video!
@@wazoowebbytesAh! Thanks for the quick reply. The video was very good and showed all the important aspects - really helped a lot. One suggestion for improvement: maybe for the upcoming videos you can eliminate the waiting times. I thought it was very good how you explained the individual steps, in the pom, but maybe here you can go through faster (without loss of information). In general, a very good video! Keep it up!
@@raphaeldichler7758 hmm thank you! That's some good feedback. I'm working on an ecommerce type of project to record right now and trying to figure out how to divide and film it effectively. I'll keep your advice in mind. Appreciate it!
@@wazoowebbytes I got it working great setting packaging to WAR using localhost:8080. If I add a server.servlet.context-path to properties and it becomes localhost:8080/application for example, I can't figure out the proper forward in the the ClientForwardController. I seem to get a blank page.
is it possible to also use tailwind css? I'm new to using frontend frameworks. I have only used spring boot with static front end files in the static folder. I would like to start using spring boot, react & tailwind all together. Can anyone help me with this?
Hi Pia - yeah shouldn't have any problem. Heroku is dropping free accounts, so I can't make a video showing it but I'll look at the other options available to get a JAR on the cloud
Do you know what would be causing a MojoFailureException with the message: Could not download npm: Got error code 404 from the server. -> [Help 1] when running "./mvnw package"?
hey! No not at all - there's a local cache created when hitting Maven, and it will just be verifying the package dependencies. If it finds it already, then it skips the step of downloading them fresh.
Hi, I followed this video for packaging reactjs app inside spring boot. My reactjs app have many routes which is used for different components. Eg: localhost:8080 for Login page, localhost:8080/home for Home page ..but spring boot renders only the root path...it is not rendering home page path. ie localhost:8080/home path is not getting rendered. I am getting a white label error page at this path
hmm so I'm assuming you have react router already working? Do you have a forwarding controller in your spring boot server? I usually call mine SPAController and it just forwards every path to the root (/)
@@wazoowebbytes yeah i have two routes 1. Path / which render login page 2. /home which render home page . This works when i run as a stand alone reactjs app. Now when i package this react app inside spring boot static folder it renders only the path / not the path /home
@@wazoowebbytes if i have a controller and forward every thing to / will i get the the home page component(which is at path /home) ? It will render only login page everytime right ?
@@nikhiljose2029 no it will hand everything over to React, and then your React Router routes should take over from there. Hopefully that helps you out!
@@wazoowebbytes Can you explain this part more clearly? I'm having a problem with the war file. After deploying, only the paths in the controller (api) work and return data, but react is also packaged in the war as shown in the video. access the routed paths. " no it will hand everything over to React, and then your React Router routes should take over from there."This is what I want
Hi this has been very helpful. But I encountered an issue with running .\mvnw package. Do you know any fix for this? I already updated the apache-maven on my system but I still receive this error. .\mvnw : The term '.\mvnw' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again
If I try to add .mvn and mvnw.cmd files I receive this error after running .\mvnw package command Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:copy-resources (Copy JavaScript app into SpringBoot) on project lhkCmmAdmn: Input length = 1
I also tried to remove the filtering true at Copy JavaScript app into SpringBoot, but received this new error instead Unable to parse configuration of mojo org.springframework.boot:spring-boot-maven-plugin:2.7.0:repackage for parameter groupId: Cannot find default setter in class org.springframework.boot.maven.Exclude
@@miguelfernando1685 hmm are you in a powershell window? I could run it with "./mvnw package". In a regular windows shell I could use "mvnw package". Maybe try one of those 2 and see if that helps
@@wazoowebbytes by putting .mvn files, the .\mvnw package works. The current issue I'm encountering is that the repackage is failing for me on (31:00 Timeline) ruclips.net/video/_CLLw3QAuOE/видео.html
#help I got this Error in browser developer console Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec. I followed you step by step. can't find out where is the problem
@@wazoowebbytes it gives me the same error even if i run it using mvn or from the sts ide : Loading module from “localhost:8080/assets/index-71ddf12c.js” was blocked because of a disallowed MIME type (“text/html”)
@@wazoowebbytes I also get a 404 om 'GET localhost:8080/assets/index 71ddf12c.js' looking at the url i think the build path is wrong?? -> "localhost:8080/assets/index-71ddf12c"
@@wazoowebbytes yes, I will try it again. And when I use npm start I have some link like ("/hello") that has the view, how I can call that view in spring boot.
yes..? Sorry not sure what you mean here. This video is focused more on the idea of packaging a React codebase into a spring boot monolith...does that help?
works perfectly, in this case you have to configure antMatchers("/","/public/**","/static/**","/favicon.ico").permitAll(); and then create a custom OncePerRequestFilter with this method @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { String path = request.getRequestURI().toLowerCase(); if (!path.equals("/") && !path.startsWith("/api") && !path.startsWith("/static") && !path.startsWith("/manifest.json") && !path.startsWith("/favicon.ico") && !path.startsWith("/robots.txt") && !path.endsWith("xml") && !path.endsWith("json") && !path.endsWith("jpg") && !path.endsWith("jpeg") && !path.endsWith("gif") && !path.endsWith("png")) { request.getRequestDispatcher("/index.html").forward(request, response); return; } filterChain.doFilter(request, response); } probably you've already solved that, but just leaving this comment here in case someone needs
@@diazcastro7331 How? I've spent the last couple of hours trying to get it to work. I'm still getting "Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.1.0:copy-resources Unable to parse configuration of mojo org.apache.maven.plugins:maven-resources-plugin:3.1.0:copy-resources for parameter filtering: Cannot find default setter in class org.apache.maven.model.Resource" Do you by any chance remember how you fixed it?
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
thank you very much. went through so many articles but got no such help. This video is truly gem
thanks - I'm so happy it helped you out!
super helpful and thanks a lot for this!! btw the background music makes me feel like I'm in coding in a cyberpunk hardware store
heh thanks! I appreciate it - yeah I've gotten a lot of comments on music...it seems like the majority find it too distracting. I'll have to figure out a way to experiment :)
@@wazoowebbytes it's not distracting, actually is very enjoyable
appreciate that! thanks a lot!
you're welcome@@wazoowebbytes
What can I say? Well researched, clear and to the point. 👍
thanks so much! Glad it helped you out
Straight to the point and extremely helpful. Would you consider doing a gradle version?
oh sure thing - that's actually a great idea! Thanks for stopping by
Thank you so much! I tried many articles and implemented their code but got no help. This video was a clean coded guidance and covered all the related scenarios while packaging. Thanks for your help mate.!
thank you! Glad it could help!
I'm so very sorry for the delays, but I've updated the description with a project link to Github! Many apologies!
very good! what I needed to package everything with spring boot
awesome - glad it helped you out. Thanks for stopping by!
Great video, thank you. The background music is cool too, what is it? I like to play it in the background while coding.
Best in class. Still relevant, thank you!
thank you so much - really appreciate it
Thanks 4 share. Excellent content.
#Subscribed
thank you so much! really appreciate it
Thank you very much, that was short and pricise
thank you so much - I'm happy to hear it helped!
Thats great explaination, detailed. Pretty useful. Thanks
thank you very very much!
@@wazoowebbytes Looking forward to seeing such contents.
Do you recommend to use eirslett/frontend-maven-plugin in the production like env?
I see it has barely 15 usages overall. I assume whether I should go with building a production build(aka dist) and have them xcopy to src/main/ or I should use eirslett plugin.
@@mrcoder9401 sorry I missed this in the shuffle! I've worked on many projects that rely on eirslett, so it's definitely been production worthy for a long time. Not sure how the Maven Repo tracks that usage number, so I wouldn't totally rely on that
@@wazoowebbytes Awesome, thanks for responding. :) Have been keeping an eye on this.
I've built a ui was planning to with xcopy, now I can think over eirslett and implment. Thanks Wazoo. love from India :)
@@mrcoder9401 excellent! good luck and thanks so much!
The video is super interesting. Thank you so much!
I have a question, can I set routers(navigation) and api calls all from react js? Will it work ok or do I have to do that thru springboot?
absolutely - you can set up everything up to use the React router for handling what you want in the frontend and api calls when needed.
Thank you so much, that was an excellent tutorial, keep it up.
thank you so much - I appreciate it!
@@wazoowebbytes followed this tutorial and it worked perfectly fine. but when I tried the same with VITE react frontend it was not compiling. I believe i was missing some maven build configuration settings. can you take some time and do this and share whole or part of the tutorial.
Hope I explained my problem well.
Thanks in Advance.
not a bad idea - thanks for the feedback!
Thank you so much! I was looking for proper explanation step-by-step and yours is only one on youtube. I wish you could also show it how react could be integrated in Spring Security, because every time I request /index.html in the browser, it responses ERR_TOO_MANY_REDIRECTS error. Do you have any idea what can be the reason?
Thanks for the feedback! Hmm maybe there's a redirect feedback loop somewhere in your chain. Assuming you have the forwarding controller setup, and a rule for allowing / in the security config...have you tried enabling debug logging? in your app.properties use logging.level.web=DEBUG and see what shows up. I wonder if it's another resource being requested from the html -- like a CSS file which is throwing your server for a loop
@@wazoowebbytes Thank you for your reply! You are a saviour. logging.level.web=DEBUG really helped me to detect the source of issue.
@@rahmanrejepov7115 oh awesome! congrats and glad it helped you out
@@rahmanrejepov7115 awesome! great to hear it helped you out!
hey, great video. May I request if you could put some content for making spring boot api call from react app.
thanks for the feedback! Sure thing, I'll add it to my list!
Hey hi, Great Wazoo. Great video.
I built an application using Next.js as frontend and spring-boot 3 for the backend, during development everything works fine but can't seem to build a JAR for both framework to work as a one application.
Do you have any video that can compile Next.js and spring-boot one executable JAR file?
not yet, but that's an interesting idea! I found this doc on the next.js site around "static exports" - nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features - so you SHOULD be able to have Maven run this static export of your site, then copy it into the Spring Boot folders the same as what I'm doing in the video with React. Good luck, and hope that helps!
thanks for the helpful video, but one thing I want to ask. How can I work on the project in my local without building it again each time I make a change, because it takes such a long time. Running on port 3000 doesn't fetch data from my backend, so not useful for me.
there's 2 pieces to this - for the spring backend, if you include the devtools in your pom.xml, then your IDE (like VS Code) should be able to restart on any Java changes. For the frontend, usually you're running dev tooling locally (aka. npm run start or npm run dev, etc) and regardless of the library / framework you're using it should be capable of updating based on code changes. Then you would just need to define a server proxy configuration to map your data requests to your spring boot backend (aka. "/api/foo" will properly resolve to "localhost:8080/api/foo") - hope that helps!
Thank you so much for your video, but I could not run .\mvnw package. What command gave you "create mode 100644 src/test/.... in the video?
Thanks for leaving a comment! Yeah I sometimes forget that my shell on Windows gives me a few extras that aren't supported in "native" windows. Try just "mvnw package" if you haven't already. I also just realized I never finished posting the source for this one, so I've updated the description. Maybe that might help?
Is the frontend of react now running on the tomcat server of spring-boot or are there two servers running in parallel, one from react and one from spring-boot and spring-boot just forwards the stuff. If it is just forwarded, can you make it so that react is built in spring-boot and you can just use spring-boot?
Hey Raphael, thanks for stopping by! Yes your first theory is correct - the react codebase is packaged up within the pom.xml so that the Tomcat server is delivering both the spring boot and react content. Apologies if I didn't make that clearer in the video!
@@wazoowebbytesAh! Thanks for the quick reply. The video was very good and showed all the important aspects - really helped a lot. One suggestion for improvement: maybe for the upcoming videos you can eliminate the waiting times. I thought it was very good how you explained the individual steps, in the pom, but maybe here you can go through faster (without loss of information). In general, a very good video! Keep it up!
@@raphaeldichler7758 hmm thank you! That's some good feedback. I'm working on an ecommerce type of project to record right now and trying to figure out how to divide and film it effectively. I'll keep your advice in mind. Appreciate it!
@@raphaeldichler7758 good feedback!! thanks!
instructive, thnx.
thanks! Glad it helped!
Great tutorial! Will this work the same with a WAR?
Thanks! Yes it should during the build phase as Maven generates the WAR file. Thanks for stopping by!
@@wazoowebbytes Thanks so much! I will give it a try.
cool! good luck and let me know if there's any issue!
@@wazoowebbytes I got it working great setting packaging to WAR using localhost:8080. If I add a server.servlet.context-path to properties and it becomes localhost:8080/application for example, I can't figure out the proper forward in the the ClientForwardController. I seem to get a blank page.
is it possible to also use tailwind css? I'm new to using frontend frameworks. I have only used spring boot with static front end files in the static folder. I would like to start using spring boot, react & tailwind all together. Can anyone help me with this?
Thanks for stopping by! Yes, you can absolutely use Tailwind in the way you're describing! I'll put that suggestion in my queue for videos!
Can the jar file be deployed to heroku? If so, what other steps need to be made to prep the file?
Hi Pia - yeah shouldn't have any problem. Heroku is dropping free accounts, so I can't make a video showing it but I'll look at the other options available to get a JAR on the cloud
Create an AWS Free Tier account. Use the Elastic Beanstalk service. It is just like Heroku because you just deploy the jar.
@@derrick3534 ooo thanks Derrick! I'll give that a go!
@@derrick3534 thank you the information!
Do you know what would be causing a MojoFailureException with the message: Could not download npm: Got error code 404 from the server. -> [Help 1] when running "./mvnw package"?
not sure - there's a few possibilities. Is it still happening? are you just using the node / npm defaults that are in the pom.xml of this project?
are you installing node and npm every time you build and if so, why?
hey! No not at all - there's a local cache created when hitting Maven, and it will just be verifying the package dependencies. If it finds it already, then it skips the step of downloading them fresh.
Can we do this in next js
should be able to export the Next JS app into spring boot - I'm planning a video on it!
i very like spring webflux mernjs
of you
Thanks for the suggestion! Thank you for stopping by
Hi, I followed this video for packaging reactjs app inside spring boot. My reactjs app have many routes which is used for different components. Eg: localhost:8080 for Login page, localhost:8080/home for Home page ..but spring boot renders only the root path...it is not rendering home page path. ie localhost:8080/home path is not getting rendered. I am getting a white label error page at this path
hmm so I'm assuming you have react router already working? Do you have a forwarding controller in your spring boot server? I usually call mine SPAController and it just forwards every path to the root (/)
@@wazoowebbytes yeah i have two routes 1. Path / which render login page 2. /home which render home page . This works when i run as a stand alone reactjs app. Now when i package this react app inside spring boot static folder it renders only the path / not the path /home
@@wazoowebbytes if i have a controller and forward every thing to / will i get the the home page component(which is at path /home) ? It will render only login page everytime right ?
@@nikhiljose2029 no it will hand everything over to React, and then your React Router routes should take over from there. Hopefully that helps you out!
@@wazoowebbytes Can you explain this part more clearly? I'm having a problem with the war file. After deploying, only the paths in the controller (api) work and return data, but react is also packaged in the war as shown in the video. access the routed paths.
" no it will hand everything over to React, and then your React Router routes should take over from there."This is what I want
Hi this has been very helpful. But I encountered an issue with running .\mvnw package. Do you know any fix for this? I already updated the apache-maven on my system but I still receive this error.
.\mvnw : The term '.\mvnw' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again
If I try to add .mvn and mvnw.cmd files I receive this error after running .\mvnw package command
Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:copy-resources (Copy JavaScript app into SpringBoot) on project lhkCmmAdmn: Input length = 1
I also tried to remove the filtering true at Copy JavaScript app into SpringBoot, but received this new error instead
Unable to parse configuration of mojo org.springframework.boot:spring-boot-maven-plugin:2.7.0:repackage for parameter groupId: Cannot find default setter in class org.springframework.boot.maven.Exclude
@@miguelfernando1685 hmm are you in a powershell window? I could run it with "./mvnw package". In a regular windows shell I could use "mvnw package". Maybe try one of those 2 and see if that helps
@@wazoowebbytes by putting .mvn files, the .\mvnw package works. The current issue I'm encountering is that the repackage is failing for me on (31:00 Timeline)
ruclips.net/video/_CLLw3QAuOE/видео.html
good tutorial sir
thanks! Appreciate that
#help I got this Error in browser developer console
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.
I followed you step by step. can't find out where is the problem
I believe you, but I can't seem to reproduce that error. Are you running the server with "mvnw spring-boot:run" ?
@@wazoowebbytes it gives me the same error even if i run it using mvn or from the sts ide :
Loading module from “localhost:8080/assets/index-71ddf12c.js” was blocked because of a disallowed MIME type (“text/html”)
@@wazoowebbytes I also get a 404 om 'GET localhost:8080/assets/index 71ddf12c.js' looking at the url i think the build path is wrong?? -> "localhost:8080/assets/index-71ddf12c"
@@wazoowebbytes because i changed the servlet path. my default path is 'localhost:8080/skills-ocean/'
I do everything like you but I only get "forward:/" what happen??
Sorry - help me to understand what you mean. Am I not clear on some of my instructions?
@@wazoowebbytes when I access to ("/") the only thing I get is String "forward:/, not the view index
waaaat. Totally believe you, I'm just scratching my head. I'll see if I can duplicate it! Thanks for the clarification!
ok I think I've got it - did you use @RestController instead of just @Controller in the ClientForwardController class?
@@wazoowebbytes yes, I will try it again. And when I use npm start I have some link like ("/hello") that has the view, how I can call that view in spring boot.
its work with spring security?
yes..? Sorry not sure what you mean here. This video is focused more on the idea of packaging a React codebase into a spring boot monolith...does that help?
works perfectly, in this case you have to configure antMatchers("/","/public/**","/static/**","/favicon.ico").permitAll();
and then create a custom OncePerRequestFilter with this method
@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response,
FilterChain filterChain) throws ServletException, IOException {
String path = request.getRequestURI().toLowerCase();
if (!path.equals("/") &&
!path.startsWith("/api") &&
!path.startsWith("/static") &&
!path.startsWith("/manifest.json") &&
!path.startsWith("/favicon.ico") &&
!path.startsWith("/robots.txt") &&
!path.endsWith("xml") &&
!path.endsWith("json") &&
!path.endsWith("jpg") &&
!path.endsWith("jpeg") &&
!path.endsWith("gif") &&
!path.endsWith("png")) {
request.getRequestDispatcher("/index.html").forward(request, response);
return;
}
filterChain.doFilter(request, response);
}
probably you've already solved that, but just leaving this comment here in case someone needs
copy-resource wont resolve
did you get it to work?
@@Wellunknownbmx yap all good
@@diazcastro7331 How? I've spent the last couple of hours trying to get it to work. I'm still getting
"Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.1.0:copy-resources Unable to parse configuration of mojo org.apache.maven.plugins:maven-resources-plugin:3.1.0:copy-resources for parameter filtering: Cannot find default setter in class org.apache.maven.model.Resource"
Do you by any chance remember how you fixed it?
@@Wellunknownbmx make sure the react app is in the same folder with spring boot app. Do u understand micro resources .
@@diazcastro7331 i just fixed it, the problem was with the filtering, I’ve removed the true line and it runs fine now
Hello is this poosible if am working wth gradle springboot project?
I'm sure it is....I'll start looking at that
Background music is so irritating
right? so sorry - my humble apologies. I wish there was a way to retain the video but remove it. Thanks for stopping by, I appreciate it