-
-
Notifications
You must be signed in to change notification settings - Fork 43
Frontend
This is the easiest way to manage all of the services together.
For details on how to run the API first, please see: DEV 2. Backend
-
You will need to Install Docker and ensure that it is running on your local machine.
-
From the command line: navigate to the top level directory of the FMTM project.
-
From the command line run:
docker compose build ui
This is essential, as the development container for the frontend is different to production. -
Once everything is built, from the command line run:
docker compose up -d ui
-
If everything goes well you should now be able to navigate to the project in your browser: http://fmtm.localhost:7050
Note: during development, if you rebuild the frontend, then run 'docker compose up -d', the node_modules directory may not be updated. To solve this, use the flag: --renew-anon-volumes on docker compose up.
cd src/frontend
npm install
Run the frontend with hot-reloading: npm run start:live
The frontend should now be accessible at: http://127.0.0.1:<PORT_NUMBER>
The frontend is built with React and Typescript. Here are some tips on how to work with the frontend:
To add environment variables, create a .env.local file in the src/frontend
directory. Any variables defined here will override those in .env
.
To add a new route, create a new page in the src/frontend/pages
directory. Then add a new entry to the src/frontend/router.tsx
file.
To add a new component, create a new .tsx file in the src/frontend/ components directory.
Running the FMTM project is easy with Docker. You can also run the project locally outside of Docker, but it requires more setup. The frontend is built with React and Typescript, and the backend is built with FastAPI. Use the tips provided to customize and extend the functionality of the project.