Skip to main content

Frontend

The Catcord frontend is a SvelteKit application.

Setup the frontend#

The frontend can be set up one of two ways - Node.js or Docker. We recommend using Node for local development and Docker for testing the final build.

Node.js#

There are a couple prerequisites for setting up the frontend with Node.

  • Node v14 - This is the version we use and recommend
  • Yarn - The package manager we use

There are a couple key commands you need to know to get started:

yarn # Install the required dependenciesyarn dev # Start the SvelteKit dev server with hot reloadyarn build # Build for productionyarn start # Start the production build locallyyarn lint # Lint with ESLintyarn tsc # Run the TypeScript compiler

You'll primary develop with yarn dev and test with the various other commands. Make sure to run ESLint and the TypeScript compiler before you push.

Docker#

You'll need Docker installed to run the production build with Docker. You cannot develop in Docker as our Dockerfile uses the production build command.

To start the Docker container, run these commands:

docker build . -t catcord-frontenddocker run -p 3000:3000 catcord-frontend

Or if you'd like a shorter command, simply run yarn docker.

You can use Docker Compose to start both the frontend and backend together if you wish. Just run

docker-compose up --build

in the root directory of the project.