Startup a Maven project with Spring Boot and Angular project and setup with intellij
In this article, you will learn how to create a project with Spring Boot and Angular This is for the beginners. Here we are going to use Java, Maven, Angular as frontEnd and SpringBoot as Backend. Before starting project, you should have some prerequisite to follow.
Requirement
- Apache Maven (https://maven.apache.org/download.cgi)
- Java JDK (https://www.oracle.com/java/technologies/javase-downloads.html)
- Node (https://nodejs.org/en/download/)
- IntelliJ IDEA (https://www.jetbrains.com/idea/)
Here i have used Apache Maven(3.6.3) , Node (12.16.1), Java JDK 11 .
you can learn, how to setup node and angular through https://medium.com/@luxsye/setup-nodejs-and-angular-d74eaaff49f
First we will learn about angular and how to start it, We all know that Angular is a platform or framework of creating efficient and sophisticated single-page apps. Here you can create a new project by commands. Navigate to your folder path through the command prompt and run the command“ng new fileName”
You can see that Your folder will fill with this,
Now, your startup angular project is ready. now you can serve your project by “ng serve” command
you can navigate to http://localhost:4200/ and start work on front end application. You can create angular artifacts such as components, Services, Directives, Pipes, Module (We will learn about this briefly in upcoming article). you can simply create it by “ ng generate artifactsName myProject” . Here artifactsName willbe replaced by your needed arifact. myProject is the name of artifact. For example
Now your front end is ready, We will move to spring boot now. Spring boot is a open source java based framework. There are few ways to initialize spring boot project. Such as spring initializr , Command Line tool, Maven with IDE. Here we will learn to initialize with spring initializr.
Direct to https://start.spring.io/ , there you can select Project, Language, Springboot version and project details, Java version and needed dependencies then generate the project. My selection as follows,
Now you can see your project inside the download folder. you can replace that file into your folder. Then will open spring boot project in InteliJ. Open InteliJ
Open your project which you download earlier by pom file.(Open as project)
Now your spring Boot project is ready. Here you need to setup maven and java path. to setup maven,
File → Settings → Build, Execution, Deployment → Build Tools → Maven
there, you can select maven home directory and apply. then you have to setup java.
File → Project Structure , there you can select the java and apply.
Now you can run the project and navigate to http://localhost:8080/.
Angular and Spring Boot project is ready to start your project now. Now you can configure database in application.properties (We will learn about this briefly in upcoming article)
Conclusion
In this article, we learnt how to integrate a new angular and spring Boot project. Hope you guys understand. In future I’ll share what i learn throughout my experience. That’s all folks! Thanks for your attention! If you have any feedback or question feel free to share your thoughts.
