Frontend folder structure
The following chapter contains a deep dive into the folder structure of the frontend application and some important additional information. It provides an overview of the frontend architecture and should help you to locate the files you need.
assets folder serves as root folder for the whole frontend application.
Self-hosted web font files.
Static images (e.g. placeholder image).
JS files and JSX components. See The
assets/scriptsfolder below for more details.
SCSS files for the base styling
application logic and entry files for all pages.
Generic JSX components that are used throughout the whole application
Global constants (e.g. media query breakpoints, fetching state types)
All JSX components and logic concerning one feature of the application. See Feature folders below for more details.
Entry files for different pages and shared initialization files. Although most parts of the application are rendered on the client, the portal engine is not a single page application. The portal engine uses server side routing and only mounts one part of the frontend application on each page through these entry files. All entry files have to be listed in the
webpack.config.js. The subfolder
\assets\scripts\pages\sharedcontains the shared React root component
Shared feature slice helper functions.
Shared utility functions.
Shared global initialization function for all entry files.
Global redux store that contains the whole application state.
assets/scripts/features folder consists of multiple subfolders. Each of these subfolders contains all JSX
components and logic concerning one part (or feature) of the application. Every feature folder usually contains the
JSX components for a specific feature. Some of these components are connected to the store through the redux
connectfunction. The connect function takes the arguments
mapDispatchToPropsand returns a function that takes a JSX component. The result of this call is a connected component. The
mapStateToPropsuses selector functions to read data from the application store and maps the data to the component's props.
mapDispatchToPropsdefines which action creators should be used to create and dispatch actions in response to component events. Some components do not include any JSX and only connect generic components to a feature slice of the global application state (e.g. pagination components).
Action creator functions and action type constants. Action creators are responsible for creating action objects. Action objects describe events that happened in the application. This could be an user interaction, the fulfillment of a fetch request or some other event. An action object contains a required
typeand an optional
payloadto describe the event further. Action type constants are string identifiers that are used as
types for action objects and by reducers.
Api functions handle the communication with the backend.
A reducer function with some initial state for the feature slice. The reducer function is responsible for updating the feature slice state in response to actions. It is called with the previous state slice and the current action object every time an action is dispatched. Reducers must not include any side effects like manipulating external state, making fetch requests or generating random numbers or identifiers.
Selector functions get data from the global application store. A selector function takes the application state and any number of additional arguments and returns pieces of the state or some derived data.
You can find further information about these concepts on the Redux Website.