Step 3: Application-specific set-up
Install frontend dependencies
There are several libraries that we are going to use soon in the frontend application.
To install them, run the following command in the console (inside the frontend
folder)
or in the Visual Studio Code
terminal:
npm install react-bootstrap bootstrap three @types/three @react-three/fiber @react-three/drei axios react-google-charts react-split
Update the CSS
Let’s add the CSS styles that we are going to use.
Open the index.css
file and replace its contents with the following code:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html, body {
height: 100%; /* parent height */
margin: 0; /* remove page margin */
}
h1 {
font-size: 2rem;
padding: 20px;
}
h2 {
font-size: 1.5rem;
padding: 20px;
}
/* TABLES */
td {
padding: 10px;
}
th {
font-weight: bold;
padding: 10px;
}
table {
width: 100%;
user-select: none;
}
thead {
background-color: #ebebeb;
position: sticky;
top: 0;
}
/* BUTTONS */
.large-button {
min-height: 2rem;
min-width: 6rem;
margin: 5px;
font-size: 0.8rem;
border-radius: 0.3rem;
border: none;
}
.deep-blue {
background-color: #0065ad;
color: white;
}
.deep-blue:disabled {
background-color: #b6b6b6;
color: white;
}
.yellow {
background-color: #ffa500;
color: black;
}
.yellow:disabled {
background-color: #b6b6b6;
color: white;
}
/* PANELS */
.animation-panel {
height: 350px;
}
.App {
font-family: sans-serif;
text-align: center;
}
.error-message{
position: absolute;
top: 3px;
left: 20px;
z-index: 1;
}
.gutter {
background-color: #eee;
background-repeat: no-repeat;
background-position: 50%;
}
.gutter.gutter-vertical {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
cursor: row-resize;
}
#root {
margin: 0px;
padding: 5px;
display: grid;
grid-template-columns: minmax(300px, 1fr) minmax(500px, 3fr);
grid-template-rows: min-content min-content auto;
grid-template-areas:
"scenarios mainpanel"
"simulationcontrols mainpanel"
"statistics mainpanel";
row-gap: 2px;
height: 100%;
}
.box-scenarios {
grid-area: scenarios;
border-bottom: 1px dashed rgb(206, 206, 206);
padding: 3px;
}
.box-simulationcontrols {
grid-area: simulationcontrols;
border-bottom: 1px dashed rgb(206, 206, 206);
padding: 3px;
}
.box-statistics {
grid-area: statistics;
padding: 3px;
}
.box-mainpanel {
grid-area: mainpanel;
padding: 3px;
border-left: 1px dashed rgb(206, 206, 206);
}
Add a new import statement to the index.js
file:
import "bootstrap/dist/css/bootstrap.min.css";
Now the frontend application has all the necessary dependencies and settings.
Set the backend API address
In the 'frontend' folder, create a new .env
file:
REACT_APP_API_URL=http://localhost:8080
This file contains the variables with environment-specific values that will be available to our frontend application. You’ll only need to change their values here, and the rest of the frontend code should use these values instead of any hard-coded ones.
utils.js
file
Create a new src/utils.js
file and put this code into it:
export const formatDateTime = (t) => {
if (t) {
return t.replace("T", " ");
}
return "";
};
export const numberWithSpaces = (number) => {
let parts = number.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, " ");
return parts.join(".");
};
This file contains the code of utility methods shared by application components.