Outstanding tutorial!!! Took me to the promised land on the first try! So grateful for your sharing here... There are very few tutorials on Maven + React. A million thanks!
Fantastic, I seen multiple other post but didnt worked out for me., but this worked and its so detailed. Thanks for the video, it helped a lot... Appreciating the efforts taken
You absolute legend! I've been trying to do this for 3 days and this is the first video/article that's actually worked for me without any weird annoying errors. Thank you!
Thankyou! This is a great help for learning how to hook up the front and back end and quite similar to how to join together a java/sencha/extjs app build.
Fantastic video! Thanks for sharing this "recipe" for a simple and straightforward way to incorporate a frontend framework into a Spring Boot backend. Really good stuff! I would be curious to learn more about how the actual development workflow is accomplished. I imagine you would do all the frontend work via the npm started server (port 3000) and it would communicate with the java backend via a url to tomcat (port 8080)? But in production, when it's all bundled together it's all on the same server? Taking this example a little further to show an integrated example (and the development practices/workflow to get there) would be awesome. Anyway, really great content. You've earned a new subscriber!
I will look into your suggestions soon. I had almost the same idea but havent had time for it yet. My guess is that within a couple of weeks I will make a video about the frontend backend workflow incl setting up a proxy
@@MikesTechCorner I'm interested in the same thing. Did you make a video about this? I searched your videos by "react" and "spring" keywords but couldn't find one that explains this. I suspect that during development you run React and Spring separately (on separate servers), just as @Brice Roncace said. And then when going into production you just go back into your React files and change all the URLs to use "localhost:8080" instead of "localhost:3000". Finally, in the hosts that you've purchased you can run just 1 server, the Spring server, which also contains all front-end code. Is this correct? Or is there a better way?
I like the way you teach people. However, there is one important thing missing - it is SSR in React when it is deployed like the static resource from Spring Boot. It is super important for SEO. It would be nice to see how it can be done.
I think the first execution tag doesn't require any arguments that's why the error is its not allowed in there. Unlike ofcourse npm command which expects an argument. Cheers
Hi, thanks for the amazing tutorial! Quick question - how do you create a maven clean build (14:15 -) using Eclipse? You may say use your IDE lol but I have to use Eclipse.
Everything is possible but you should not do that. Actually you should not place client and backend in same war. Place in different docker images so you can scale them seperately in you kubernetes cluster. :)
Great video, very informative! Running into some issues however; I follow the steps and the "classes" folder does not exist for me. I even tried cloning your github, and it doesn't seem to have it either. Really stuck here. Thanks in advance.
I just cloned the project into a new folder. Opened the project pom.xml file with intelliJ. Ran mvn clean install from a terminal. A target folder was created as expected with the mavenreactjsspringboot-0.0.1-SNAPSHOT.jar file was created. I ran the .jar-file with "java -jar ...." and the Spring application started as expected. When I go to localhost:8080 I see the reactJS splash screen.
Can u please provide video where if we have spring security using jwt token , then following same steps breaks up when we do refresh in browser as it cannot load react routes on spring Boot port shows 401 error only when we do refresh on browser , normally it works , can u provide solutions of that also ,
@@MikesTechCorner Actually I have one spring boot application that has two endpoints . 1st endpoint is a simple Java MQ app. Other endpoint is opening the react page.Now I need to create one more react application for other project and would like to run on the same server to keep the code at one place. I am not sure if I can do that or if it is possible to have more than one pom.xml .
hey ! when I add the url 8080/index.html it gives me 404 even though I can see the static files in the target/classes file and I added the proxy in my ReactApp so what's wrong?
Hi! Not sure if you will see this comment, but still. First of all, I admire your guides. Great tutorials which helped me a lot. Thanks for your job! I have a small issue: If I have navbar with routing in my app which has page for url /home ( which is lounched exact the same from your tutorial: run mvn spring-boot:run ) and I click e.g. /home -> it will call request to spring server, but I want not to call api to server, but open page builded with react js which is on url /home. Can you please advice possible way to do this? Big thank you!
Is there any way so it opens front end automatically, actually I want to make exe of these combine jar and i want to open my front end itself when I run my exe , is there any way?
You don't want an .exe file. You want a jar file you can wrap in a docker image and then act as api. Best practice is also to have a seperate frontend in it's own docker image. Then you can scale them seperately :)
By using browserRouter, I did multiple routing. And, it is working but if I reload the page (CNTRL + R) then, i am getting White label error. I tried Hashrouter to avoid this but it is not correct way. Do you have any other solutions of this? Please explain that
No it should not be nessesary. Try to add a html file under ressource / static. Then you can see where it ends up in the target folder. Try to look at the code on my github. Let me know if it helped
How can you use it with Controller? And also you already install node and npm through create-react-app. Why do you need to install it again via pom? I know nothing about those front-end so I probably ask stupid questions. Sorry for that and Thank you for making this video.
Theres no such thing as stupid questions. Node and npm are installed again because the other developers or the build server (Jenkins) might not have Node installed. Or maybe they have another version than the required version we expect to be installed.
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?
@@MikesTechCorner Ok so if I understand correctly tailwind is packaged inside the react app and there is no more config necessary in spring boot, only in the react app itself?
@@mikelautensack7351 exactly. And I would actually recommend you not to bundle the reactjs app and spring boot. This locks scaling of the frontend and backend to be the same.
@@MikesTechCorner I don't understand isn't that what your teaching in this video? Can you link me the appropriate material to study so I can understand what your talking about because I don't know about "scaling" and generally how to package the front end and back end.
when i try create app i get this error Response timeout while trying to fetch registry.npmjs.org/@typescript-eslint%2fparser i google it but all solution didn't run
Try to set the mainClassName: bootJar { mainClassName = 'com.codeinvestigator.MyApplicationClass' } or springBoot{ mainClassName = 'com.codeinvestigator.MyApplicationClass' } in your build.gradle file
You can also run the .jar file with the main class as argument: java -cp myApp.jar -Dloader.main=com.codeinvestigator.MyApplicationClass org.springframework.boot.loader.PropertiesLauncher
@@MikesTechCorner So basically you set the proxy in package.json and then call the spring boot backend requests directly via its routing. And you do not miss all the benefitrs of react developement like auto refresh etc. When you are happy with fornt you pack it with build
Outstanding tutorial!!! Took me to the promised land on the first try! So grateful for your sharing here... There are very few tutorials on Maven + React. A million thanks!
Glad it helped!
Fantastic, I seen multiple other post but didnt worked out for me., but this worked and its so detailed. Thanks for the video, it helped a lot... Appreciating the efforts taken
Glad it helped! Thank you for watching. :)
You absolute legend! I've been trying to do this for 3 days and this is the first video/article that's actually worked for me without any weird annoying errors. Thank you!
Thanks for watching. :-)
Thank you for the time and effort. I was moving from Yarn to NPM and was having some issues this helped me figure them out
Glad I could help! Thank you for watching. :-)
Thank You Mile. Very Useful. Always post these kind of videos
Thanks, will do!
Amazing tutorial. Thank you so much for simplifying this for me.
Glad it was helpful! :)
Thank you for the video! That is exectly what I was looking for. Best video about spring + react I have seen so far
Glad you enjoyed it! I would recommend you to split up the applications in 2 different docker images = more flexible scaling.
thanks mike , this was what i was searching for.
Glad I could help. :-)
Thankyou! This is a great help for learning how to hook up the front and back end and quite similar to how to join together a java/sencha/extjs app build.
Yes. Thank you for commenting. :)
Excellent. Just what I needed. Thank you.
Glad it helped!
Sir. this is a Fantastic video! THANK YOU SO MUCH
Glad it was helpful!
Hey Mike, thanks for your detailed video class.
My pleasure!
Your videos helps a lot.Thanks .
Thank you
Thanks for the video, this was what i was searching for
Glad I could help
in install-node-and-npm need to remove the arguments and add node version and npm version but it is very good tutorial and very helpful.Thank you Mike
Thanks for the tip!
Fantastic video! Thanks for sharing this "recipe" for a simple and straightforward way to incorporate a frontend framework into a Spring Boot backend. Really good stuff!
I would be curious to learn more about how the actual development workflow is accomplished. I imagine you would do all the frontend work via the npm started server (port 3000) and it would communicate with the java backend via a url to tomcat (port 8080)? But in production, when it's all bundled together it's all on the same server? Taking this example a little further to show an integrated example (and the development practices/workflow to get there) would be awesome.
Anyway, really great content. You've earned a new subscriber!
Thanks Brice. :-)
I will look into your suggestions soon. I had almost the same idea but havent had time for it yet. My guess is that within a couple of weeks I will make a video about the frontend backend workflow incl setting up a proxy
@@MikesTechCorner I'm interested in the same thing. Did you make a video about this? I searched your videos by "react" and "spring" keywords but couldn't find one that explains this.
I suspect that during development you run React and Spring separately (on separate servers), just as @Brice Roncace said. And then when going into production you just go back into your React files and change all the URLs to use "localhost:8080" instead of "localhost:3000". Finally, in the hosts that you've purchased you can run just 1 server, the Spring server, which also contains all front-end code. Is this correct? Or is there a better way?
I like the way you teach people. However, there is one important thing missing - it is SSR in React when it is deployed like the static resource from Spring Boot. It is super important for SEO. It would be nice to see how it can be done.
Good point!... I haven't actually looked into that before
Try to ask in the discord community. Link is in the newer videos
I think the first execution tag doesn't require any arguments that's why the error is its not allowed in there. Unlike ofcourse npm command which expects an argument. Cheers
Thank you for the correction
Thank you Mike for this video. It solved my problem. If possible can you make a video for the deployment of this project using docker?
I have some with multistage docker build and also some with heroku and buildpack
Thank you. Very informative and helpful.
Glad it was helpful!
THank you for the video, interesting topic!
Thank you
Very nice video. Thanks for uploading...
You are welcome :)
Thank you so much.... please keep up the good work
Thank you, I will
Hi, thanks for the amazing tutorial! Quick question - how do you create a maven clean build (14:15 -) using Eclipse? You may say use your IDE lol but I have to use Eclipse.
Use IntelliJ! :-) Just kidding. Go to a terminal and write mvn clean install
@@MikesTechCorner Lol thanks Mike! When I tried that though I didn't get the "classes" under target - is there anything else I need to do?
Great video ! Is it possible to generate multiple war files for springboot + react js application with different context path ?
Everything is possible but you should not do that. Actually you should not place client and backend in same war. Place in different docker images so you can scale them seperately in you kubernetes cluster. :)
THanks it is realy nice content.if i want customize the login page can i use react router dom ?
Yes of course
Great video, very informative! Running into some issues however; I follow the steps and the "classes" folder does not exist for me. I even tried cloning your github, and it doesn't seem to have it either. Really stuck here. Thanks in advance.
I just cloned the project into a new folder. Opened the project pom.xml file with intelliJ. Ran mvn clean install from a terminal. A target folder was created as expected with the mavenreactjsspringboot-0.0.1-SNAPSHOT.jar file was created. I ran the .jar-file with "java -jar ...." and the Spring application started as expected. When I go to localhost:8080 I see the reactJS splash screen.
Thanks a bunch for this greate tutorial. Love it 100%
You are welcome
thank you! Your video so halped me =)
You are welcome. Thank you for viewing my video. :)
thank you for this video , a question why we put the react app in spring /src ? can we use both projects separatly but in the same folder?
It is not exactly the same folder... We can place the ReactJS app in any folder.
@@MikesTechCorner thank you
Very good Mike !
However you displayed the field "proxy" in package.json but you didn't mentionned it until the video
Yeah sorry. The code is on github. :)
@@MikesTechCorner Yes i checked it.
Thank u
The only weird with this trick is that we get a "static" folder in the "static" folder... ^^
fuuuuck maaan yeeeessss !! Thank youu so much)))00
Thank you :)
Hi sr, great job! Is there a book where i can learn more about these things? Thanks
Theres a lot, but for this specific problem just clone the repository. Thank you for watching
Thanks in advance 😀, I am looking for creating the jar file for my react project.
I am not using sprinboot.
Please help me how I can build jar file ?
If you are not using Java then you just build the project with npm build?
But then you are not getting a .jar file
@@MikesTechCorner but our requirement is to get the jar file. To deploy on Linux.
Or can I usne sprinboot just for getting the jar file?
How would you add in BrowserRouter when react is nested inside a spring boot app? I haven't been able to get my hands on a working example of that.
Added to backlog
verbose stack TypeError: Cannot read properties of undefined (reading 'stdin')
I'm getting this errror
any solution ?
Check out my project
Thank you so much, bro!
Thank you for watching
Can u please provide video where if we have spring security using jwt token , then following same steps breaks up when we do refresh in browser as it cannot load react routes on spring Boot port shows 401 error only when we do refresh on browser , normally it works , can u provide solutions of that also ,
Added to backlog
@@MikesTechCorner thank u
This works fine if I have one react application . How can i package and setup more than one react application ?
I actually think you should run them as seperate applications. Then you can scale each differently
@@MikesTechCorner Actually I have one spring boot application that has two endpoints . 1st endpoint is a simple Java MQ app. Other endpoint is opening the react page.Now I need to create one more react application for other project and would like to run on the same server to keep the code at one place. I am not sure if I can do that or if it is possible to have more than one pom.xml .
hey ! when I add the url 8080/index.html it gives me 404 even though I can see the static files in the target/classes file and I added the proxy in my ReactApp so what's wrong?
Try to clone my project and compare the build scripts
Thanks for the video. It is very helpful. One question, will it run properly if I deployed this war file on tomcat?
Dont make wars, make jars! :). But the answer should be yes.
@@MikesTechCorner ok, but why not war?
@@shivamvishwakarma2596 no need for the extra complexity in a microservice setup :)
Thank you 👍
You are welcome :)
Thank you!!
Thank you for watching. Let me know if you have ideas for topics to cover. :)
Hi!
Not sure if you will see this comment, but still.
First of all, I admire your guides. Great tutorials which helped me a lot. Thanks for your job!
I have a small issue:
If I have navbar with routing in my app which has page for url /home ( which is lounched exact the same from your tutorial: run mvn spring-boot:run ) and I click e.g. /home -> it will call request to spring server, but I want not to call api to server, but open page builded with react js which is on url /home. Can you please advice possible way to do this? Big thank you!
You can forward a request from /home to another url in Spring if you want?
Is there any way so it opens front end automatically, actually I want to make exe of these combine jar and i want to open my front end itself when I run my exe , is there any way?
You don't want an .exe file. You want a jar file you can wrap in a docker image and then act as api. Best practice is also to have a seperate frontend in it's own docker image. Then you can scale them seperately :)
Thanks from India
Thanks for watching. :)
its work with spring security? and can u make video for war file?
Never! Don't make wars
By using browserRouter, I did multiple routing. And, it is working but if I reload the page (CNTRL + R) then, i am getting White label error. I tried Hashrouter to avoid this but it is not correct way. Do you have any other solutions of this? Please explain that
I got the ans.
@RequestMapping(value = "/{path:[^\\.]+}")
public String index() {
return "forward:/";
}
Pass all the routes in index.html
Nice.
Which IDE is used in this? I havent seen the complete tutorial just asking
IntelliJ
should i create the folder classes/static ?? he show me just marvin-archiver , marven-status, generated-sources !! so it doesn't work with me
No it should not be nessesary. Try to add a html file under ressource / static. Then you can see where it ends up in the target folder. Try to look at the code on my github. Let me know if it helped
How can you use it with Controller? And also you already install node and npm through create-react-app. Why do you need to install it again via pom? I know nothing about those front-end so I probably ask stupid questions. Sorry for that and Thank you for making this video.
Theres no such thing as stupid questions. Node and npm are installed again because the other developers or the build server (Jenkins) might not have Node installed. Or maybe they have another version than the required version we expect to be installed.
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?
Of course. You just install the npm module needed with npm install blabla.
@@MikesTechCorner Ok so if I understand correctly tailwind is packaged inside the react app and there is no more config necessary in spring boot, only in the react app itself?
@@mikelautensack7351 exactly. And I would actually recommend you not to bundle the reactjs app and spring boot. This locks scaling of the frontend and backend to be the same.
@@MikesTechCorner I don't understand isn't that what your teaching in this video? Can you link me the appropriate material to study so I can understand what your talking about because I don't know about "scaling" and generally how to package the front end and back end.
when i try create app i get this error
Response timeout while trying to fetch registry.npmjs.org/@typescript-eslint%2fparser
i google it but all solution didn't run
It looks like network issue. Are you behind company firewall?
Hi, I have built my jar. When i try to run the jar file from command prompt in windows, it says 'no main manifest attribute, in ..'. any thoughts?
Try to set the mainClassName:
bootJar {
mainClassName = 'com.codeinvestigator.MyApplicationClass'
}
or
springBoot{
mainClassName = 'com.codeinvestigator.MyApplicationClass'
}
in your build.gradle file
You can also run the .jar file with the main class as argument:
java -cp myApp.jar -Dloader.main=com.codeinvestigator.MyApplicationClass org.springframework.boot.loader.PropertiesLauncher
@@MikesTechCorner when I changed my maven dependency, it worked. Thanks.
@@sukumarrect Great thx for sharing the solution. ::)
i am not getting classes folder in target folder except that everything i have done
Try to clone the repository I am using in the video. The link is in the description.
Check for differences.
Make sure the project has been built.
why do we need "com.github.eirslett", it gives me an error
Hi Bruno. Have you tried to check out the project from github and then run the "gradlew build"-command?
Can you send me the error?
thank, sir
U r welcome
can you tell me how to that project in eclipse
Hmmm yes. Added to backlog.
you forgot to add proxy in package.json?
Yes you are right.
@@MikesTechCorner So basically you set the proxy in package.json and then call the spring boot backend requests directly via its routing. And you do not miss all the benefitrs of react developement like auto refresh etc. When you are happy with fornt you pack it with build
how to run in eclipse
Step 1 uninstall Eclipse.
Step 2 install IntelliJ Ultimate
Step 3 Become a more productive developer!
:-)
www.jetbrains.com/idea/download/#section=linux
Haha 😂 epic reply
Thank you very much for detailed explanation :)
You are welcome!
Thanks a bunch for this greate tutorial. Love it 100%
Thank you so much for commenting. It means a lot.