.. | ||
public | ||
src | ||
.eslintrc.cjs | ||
.gitignore | ||
.prettierrc | ||
index.html | ||
package-lock.json | ||
package.json | ||
README.md | ||
tsconfig.json | ||
tsconfig.node.json | ||
vite.config.ts |
The Frontend
This is a React + TypeScript + Vite project. It is a single-page application (SPA) that communicates with the backend via a REST API. Most of this looks very complex, but it's mostly just a lot of boilerplate due to the ugodly amount of abstraction that comes with TypeScript and React, and just modern web development in general.
Build Instructions
Our build tool, npm, is the only dependency required to build this project. It handles fetching the dependencies and placing them in the famously huge node_modules
directory, also known as the heaviest object in the known universe. It also handles the build process, which is just a matter of running npm run build
.
The build target results in a dist
directory, which contains the static assets that can be served by a web server. This is the directory that will be served by the backend. Think of this like compiling a program, the .exe/elf/binary is the dist
directory.
For development, you use npm run dev
to start a development server. This server will automatically rebuild the project when you make changes to the source code, and it will also automatically reload the page in your browser. The issue is that the development server will run without the backend, so you will need to run the backend separately during development if you want any meaningful data to be displayed.