Chapter 21. OptaWeb Vehicle Routing development guide

Procedure

1. On Fedora, enter the following command to set up the development environment:

   sudo dnf install npm

   Copy to Clipboard Toggle word wrap

   See Downloading and installing Node.js and npm for more information about installing npm.

2. Change directory to rhbop-8.33.0-kogito-and-optaplanner-quickstarts/optaweb-8.33.0.Final-redhat-00004/optaweb-vehicle-routing/optaweb-vehicle-routing-frontend.

3. Install npm dependencies:

   npm install

   Copy to Clipboard Toggle word wrap

   Unlike Maven, the npm package manager installs dependencies in node_modules under the project directory and does that only when you execute npm install. Whenever the dependencies listed in package.json change, for example when you pull changes to the master branch, you must execute npm install before you run the development server.

4. Enter the following command to run the development server:

   npm start

   Copy to Clipboard Toggle word wrap

5. If it does not open automatically, open http://localhost:3000/ in a web browser.

   By default, the npm start command attempts to open this URL in your default browser.

   Note

   If you do not want the npm start command to open a new browser tab each time you run it, export the BROWSER=none environment variable. You can use .env.local file to make this preference permanent. To do that, enter the following command:

   echo BROWSER=none >> .env.local

   Copy to Clipboard Toggle word wrap

   The browser refreshes the page whenever you make changes in the front-end source code. The development server process running in the terminal picks up the changes as well and prints compilation and lint errors to the console.

6. Enter the following command to run tests:

   npm test

   Copy to Clipboard Toggle word wrap

7. Change the value of the REACT_APP_BACKEND_URL environment variable to specify the location of the back-end project to be used by npm when you execute npm start or npm run build, for example:

   REACT_APP_BACKEND_URL=http://10.0.0.123:8081

   Copy to Clipboard Toggle word wrap
   Note

   Environment variables are hard coded inside the JavaScript bundle during the npm build process, so you must specify the back-end location before you build and deploy the front end.

   To learn more about the React environment variables, see Adding Custom Environment Variables.

8. To build the front end, enter one of the following commands:

   ./mvnw install

   Copy to Clipboard Toggle word wrap

   mvn install

   Copy to Clipboard Toggle word wrap