Merge pull request #1359 from acelaya-forks/feature/improve-dev-setup

Simplify local dev setup, update CONTRIBUTING.md and recommend running scripts with node --run

.github/workflows/ci.yml

@@ -11,5 +11,5 @@ jobs:
   ci:
     uses: shlinkio/github-actions/.github/workflows/web-app-ci.yml@main
     with:
-      node-version: 20.7
+      node-version: 22.x
       publish-coverage: true

.github/workflows/deploy-preview.yml

@@ -9,19 +9,19 @@ jobs:
     continue-on-error: true
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           repository: ${{ github.event.pull_request.head.repo.full_name }}
           ref: ${{ github.event.pull_request.head.ref }}
       - name: Use node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 20.7
+          node-version: 22.x
       - name: Build
         run: |
           npm ci && \
           node ./scripts/set-homepage.cjs /shlink-web-client/${GITHUB_HEAD_REF#refs/heads/} && \
-          npm run build
+          node --run build
       - name: Deploy preview
         uses: shlinkio/deploy-preview-action@v1.0.1
         with:

.github/workflows/publish-release.yml

@@ -10,11 +10,11 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Use node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 20.7
+          node-version: 22.x
       - name: Generate release assets
         run: npm ci && VERSION=${GITHUB_REF#refs/tags/v} npm run build:dist
       - name: Publish release with assets

.gitignore

@@ -10,7 +10,4 @@
 /dist
 
 npm-debug.log*
-
-docker-compose.override.yml
-home
 public/servers.json*

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.
+> The first time the container is created, the project dependencies will be installed and the container may take a bit longer to start.
-* 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).
 
 ## 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 node --run lint`: Checks coding styles are fulfilled, both in JS/TS files and in stylesheets.
-* `./indocker npm run lint:js`: Checks coding styles are fulfilled in JS/TS files.
+* `./indocker node --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 node --run lint:css`: Checks coding styles are fulfilled in stylesheets.
-* `./indocker npm run lint:js:fix`: Fixes coding styles in JS/TS files.
+* `./indocker node --run lint:js:fix`: Fixes coding styles in JS/TS files.
-* `./indocker npm run lint:css:fix`: Fixes coding styles in stylesheets.
+* `./indocker node --run lint:css:fix`: Fixes coding styles in stylesheets.
-* `./indocker npm run test`: Runs unit tests with Jest.
+* `./indocker node --run test`: Runs unit tests with Jest.
-* `./indocker npm run mutate`: Runs mutation tests with StrykerJS (this command can be very slow).
 
 ## 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 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 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 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
 

docker-compose.override.yml.dist

@@ -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

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

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:fix": "node --run lint:css:fix && node --run lint:js:fix",
-    "lint:css:fix": "npm run lint:css -- --fix",
+    "lint:css:fix": "node --run lint:css -- --fix",
-    "lint:js:fix": "npm run lint:js -- --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": "node --run types && vite build && node scripts/replace-version.mjs",
-    "build:dist": "npm run build && node scripts/create-dist-file.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:ci": "node --run test -- --coverage",
-    "test:verbose": "npm run test -- --verbose"
+    "test:verbose": "node --run test -- --verbose"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.6.0",