diff --git a/.gitignore b/.gitignore index 142d896a..1de7ce12 100644 --- a/.gitignore +++ b/.gitignore @@ -10,7 +10,4 @@ /dist npm-debug.log* - -docker-compose.override.yml -home public/servers.json* diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a9588871..7c5672a5 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -14,16 +14,13 @@ Because of this, the only actual dependencies are [docker](https://docs.docker.c The first thing you need to do is fork the repository, and clone it in your local machine. -Then you will have to follow these steps: +Then simply run `docker compose up` and you will have the project exposed in port `3000` (http://localhost:3000). -* Copy the file `docker-compose.override.yml.dist` by also removing the `dist` extension. -* Start-up the project by running `docker compose up`. - -Once this is finished, you will have the project exposed in port `3000` (http://localhost:3000). +> The first time the container is created, the project dependencies will be installed and the container may take a bit longer to start. ## Project structure -This project is a [react](https://reactjs.org/) & [redux](https://redux.js.org/) application, built with [typescript](https://www.typescriptlang.org/), which is distributed as a 100% client-side progressive web application. +This project is a [react](https://react.dev/) & [redux](https://redux.js.org/) application, built with [typescript](https://www.typescriptlang.org/), which is distributed as a 100% client-side progressive web application. This is the basic project structure: @@ -39,7 +36,7 @@ shlink-web-client ``` * `config`: It contains some configuration scripts, used during testing, linting and building of the project. -* `public`: Will act as the application document root once built, and contains some static assets (favicons, images, etc). +* `public`: Will act as the application document root once built, and contains some static assets (favicons, images, etc.). * `scripts`: It has some of the CLI scripts used to run tests or building. * `src`: Contains the main source code of the application, including both web components, SASS stylesheets and files with logic. * `test`: Contains the project tests. @@ -48,20 +45,19 @@ shlink-web-client > Note: The `indocker` shell script is a helper used to run commands inside the docker container. -* `./indocker npm run lint`: Checks coding styles are fulfilled, both in JS/TS files as well as in stylesheets. -* `./indocker npm run lint:js`: Checks coding styles are fulfilled in JS/TS files. -* `./indocker npm run lint:css`: Checks coding styles are fulfilled in stylesheets. -* `./indocker npm run lint:js:fix`: Fixes coding styles in JS/TS files. -* `./indocker npm run lint:css:fix`: Fixes coding styles in stylesheets. -* `./indocker npm run test`: Runs unit tests with Jest. -* `./indocker npm run mutate`: Runs mutation tests with StrykerJS (this command can be very slow). +* `./indocker node --run lint`: Checks coding styles are fulfilled, both in JS/TS files and in stylesheets. +* `./indocker node --run lint:js`: Checks coding styles are fulfilled in JS/TS files. +* `./indocker node --run lint:css`: Checks coding styles are fulfilled in stylesheets. +* `./indocker node --run lint:js:fix`: Fixes coding styles in JS/TS files. +* `./indocker node --run lint:css:fix`: Fixes coding styles in stylesheets. +* `./indocker node --run test`: Runs unit tests with Jest. ## Building the project The source code in this project cannot be run directly in a web browser, you need to build it first. -* `./indocker npm run build`: Builds the project using a combination of `webpack`, `babel` and `tsc`, generating the final static files. The content is placed in the `build` folder, which is automatically created if it does not exist. -* `./indocker npm run serve:build`: Serves the static files inside the `build` folder in port 5000 (http://localhost:5000). Useful to test the content built with previous command. +* `./indocker node --run run build`: Builds the project for production using [vite](https://vite.dev/), generating the final static files. The content is placed in the `build` folder, which is automatically created if it does not exist. +* `./indocker node --run run preview`: Serves the static files inside the `build` folder in a random port. Useful to test the content built with previous command. ## Pull request process diff --git a/docker-compose.override.yml.dist b/docker-compose.override.yml.dist deleted file mode 100644 index 3d8e0ed9..00000000 --- a/docker-compose.override.yml.dist +++ /dev/null @@ -1,7 +0,0 @@ -services: - shlink_web_client_node: - user: 1000:1000 - volumes: - - /etc/passwd:/etc/passwd:ro - - /etc/group:/etc/group:ro - - ./home:/home/alejandro diff --git a/docker-compose.yml b/docker-compose.yml index 12de7071..91e805b4 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,7 +1,8 @@ services: shlink_web_client_node: container_name: shlink_web_client_node - image: node:22.3-alpine + user: 1000:1000 # With this, files created via `indocker` script will belong to the host user + image: node:22.10-alpine command: /bin/sh -c "cd /home/shlink/www && npm install && npm run start" volumes: - ./:/home/shlink/www diff --git a/package.json b/package.json index 581946bf..080a9f54 100644 --- a/package.json +++ b/package.json @@ -7,21 +7,21 @@ "license": "MIT", "type": "module", "scripts": { - "lint": "npm run lint:css && npm run lint:js", + "lint": "node --run lint:css && node --run lint:js", "lint:css": "stylelint src/*.scss src/**/*.scss", "lint:js": "eslint src test config/test", - "lint:fix": "npm run lint:css:fix && npm run lint:js:fix", - "lint:css:fix": "npm run lint:css -- --fix", - "lint:js:fix": "npm run lint:js -- --fix", + "lint:fix": "node --run lint:css:fix && node --run lint:js:fix", + "lint:css:fix": "node --run lint:css -- --fix", + "lint:js:fix": "node --run lint:js -- --fix", "types": "tsc", "start": "vite serve --host=0.0.0.0", "preview": "vite preview --host=0.0.0.0", - "build": "npm run types && vite build && node scripts/replace-version.mjs", - "build:dist": "npm run build && node scripts/create-dist-file.mjs", + "build": "node --run types && vite build && node scripts/replace-version.mjs", + "build:dist": "node --run build && node scripts/create-dist-file.mjs", "test": "vitest run --run", "test:watch": "vitest --watch", - "test:ci": "npm run test -- --coverage", - "test:verbose": "npm run test -- --verbose" + "test:ci": "node --run test -- --coverage", + "test:verbose": "node --run test -- --verbose" }, "dependencies": { "@fortawesome/fontawesome-free": "^6.6.0",