Deploying Angular application inside Spring Boot
Tags: angular, java, deployment, webdev
Published: 2021-03-16 19:15:58

**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:
```ts
@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 ``):

```html

<base href="/">

```
Secondly, build your angular project using AngularCLI:

```bash

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
```maven
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:
```java
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/#/`.