How to deploy Angular 7 front with Spring Boot backend

Question

I've a problem with connecting Angular-app with Spring Boot REST backend. Is there any easy way to make it running on one localhost port together?

Answer 1

If you run the application with the default settings (Angular CLI: ng serve), the front-end will start on port 4200.

The back-end application will be launched on the port set in the application.yml (or application.properties) file.

Check at what port you run the back-end application:

server:
  port: ${PORT:10101}

Next, create a proxy.config.json file (for example, with the package.json file), which reads as follows:

{
  "/api/*": {
    "target": "http://localhost:10101",
    "secure": false,
    "logLevel": "debug"
  }
}

Then add the package.json file to the script that enables the front-end application entry:

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json",
...

and launching the front-end from the terminal:

npm start

An example of an @Injectable requesting a back-end:

@Injectable()
export class MyService {

  constructor(private http: HttpClient) {
  }

  searchClients(words: string): Observable<ClientDTO[]> {
    return this.http.get<ClientDTO[]>('api/client/search?searchWords=' + encodeURIComponent(words));
  }

}

And back-end @RestController:

@RestController
@RequestMapping(path = "api/client")
public class ClientController {

    private final ClientService clientService;

    @Autowired
    public ClientController(ClientService clientService) {
        this.clientService = clientService;
    }

    @GetMapping(path = "search")
    public ResponseEntity<List<ClientDTO>> searchClient(@RequestParam String searchWords) {
        return ResponseEntity.ok(clientService.searchClient(searchWords));
    }

}