There are two parts that we need to connect between the frontend and the backend. The first part is the build process. Currently, we need to use mvn and npm to build the two parts separately. Once they are connected, we will only need to execute a single command to build the entire application.

The second part is to bridge the communication between the frontend and the backend. As mentioned, during development, the frontend will be served by webpack-dev-server under a different port than the one of the backend. Currently, both ends use the same port, 8080. We will need to change the port of the frontend to 3000 so that we can have both ends up and running at the same time. When our application is served from http://localhost:3000, the requests that the frontend pages send to the backend at http://localhost:8080, by default, will be blocked by the browser because they are cross-origin. The frontend won't be able to access the response of those requests unless we bridge the communication. We can achieve this by changing the backend to add HTTP header, Access-Control-Allow-Origin, in the HTTP response to allow the frontend to access the response. This will work, but is not ideal in our case, because once we package the whole application, there won't be any cross-origin requests. Instead, we will use another way, which is to add an HTTP proxy on the frontend side to pass the requests to the backend. In this way, all requests will be from the same origin as far as the browser can tell.