Building your Angular Application for Spring Boot

How to bundle your Angular application into your next Spring Boot Project

I have been working on a ton of different Angular projects lately and some of them are going to be included in my Angular 4 Java Developers Course

Building Angular for Spring Boot

There might be times when you have one team working on the front end (Angular) and another working on the back end. There are certainly times when it makes sense to separate the tasks for these applications but there are also times when you as a developer wear many hats. Today we are going talk about the scenario where you are working on both the Angular & Spring Boot application side by side. 

Angular & Spring Boot Application

If you haven’t already checked out the tutorial below please check it out. In this tutorial, I walk you through a quick application that uses Angular and Spring Boot in the same project. 

I had someone that watched this video and reached out to me asking how the build process works. So this is a good time to talk through how the build works if you’re working on both applications at once.

Building Angular

If you saw towards the end of the tutorial we were building the Angular application so that it would place all of the files in the /src/main/resources directory. I want to dive into that process a little further and explain how we make that happen. If you look at the package.json file inside of  your Angular application you will see a scripts block that looks something like this. 

This is almost what your scripts section will look like and if we wanted to build the project we could run the following command. 

What we want to do is build upon that (pun intended) and to do so we are going to add a couple more scripts. When a build is called a script called post build will be called automatically. In our post-build script, we are going to reference another script. 

With that in place, we need to create a deploy script and have it do something. What we want to do is copy all of the files from the result of the Angular (ng) build process to our /resources/static directory. To do so we need some functionality to copy those files. We could write that ourselves or we could use a package that already exists on npm called copyfiles

npm copy files

You can install it using the instructions above or in my case I just used “npm install copyfiles –save-dev”. With that in place, we can now write our deploy script. 

This is great and will work the first time but what about subsequent builds? We need to make sure that the resources/static directory is clean for us to run a proper build & deploy. Just as with post build we can run a script prior to another one running. In this case, I am going to run a pre-deploy script that removes that directory and then creates it. We are going to use another two packages from npm called rimraf and mkdirp

Now your scripts should look something like this

When you run a build simply use the following command and this will run build, postbuild, predeploy and deploy in that order. 

This will perform the following steps

  • Runs ng serve to build your angular app which among many things will bundle your assets. 
  • Deletes out the /src/main/resources/static directory 
  • Creates /src/main/resources/static directory 
  • Copy all the files in the dist/ folder (result of ng build) to the /src/main/resources/static directory

All the files need will now be in the /static folder allowing you to run the Spring Boot Application.

When you visit http://localhost:8080 the index.html file of the static folder is served and your Angular application should run as intended. 

Conclusion

I just want to give a huge shoutout to Yakov Fain, the author of Angular 2 Development with TypeScript. I picked up this little tip from him and can’t recommend his book enough. I own that book and LOVE it. 

Question: Are you facing any issues developing Angular & Spring Boot applications? 

Hi, I’m Dan Vega. I am a Software Engineer living just outside of one of my favorite places in the world, Cleveland, Ohio. I am a self-taught programmer who firmly believes that you can accomplish anything in this life if you put your mind to it, roll up your sleeves and are willing to put in the work.

I have been writing software for over 18+ years now and I use my knowledge, passion, and influence to help other developers achieve their goals. I teach online and currently, have over 30,000 students.

When I am not writing software, I have a number of things that really keep me busy. I love to read books, listen to podcasts and watch online courses. I have a real thirst for knowledge and it consumes me every single day of the week. I also love to run & lift heavy weights which keep me balanced throughout the week.

Please note: I reserve the right to delete comments that are offensive or off-topic.