Skip to content

Frontend Development

Jan Westphal edited this page Nov 7, 2018 · 2 revisions

The pages describes how to efficiently develop the Chimera frontend.

  • Chimera should be already executable.
  • In addition to the environment you need to have to develop at the Chimera backend you also need to have Node.js installed.
  • The frontend uses React and REST to call the backend.

There are two ways to develop at the frontend.

Either way you should call initially and after node dependencies changes:

  • npm install in the WebContent Folder in the root directory. (This could be managed in the of the war build, but it will take to much time to call it every time, so you should do it manually) This is also the place there the code for the frontend lies.

1. Tomcat (Not Recommended)

  • Call npm install if you have a changed dependenciy.
  • Call mvn clean install or optionally mvn clean install -DskipTests and develop with Tomcat as you are used to.

Since there you want two review changes in the frontend immediately you might want to take the second way of developing.

2. Node (Recommended)

  • Deploy a working war file in Tomcat.
  • In the WebContent folder run REACT_APP_ROUTER_BASE=Chimera npm start.
  • You should now have two running Chimera instances:
    • localhost:8080/Chimera (default port) deployed by Tomcat will receive backend call
    • localhost:3000/Chimera (default port) deployed by Nodejs reflects the frontend changes live
  • Your browser might decline Cross-Origin Resource Sharing (CROS) and localhost:3000 will not be allowed to make requests to localhost:8080. To resolve this run your web browser with reduced security and work with localhost:3000 in this browser.
  • As for Chrome you run the command chrome.exe --disable-web-security --user-data-dir="C:/Chrome dev session"
  • If you are making changes to the backend you need to redeploy the war in Tomcat.