Deploying Angular application inside Spring Boot

Imagine scenario: you just developed frontend application written in Angular and powered by Spring Boot Rest API as backend. When deploying most of the time you'll deploy each application as its own container (frontend on Firebase, backend on Heroku, etc.). But did you know you can deploy both apps as a single JAR or WAR file?

When and why?

Deploying Angular/Spring Boot (or actually any Java project in general) in one file is a great way of deployment when your backend and frontend are developed together (and will be in foreseeable future) or maybe when you, your team or your company are not big fans of microservice approach (or just wanting to produce monolith project).

That kind of monolith approach simplifies (manual) deployment of the app, but it does have one big cons: whenever you update either backend or frontend you'll have to create new JAR/WAR file, so this approach may not be best for CI/CD powered projects.

How?

Disclaimer: some parts of this tutorial may not be best practices used in production or best practice for building apps used by thousands or millions of users. But it is how our team handles application deployment for production applications used every day by hundreds of users.

0. useHash strategy for Angular routing

This is simplest way of "fixing" refreshing and direct access to Angular app via URL. You could also rewrite all routes to index.html file (by changing your server's configuration).

Find your routing file (app-routing.module.ts) and add/replace those lines of code:

@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule],
})
export class AppRoutingModule {}

From now on all your Angular URLs has /#/ between domain (with or without port) and subpaths.
For example: localhost:4200/login/ is now localhost:4200/#/login/.

1. Build Angular frontend

Firstly check your index.html file in Angular project. In it find this line (if you cannot find it, add it between and):

<base href="/">

Secondly, build your angular project using AngularCLI:

ng build --prod

If your app is going to be run on subpath (for example domain.com/my-app/) then add --base-href=/my-app/ to build command.

2. Copy Angular dist folder to backend

After successfully building Angular check /dist folder, inside you should find subfolder named like your app, inside it you'll find some html, js and css files.

Copy those files into your backend /src/main/resources/public/ (if some of the folders are missing add them).

3. Build and run backend project

Clean build your backend using

mvn clean package

After building run it using:

java -jar ./target/.jar

However, this will not work if your project's configuration is set to building WAR if this is the case, you need to deploy application to one of Java application servers (like Tomcat, Wildfly or Glasfish). This is out of scope for this article.

After running Spring Boot app you should see logs from WelcomePageHandlerMapping, they sould be somthing like:

INFO 10732 --- [ main] o.s.b.a.w.s.WelcomePageHandlerMapping : Adding welcome page: class path resource [public/index.html]

We are done :)

4. Accessing frontend

When your project is up and runnning you can access your frontend on domain.com/#/.

Comments

[Manish sahu]

Really Nice and simple solution

[Venkata Satya Rai Teja Davuloori]

Good but i seen somewhere if we build backend frontend also will build as a part of backend i am searching for it