Website NIAEFEUP - FrontEnd

The frontend of the website for NIAEFEUP, a student branch in FEUP.

Technologies used

• SvelteKit - Frontend framework
• TailwindCSS - CSS framework
• Vite - Build tool

Development setup

Prerequisites

• Node 19+
• Docker
• Docker Compose

Installing Docker and Docker Compose

To install docker you can follow the instructions on the Docker docs (Select your Linux distribution on the Server section)

Follow these instructions to run Docker as a non root user.

After installing Docker follow these instructions on the Docker docs to install Docker Composer.

Running

To run the development environment using Docker do:

./dev.sh

This will build the Docker image the first time you run and start the development server at port 3000 and storybook at port 6006.

To stop press Ctrl-C and it will remove all related containers.

To run with npm (or pnpm or yarn) do:

# install project dependencies
npm install

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Linting

We use ESLint for code conventions and Prettier for formatting, to ensure a consistent coding style. The respective configurations can be found in .eslintrc.cjs and .prettierrc.

We strongly recommend the use of the VSCode extension for Prettier and, optionally, the ESLint extension.

Alternatively, you can run the linters manually:

npm run lint
npm run format

If you wish, you can activate the formatter to run automatically on save by adding the following fields to your VSCode settings:

"editor.formatOnPaste": true,
"editor.formatOnSave": true,

Testing

You can run the unit tests using Docker with:

./test.sh

Alternatively you can use npm (or other package managers already mentioned) and do:

npm run test

Storybook

We use Storybook as a way to interactively preview widgets in isolation.

Storybook should be already running on port 6006 if you started dev.sh script.

Alternatively you can use npm (or other package managers already mentioned) and do:

npm run storybook

To write new stories refer to the official documentation.

If you only want to check our current stories, you can do it on the Storybook Preview (also available in your pull requests).

Building

To create a production version of your app:

docker build -t {IMAGE_NAME} -f Dockerfile.prod .
docker run --env PORT=80 -p {YOUR_PORT}:80 {IMAGE_NAME}

Or with npm:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Project Details

Project Structure

The project follow the structure recommended by SvelteKit: https://kit.svelte.dev/docs/project-structure