Packaging a React.JS Application into a Java Spring Boot Application
HTML-код
- Опубликовано: 27 июл 2024
- Looking to learn how to package a React.js frontend application within your Spring Boot server? You're in the right place! In this tutorial, we'll show you step-by-step how to develop and bundle a JavaScript frontend single page application (SPA) built with React, all while embedding the finished result within a Spring Boot project.
Whether you're a seasoned developer or just getting started, this tutorial is perfect for anyone looking to expand their skills in web application development. By the end of this video, you'll have a deep understanding of how to package a React.js frontend application within your Spring Boot server, giving you the tools you need to take your projects to the next level.
So if you're ready to learn something new and exciting, join us for this tutorial and discover how to package a React.js frontend application within your Spring Boot server today!
👉👉Grab the source (on github): t.ly/rvjhF
🔗 Grab My Other Available Product(s):
- Build Your First Web Service API Using Java Spring Boot wazoowebbytes.gumroad.com/l/x...
👋🏻Connect with me:
Twitter: / eyuzwa
🔗Resources & Links mentioned in this video:
Spring Initializr: start.spring.io/
Visual Studio Code: code.visualstudio.com/
=-= Concepts =-=
- Maven
- Spring Boot
- React
=-= Chapters =-=
00:00 Intro
02:25 Start.spring.io project setup
04:00 Opening project in Visual Studio Code
05:27 npx create-react-app frontend
07:18 npm start
08:55 Open pom.xml
21:22 Setup ClientForwardController
25:02 Update application properties
30:35 Packaging the JAR
33:00 Adding Proxy Key to package json
#SpringBoot
#ReactJs
#Java 
Наука
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!
What can I say? Well researched, clear and to the point. 👍
thanks so much! Glad 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
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!
Great video, thank you. The background music is cool too, what is it? I like to play it in the background while coding.
Thanks 4 share. Excellent content.
#Subscribed
thank you so much! really appreciate it
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!
instructive, thnx.
thanks! Glad 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!
good tutorial sir
thanks! Appreciate that
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!
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?
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!
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!
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 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!
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!
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?
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.
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!
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.
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
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/'
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
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.