Local Development

Preparation

Several dependencies are required for frontend development, such as Node.js. The following dependencies are needed:

• Node.js
• Yarn
• Docker (required to create the backend client)
• fnm (optional)

fnm is optional but recommended to ensure the same Node.js version is used. fnm is a Node.js version manager. The frontend repository contains a .node-version file, which fnm can interpret. To ensure the correct Node.js version is used, run the following command in the same directory as the mentioned file:

fnm use

Once all the necessary tools are installed, the project can be initialized. The repository consists of a workspace that contains multiple workspaces. For example, backend-client includes the client for the backend API, and frontend contains the frontend code. More details can be found in Yarn workspaces chapter.

First, install the dependencies for the application using yarn:

yarn install

Generate Backend Client

There are two ways to generate the API client: Either from a locally running backend or from the published developer backend instance.

Generate Backend Client using local instance

yarn generate:local # Fetches api-docs.json from http://localhost:3000
yarn rebuild

Generate Backend Client using published instance

yarn generate # Fetches api-docs.json from https://app.dev.green-ecolution.de
yarn rebuild

Explanation

More details about the script can be found in the Backend Client Documentation.

Starting the Vite Server

Now that all dependencies and the backend client are available, the development environment can be started using Vite. By default, Vite is accessible at http://localhost:5173. The exact address is displayed in the console when starting the server. To start, run the following command:

yarn dev

Connecting to the Backend

The frontend requires a connection to the backend to fetch data. There are different ways to connect to various backends by adjusting the API path. Within Vite, the proxy forwards requests to different servers. The path can be set using the environment variable VITE_BACKEND_BASEURL. If no value is set, option 1 is used by default.

1. Connection via /api-local Points to the locally running backend at http://localhost:3000/api (default)
2. Connection via /api-dev Points to https://app.dev.green-ecolution.de/api
3. Connection via /api-stage Points tohttps://app.stage.green-ecolution.de/api

Starting Vite in a Specific Mode

To start Vite in a mode that connects to a specific backend, simply set the environment variable before starting the server. For example, to connect to the public dev environment:

VITE_BACKEND_BASEURL=/api-dev yarn dev