Combining Angular project with Spring boot using Gradle

hi this is Navy and in this session we will see how to combine a angular project and a springboard project into one project now as you can see photo service is a spring boat app that we will create and fudo UI is an angular app that people create and they will have a root project which will combine these two projects and we'll have Gradle as a build which will build the entire application the final objective will be whenever you say I should EP localhost:8080 it should be displaying the the food or UI's homepage okay so so these are the things that we need to do in order to accomplish this so first thing we will create a simple spring good application and then we will create an angular application and then we have to do certain changes in the angular apps crater we will first make it make sure that the Gradle is enabled for this angular app and then we'll install this node Gradle plugin and then we end they will add this output of this this sash food or UI into the static folder of the service project and at the same time we will also have to make some changes to the service app we will be will have to say that this UI project is a dependency to the service project and in the root app we have to make some changes which people - finally we will build the application using Gradle clean build of the root project and then we will run the application to check if everything is working fine okay now as you can see this is a project this is a folder that we created you can see that there is nothing inside this folder so we will use IntelliJ for building the projects so you can see there's nothing inside this project so first I will create the service project so you can actually create the simple service project using the spring initializer site or you can use the feature that is inside this IntelliJ to build it so I'll use a spring initializer feature inside in tha both will be the same thing okay now what I do is I have to create a service project so I just call this SCS dot IO and then I call this as photo service now I'll ensure that this is a Gradle project and that's it so this is a simple as I mentioned simple service so I just say that it is a spring web and that's it I'll click finish okay it takes some time to refresh this project ok so this project is created now so you can actually build this project to service so say ready to clean both Oh capability successful now the next step so we are done with this step we are done with this step now the next step is to create an angular app so for creating the annular a just have to say ng new and followed by the project name so you just have to say ng new photo - you I don't you say yes see this should take some time to install the packages okay so the app is created now what you say is ng serve - - oh okay so you have to say to get into the project first [Music] okay you can see that we are hitting the spot four four two four two zero zero we are directly accessing the angularjs application but the objective of this session is to go wireless springboard app okay so you turn with this step as well now we just have to make little changes into this angular app okay so first of all I'll start the server okay so now this is not a Gradle project so first you have to say cradle in it on this angular app is a basic and should be based on groovy okay now we can see that it created Clayton Trapper and it had upgrated been dark later now first thing what you have to do is you have to install some plugins in order to power to this so I just say plugins and ID first of all I have to make it as Java and I have to say no versions so the node version says can just copy paste this thing and then you have to say this charge depends on NPM run build and when you have to say test photo UI so you're actually copying the entire folder of this photo UI from disk into the static folder of the service layer and that's it so you're done with the the angular related Gradle dependencies so I already include otq only pin and I mentioned this and I also added this thing now what you need to do is I need to I need to mention that this UI project that we created is actually a dependency on the cradle for the so visa so what you have to do is go to the service projects cradle and in here you have to say implementation and you have to save project so I'm also done with this step now you have to make some changes in the road application okay so as you know we created we start with the fresh project so this is photo app is not a cradle project so I have to say greater in it of this root app now say one and it's groovy and it said okay now what you have to do is you have to go to the settings file and then you have to include this entry so you have to say include photo reference service you have to get the name of all the projects photo - why I'm done with this setting changes and then in the grilled or cradle pie you have to include this change now I'm done with this change this all you need to do is build and run the application so I'll just say greater pain build okay it says that photo you I cannot be found in the project photo service so let's go to photo service build and you can see that I mentioned the dependency but here I made a typo so though it is called food or - UI and not photo : UI so that's one change and you can also see that I made a typo here it should be node - cradle dot no so I made these two changes now I want to scatter clean build okay so it's spelled successfully I can say that the build generated this disk folder and you can see that the final output will be it also created the final jars in this leg directory so we have built the application as well as so we have built the application now all that we need to do is run the application so we know that the jar is currently in this directory service so all you need to do is I just have to say JA - JA photo - service slash bin slash user slash oh we are already in this directory so we just have to say build so much lives slash that's it now the springboard app comes up okay so the app is up and all you need to say is localhost colon 8080 that way I'm eating a springboard server now you can see you got oh you got the Android app running in this big box over okay that's all for this session and keep exploring and see you in the next session thank you

Channel: xplore-cloud

Views: 1,526

Keywords:

Id: -P3FlYj_yHs

Length: 12min 36sec (756 seconds)

Published: Sun May 17 2020