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/#/
.
Top comments (2)
Really Nice and simple solution
Good but i seen somewhere if we build backend frontend also will build as a part of backend i am searching for it