Software development using Angular 5 with Spring Boot

Hi everyone. My last the bigger post is about configuration Spring Boot and Angular 5. After that instruction we have integrated both technology on one app. If you created it you know that development is very hard in this case. We must waiting for build a client and it isn't effective. We can use webpack-dev-server to speed up this process, so this post is just about it.

Angular and webpack-dev-server

I think I have to explain webpack and webpack-dev-server. The first tools let pack our angular app to one or more files. This files is bundles. It is for improve speed of our app. Why? Because one page application need all files on start by assumption. The better way is load it using only one connection and one file, because establishing connection taking time. This is a few information about webpack, but what is webpack-dev-server?

This is the tool. It serve our that files which webpack compiled, but it working on memory, so we have quick result on our browser. This is a amazing tools for development angular app.

How do it?

The first step is create file like that:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

What it is? This is configuration for proxy. We need it because we have problem with CORS(Cross-Origin Resource Sharing). When we using proxy, server(backend) thinking that we use the same domain and port, so we use it like the same app.

What configuration say for angular app? This configuration we can read like all request started by "/api" redirect to http://localhost:8080. We have flag secure too. For development we can set it to false, because it say app "don't care about certificate and another secure checks". I think it is a good idea for speed up development. I think if you need something more information about it (such as a more difficult proxy) you can search in google "webpack-dev proxy".

;

Next step is serve our files using this proxy, so we will modify one line on package.json. On the script tag we add to start information about proxy.

{
  [...]
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  [...]
}

This is all what we need to working. Now we are running the spring boot application. After that we use command "ng start" on console (or IDE). Now we have two instances of servers. One is spring boot app(default 8080 port) and angular (default 4200 port). Client server change page always when we change something on client code. This is automatically, so our job is only develop.

Summary

I hope that my knowledge about it improve your work with that technologies. Such as you see this is easy to adopt, we don't need anything change on backend and client. We only configure how serve out files on in-memory server. If you have any problems with it or information you will put a comment under that post.