iritmaximus/ohtuilmo
1
0
Fork 0
mirror of https://github.com/UniversityOfHelsinkiCS/ohtuilmo.git synced 2026-10-12 19:03:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: add lint and format all files

Browse Source
This commit is contained in:
Markus
2026-08-06 16:08:35 +03:00
parent 9e7caa88e3
commit 738389cead
5 changed files with 87 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/.oxlintrc.json
+1 -1
View File
@@ -25,4 +25,4 @@
} }
} }
] ]
} }
frontend/README.md
+67 -67
View File
@@ -8,22 +8,22 @@ Registration, administration and review tool for University of Helsinki's softwa
## Table of Contents ## Table of Contents
* [Development](#development) - [Development](#development)
* [Local development](#local-development) - [Local development](#local-development)
* [Test users](#test-users) - [Test users](#test-users)
* [Accessing the database](#accessing-the-database) - [Accessing the database](#accessing-the-database)
* [Directly with psql](#directly-with-psql) - [Directly with psql](#directly-with-psql)
* [With the dbscript](#with-the-dbscript) - [With the dbscript](#with-the-dbscript)
* [Writing and running tests locally](#writing-and-running-tests-locally) - [Writing and running tests locally](#writing-and-running-tests-locally)
* [Writing tests](#writing-tests) - [Writing tests](#writing-tests)
* [If you're writing a frontend-only feature which works with the Docker image in DockerHub](#if-youre-writing-a-frontend-only-feature-which-works-with-the-docker-image-in-dockerhub) - [If you're writing a frontend-only feature which works with the Docker image in DockerHub](#if-youre-writing-a-frontend-only-feature-which-works-with-the-docker-image-in-dockerhub)
* [If you're writing a feature that touches both the frontend and backend](#if-youre-writing-a-feature-that-touches-both-the-frontend-and-backend) - [If you're writing a feature that touches both the frontend and backend](#if-youre-writing-a-feature-that-touches-both-the-frontend-and-backend)
* [Running end-to-end tests](#running-end-to-end-tests) - [Running end-to-end tests](#running-end-to-end-tests)
* [CI, Docker](#ci-docker) - [CI, Docker](#ci-docker)
* [Available tags](#available-tags) - [Available tags](#available-tags)
* [Deployment: staging and production](#deployment-staging-and-production) - [Deployment: staging and production](#deployment-staging-and-production)
* [Design compromises and things we didn't have time to fix](#design-compromises-and-things-we-didnt-have-time-to-fix) - [Design compromises and things we didn't have time to fix](#design-compromises-and-things-we-didnt-have-time-to-fix)
* [Docker cheatsheet](#docker-cheatsheet) - [Docker cheatsheet](#docker-cheatsheet)
## Development ## Development
@@ -31,43 +31,43 @@ Registration, administration and review tool for University of Helsinki's softwa
1. Install docker, docker-compose and node. 1. Install docker, docker-compose and node.
2. Clone this repo and the [backend](https://github.com/ohtuprojekti-ilmo/ohtuilmo-backend) repo under the same directory. 2. Clone this repo and the [backend](https://github.com/ohtuprojekti-ilmo/ohtuilmo-backend) repo under the same directory.
``` ```
ohtuprojekti-ilmo/ ohtuprojekti-ilmo/
├── ohtuilmo-backend/ ├── ohtuilmo-backend/
└── ohtuilmo-frontend/ └── ohtuilmo-frontend/
``` ```
3. Copy the `docker-compose.sample.yml` file into this project root directory, rename it to `docker-compose.yml`. 3. Copy the `docker-compose.sample.yml` file into this project root directory, rename it to `docker-compose.yml`.
- Notice that the docker-compose file specifies `ohtuilmo-backend` and `ohtuilmo-frontend` as the directory names for backend's and frontend's `build` dir - Notice that the docker-compose file specifies `ohtuilmo-backend` and `ohtuilmo-frontend` as the directory names for backend's and frontend's `build` dir
``` ```
ohtuprojekti-ilmo/ ohtuprojekti-ilmo/
├── ohtuilmo-backend/ ├── ohtuilmo-backend/
├── ohtuilmo-frontend/ ├── ohtuilmo-frontend/
└── docker-compose.yml └── docker-compose.yml
``` ```
4. Run `npm install` in both backend's and frontend's directory 4. Run `npm install` in both backend's and frontend's directory
5. Start the database with `docker-compose up -d db` 5. Start the database with `docker-compose up -d db`
- If the command fails, saying that port 5432 is already bound, change or remove the host port in the docker-compose file: - If the command fails, saying that port 5432 is already bound, change or remove the host port in the docker-compose file:
```yml ```yml
db: db:
# ... # ...
ports: ports:
- '5432:5432' - '5432:5432'
# ↑ # ↑
# └ host port # └ host port
``` ```
6. Create, migrate and seed the database 6. Create, migrate and seed the database
```sh ```sh
$ cd ohtuilmo-backend $ cd ohtuilmo-backend
$ npm run db:recreate $ npm run db:recreate
``` ```
7. Start the backend and frontend in watch mode 7. Start the backend and frontend in watch mode
- backend: `npm run watch` - backend: `npm run watch`
- frontend: `npm start` - frontend: `npm start`
### Test users ### Test users
| Username | Password | | Username | Password |
|---------------|-----------------| | ------------- | --------------- |
| testertester | testertester123 | | testertester | testertester123 |
| testertester2 | testertester123 | | testertester2 | testertester123 |
| testertester3 | testertester123 | | testertester3 | testertester123 |
@@ -77,6 +77,7 @@ Registration, administration and review tool for University of Helsinki's softwa
#### Directly with psql #### Directly with psql
By default, the `docker-compose.sample.yml` file exposes the PostgreSQL 10.6 server on your localhost port 5432. You can directly connect to the database with the PostgreSQL client `psql`. By default, the `docker-compose.sample.yml` file exposes the PostgreSQL 10.6 server on your localhost port 5432. You can directly connect to the database with the PostgreSQL client `psql`.
- MacOS: `brew install postgres` - MacOS: `brew install postgres`
- Linux: `sudo apt-get install postgresql-client` - Linux: `sudo apt-get install postgresql-client`
- Windows: good luck - Windows: good luck
@@ -91,7 +92,7 @@ $ psql postgres://postgres@localhost:5432/dev_postgres
The name of the database (here `dev_postgres`) depends on backend's `NODE_ENV`. As to why it's `postgres`, see [_Design compromises and things we didn't have time to fix_](#design-compromises-and-things-we-didnt-have-time-to-fix). The name of the database (here `dev_postgres`) depends on backend's `NODE_ENV`. As to why it's `postgres`, see [_Design compromises and things we didn't have time to fix_](#design-compromises-and-things-we-didnt-have-time-to-fix).
| NODE_ENV | db created by `npm run db:recreate` | | NODE_ENV | db created by `npm run db:recreate` |
|-------------|-------------------------------------| | ----------- | ----------------------------------- |
| production | postgres | | production | postgres |
| development | dev_postgres | | development | dev_postgres |
@@ -100,6 +101,7 @@ The name of the database (here `dev_postgres`) depends on backend's `NODE_ENV`.
The dbscript was originally written to compare the schema created by Sequelize to that created by the migrations. (diff files created by `drop-init-sequelize` and `drop-init-migrations`). However, it's also a handy tool to run SQL commands in the container. Note: the current version expects the db to be exposed on host port 5432. The dbscript was originally written to compare the schema created by Sequelize to that created by the migrations. (diff files created by `drop-init-sequelize` and `drop-init-migrations`). However, it's also a handy tool to run SQL commands in the container. Note: the current version expects the db to be exposed on host port 5432.
Copy the `dbscript.sh` to the project root directory (same directory as `docker-compose.yml`), chmod +x it if not already, and run it. Make sure your current working directory is the same directory. Copy the `dbscript.sh` to the project root directory (same directory as `docker-compose.yml`), chmod +x it if not already, and run it. Make sure your current working directory is the same directory.
- ``` - ```
ohtuprojekti-ilmo/ ohtuprojekti-ilmo/
├── ohtuilmo-backend/ ├── ohtuilmo-backend/
@@ -151,7 +153,7 @@ To change the name of the database (by default `dev_postgres`), edit the script.
This project uses [Cypress](https://www.cypress.io/) for browser testing. This project uses [Cypress](https://www.cypress.io/) for browser testing.
The frontend's `e2e/` directory contains the test specs and a custom docker-compose file (`docker-compose.e2e.yml`) which can be used to set up an environment which matches the actual production environment. See [_Running end-to-end tests_](#running-end-to-end-tests). The frontend's `e2e/` directory contains the test specs and a custom docker-compose file (`docker-compose.e2e.yml`) which can be used to set up an environment which matches the actual production environment. See [_Running end-to-end tests_](#running-end-to-end-tests).
#### Writing tests #### Writing tests
@@ -163,20 +165,20 @@ In this case, you can just start the backend using the DockerHub image.
1. Start `db` and `backend` with docker-compose normally, no need to specifically use the `.e2e.yml` file. 1. Start `db` and `backend` with docker-compose normally, no need to specifically use the `.e2e.yml` file.
2. Check which port the backend is running on 2. Check which port the backend is running on
- In frontend's `package.json`, set `"proxy": "http://localhost:<PORT>"` to the correct port so that the frontend's /api calls get proxied to the backend - In frontend's `package.json`, set `"proxy": "http://localhost:<PORT>"` to the correct port so that the frontend's /api calls get proxied to the backend
- Probably easiest if you use the port found in the file as the host port in docker-compose. - Probably easiest if you use the port found in the file as the host port in docker-compose.
- Don't commit this change, it's not needed in production and it changes per developer really. - Don't commit this change, it's not needed in production and it changes per developer really.
3. Start the frontend with `npm start` 3. Start the frontend with `npm start`
4. Run Cypress. Check which port the frontend is running on, pass it to Cypress before opening it 4. Run Cypress. Check which port the frontend is running on, pass it to Cypress before opening it
- There's [multiple ways](https://docs.cypress.io/guides/guides/environment-variables.html#Setting) to pass this information to Cypress, the easiest for you probably is to do: - There's [multiple ways](https://docs.cypress.io/guides/guides/environment-variables.html#Setting) to pass this information to Cypress, the easiest for you probably is to do:
```sh ```sh
CYPRESS_baseUrl=http://localhost:<PORT> npm run cypress:open CYPRESS_baseUrl=http://localhost:<PORT> npm run cypress:open
``` ```
or or
``` ```
npm run cypress:open -- --env CYPRESS_baseUrl=http://localhost:<PORT> npm run cypress:open -- --env CYPRESS_baseUrl=http://localhost:<PORT>
``` ```
The `baseUrl` lets Cypress know which host to direct its requests when we do `cy.visit('/')`. Alternatively The `baseUrl` lets Cypress know which host to direct its requests when we do `cy.visit('/')`. Alternatively
#### If you're writing a feature that touches both the frontend and backend #### If you're writing a feature that touches both the frontend and backend
@@ -187,6 +189,7 @@ Same instructions as above but you only start `db` with docker-compose.
The full E2E test suite can be run locally, but notice that it builds the frontend image from the frontend directory, meaning that you can't interactively edit your code and the tests. The full E2E test suite can be run locally, but notice that it builds the frontend image from the frontend directory, meaning that you can't interactively edit your code and the tests.
Run: Run:
- `npm run e2e:install` - `npm run e2e:install`
- `npm run e2e:setup` - `npm run e2e:setup`
- `npm run e2e:run or npm run e2e:open` - `npm run e2e:run or npm run e2e:open`
@@ -203,19 +206,19 @@ Travis will build the frontend image, and pull all other images.
![](e2e/e2e-arch.png) ![](e2e/e2e-arch.png)
- Travis: - Travis:
- [Frontend](https://travis-ci.org/ohtuprojekti-ilmo/ohtuilmo-frontend) - [Frontend](https://travis-ci.org/ohtuprojekti-ilmo/ohtuilmo-frontend)
- [Backend](https://travis-ci.org/ohtuprojekti-ilmo/ohtuilmo-backend) - [Backend](https://travis-ci.org/ohtuprojekti-ilmo/ohtuilmo-backend)
- [Cypress Dashboard](https://dashboard.cypress.io/#/projects/27w3df/runs) - [Cypress Dashboard](https://dashboard.cypress.io/#/projects/27w3df/runs)
After a commit has been pushed to master and Travis has cleared the tests, it will build and push a new Docker image to DockerHub. These images are used in staging and production via `docker-compose pull`. After a commit has been pushed to master and Travis has cleared the tests, it will build and push a new Docker image to DockerHub. These images are used in staging and production via `docker-compose pull`.
- DockerHub - DockerHub
- [Frontend](https://hub.docker.com/r/ohtuprojektiilmo/ohtufront) - [Frontend](https://hub.docker.com/r/ohtuprojektiilmo/ohtufront)
- [Backend](https://hub.docker.com/r/ohtuprojektiilmo/ohtufront) - [Backend](https://hub.docker.com/r/ohtuprojektiilmo/ohtufront)
### Available tags ### Available tags
For both frontend and backend, the `latest` tag is built from the latest commit on master which has passed the Travis tests. Additionally, each of these builds are tagged with the short commit hash, allowing manual rollbacks in production by changing the tag in the docker-compose file. For both frontend and backend, the `latest` tag is built from the latest commit on master which has passed the Travis tests. Additionally, each of these builds are tagged with the short commit hash, allowing manual rollbacks in production by changing the tag in the docker-compose file.
## Deployment: staging and production ## Deployment: staging and production
@@ -226,6 +229,7 @@ Both services are behind a reverse proxy (nginx). It proxies `/projekti` to the
Assuming you've been given proper ssh access, you can deploy new images from DockerHub with the `deploy.sh` script found in the correct user's home directory. Assuming you've been given proper ssh access, you can deploy new images from DockerHub with the `deploy.sh` script found in the correct user's home directory.
`deploy.sh`: `deploy.sh`:
```sh ```sh
#!/bin/bash #!/bin/bash
set -e set -e
@@ -246,14 +250,10 @@ docker-compose run --entrypoint 'npm run db:migrate' backend
docker-compose up -d backend frontend docker-compose up -d backend frontend
``` ```
## Design compromises and things we didn't have time to fix ## Design compromises and things we didn't have time to fix
See [issues marked with tag `design-compromise`](https://github.com/ohtuprojekti-ilmo/ohtuilmo-frontend/issues?q=is%3Aissue+is%3Aopen+label%3Adesign-compromise). See [issues marked with tag `design-compromise`](https://github.com/ohtuprojekti-ilmo/ohtuilmo-frontend/issues?q=is%3Aissue+is%3Aopen+label%3Adesign-compromise).
## Docker cheatsheet ## Docker cheatsheet
[Docker cheatsheet](https://github.com/jexniemi/Docker-cheat-page/wiki) [Docker cheatsheet](https://github.com/jexniemi/Docker-cheat-page/wiki)
frontend/index.html
+3 -9
View File
@@ -1,17 +1,11 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<link rel="shortcut icon" href="/favicon.png" /> <link rel="shortcut icon" href="/favicon.png" />
<link <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" />
href="https://fonts.googleapis.com/css?family=Roboto:300"
rel="stylesheet"
/>
<title>Software engineering project</title> <title>Software engineering project</title>
<link rel="shortcut icon" type="image/png" href="/favicon.png" /> <link rel="shortcut icon" type="image/png" href="/favicon.png" />
</head> </head>
frontend/package.json
+15 -15
View File
@@ -3,6 +3,21 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test-setup": "npm run test-setup:down && docker compose -f ../compose.local-test.yaml --profile local-e2e up -d",
"test-setup:down": "docker compose -f ../compose.local-test.yaml --profile local-e2e down",
"test:docker": "docker compose -f ../compose.local-test.yaml --profile e2e up --force-recreate --exit-code-from cypress",
"test:docker:down": "docker compose -f ../compose.local-test.yaml --profile e2e down",
"test": "CYPRESS_baseUrl=http://localhost:5000 npx cypress open",
"test:headless": "CYPRESS_VIDEO=false CYPRESS_baseUrl=http://localhost:5000 npx cypress run",
"lint": "oxlint",
"lint:fix": "oxlint --fix",
"format": "oxfmt",
"format:check": "oxfmt --check"
},
"dependencies": { "dependencies": {
"@emotion/react": "^11.14.0", "@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1", "@emotion/styled": "^11.14.1",
@@ -23,21 +38,6 @@
"redux": "^5.0.1", "redux": "^5.0.1",
"redux-thunk": "^3.1.0" "redux-thunk": "^3.1.0"
}, },
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test-setup": "npm run test-setup:down && docker compose -f ../compose.local-test.yaml --profile local-e2e up -d",
"test-setup:down": "docker compose -f ../compose.local-test.yaml --profile local-e2e down",
"test:docker": "docker compose -f ../compose.local-test.yaml --profile e2e up --force-recreate --exit-code-from cypress",
"test:docker:down": "docker compose -f ../compose.local-test.yaml --profile e2e down",
"test": "CYPRESS_baseUrl=http://localhost:5000 npx cypress open",
"test:headless": "CYPRESS_VIDEO=false CYPRESS_baseUrl=http://localhost:5000 npx cypress run",
"lint": "oxlint src/",
"lint:fix": "oxlint --fix src/",
"format": "oxfmt src/ e2e/",
"format:check": "oxfmt --check src/ e2e/"
},
"devDependencies": { "devDependencies": {
"@vitejs/plugin-react": "^4.7.0", "@vitejs/plugin-react": "^4.7.0",
"@vitejs/plugin-react-refresh": "^1.3.6", "@vitejs/plugin-react-refresh": "^1.3.6",
package.json
+1 -1
View File
@@ -9,7 +9,7 @@
"lint": "npm --prefix frontend run lint && npm --prefix backend run lint" "lint": "npm --prefix frontend run lint && npm --prefix backend run lint"
}, },
"lint-staged": { "lint-staged": {
"frontend/{src,e2e}/**/*.{js,jsx}": [ "frontend/**/*.{js,jsx}": [
"npm --prefix frontend run format:check", "npm --prefix frontend run format:check",
"npm --prefix frontend run lint" "npm --prefix frontend run lint"
], ],