Debugging a SPA with a Spring Server-Side

The Setting

Front End

Single Page Application (SPA) in one of the major frameworks:

Server Side

Spring Java

The Problem

Front-end debugging of the JavaScript (TypeScript) and CSS (Sass) requires lots of iterations. The tools at hand are Chrome developer tools. The build tool is Angular CLI or webpack or similar.

Spring has automatic reload on update, and a built-in Tomcat, but any update will take time to build, and a refresh of the browser.

The Constraint

The front end has to fetch data from the front-end and to update data at the backend.

The Solution

A two-pronged approach:

  1. Fetch the SPA code from the build tool (live server of the build tool)
  2. Fetch/update data from/to server-side

Configure the two pronged approach by configuration the API URL in the SPA according to the environment.