Skip to content

Commit

Permalink
Simplify local dev setup, update CONTRIBUTING.md and recommend runnin…
Browse files Browse the repository at this point in the history
…g scripts with node --run
  • Loading branch information
acelaya committed Oct 26, 2024
1 parent 83ca5b2 commit 4c74aec
Show file tree
Hide file tree
Showing 5 changed files with 22 additions and 35 deletions.
3 changes: 0 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,4 @@
/dist

npm-debug.log*

docker-compose.override.yml
home
public/servers.json*
28 changes: 12 additions & 16 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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.
Expand All @@ -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

Expand Down
7 changes: 0 additions & 7 deletions docker-compose.override.yml.dist

This file was deleted.

3 changes: 2 additions & 1 deletion docker-compose.yml
Original file line number Diff line number Diff line change
@@ -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
Expand Down
16 changes: 8 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit 4c74aec

Please sign in to comment.