Skip to content

Commit

Permalink
front: switch from yarn to npm
Browse files Browse the repository at this point in the history
Signed-off-by: Yohh <durandyohan@zaclys.net>
Signed-off-by: Simon Ser <contact@emersion.fr>
  • Loading branch information
Yohh committed Dec 4, 2024
1 parent 137c2dd commit 52ef1ae
Show file tree
Hide file tree
Showing 16 changed files with 24,076 additions and 11,240 deletions.
14 changes: 7 additions & 7 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -484,7 +484,7 @@ jobs:
-v $PWD/gateway:/gateway
-v $PWD/front/src/common/api:/app/src/common/api
${{ fromJSON(needs.build.outputs.stable_tags).front-build }}
yarn generate-types
npm run generate-types
- name: Check for unexpected changes
run: |
Expand Down Expand Up @@ -704,7 +704,7 @@ jobs:
run: |
docker run --name=front-i18n-api-error --net=host -v $PWD/output/openapi.yaml:/editoast/openapi.yaml \
${{ fromJSON(needs.build.outputs.stable_tags).front-build }} \
yarn i18n-api-errors
npm run i18n-api-errors
exit $(docker wait front-i18n-api-error)
check_gateway:
Expand Down Expand Up @@ -859,22 +859,22 @@ jobs:
run: |
docker run --name=front-format --net=host \
${{ fromJSON(needs.build.outputs.stable_tags).front-build }} \
yarn prettier . --check
npx prettier . --check
exit $(docker wait front-format)
- name: Check for i18n missing keys
run: |
docker run --name=front-i18n-checker --net=host \
${{ fromJSON(needs.build.outputs.stable_tags).front-build }} \
yarn i18n-checker
npm run i18n-checker
exit $(docker wait front-i18n-checker)
- name: Execute tests within container
run: |
docker run --name=front-test --net=host -v $PWD/output:/app/tests/unit \
${{ fromJSON(needs.build.outputs.stable_tags).front-build }} \
yarn test-coverage
npm run test-coverage
exit $(docker wait front-test)
Expand Down Expand Up @@ -1058,7 +1058,7 @@ jobs:
- name: Detect Playwright version
id: detect_playwright_version
run: |
PLAYWRIGHT_VERSION=$(cd front && yarn list --pattern playwright --json | jq -r '.data.trees[].name | split("@")[-1]' | sort -u)
PLAYWRIGHT_VERSION=$(cd front && npm list --package-lock-only --pattern playwright --json | jq -r '.dependencies["@playwright/test"].version' | sort -u)
if [ "$(echo "$PLAYWRIGHT_VERSION" | wc -l)" -ne 1 ]; then
echo "Error: Zero or multiple playwright versions found: $PLAYWRIGHT_VERSION" >&2
exit 1
Expand Down Expand Up @@ -1098,7 +1098,7 @@ jobs:
-e CI=true \
--ipc=host \
-v "$PWD/front/test-results:/app/front/test-results" \
osrd-playwright:latest yarn playwright test
osrd-playwright:latest npx playwright test
exit $(docker wait playwright-test)
- uses: actions/upload-artifact@v4
Expand Down
1 change: 0 additions & 1 deletion flake.nix
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@
# Front
fixedNodePackages.create-react-app
fixedNodePackages.eslint
fixedNodePackages.yarn
fixedNode

# Nix formatter
Expand Down
2 changes: 0 additions & 2 deletions front/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@
.cache

npm-debug.log*
yarn-debug.log*
yarn-error.log*

# sonarqube
.scannerwork
Expand Down
62 changes: 33 additions & 29 deletions front/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,15 @@
## How to launch project for development purpose?

- go inside `/front/` from OSRD main project
- you'll need [`npm`](https://nodejs.org/en/download/package-manager) and
[`yarn`](https://classic.yarnpkg.com/lang/en/docs/install/)
- exec `yarn` (hope you have a good connexion and a good cup of tea)
- exec `yarn start` (perhaps you'll need `NODE_OPTIONS="--openssl-legacy-provider"` if your node
- you'll need [`npm`](https://nodejs.org/en/download/package-manager)
- exec `npm install` (hope you have a good connexion and a good cup of tea)
- exec `npm start` (perhaps you'll need `NODE_OPTIONS="--openssl-legacy-provider"` if your node
version is too new)
- enjoy

## Commands

### `yarn start`
### `npm start`

Runs the app in a local development environment.

Expand All @@ -21,36 +20,38 @@ well.

See [Main Readme](../README.md) if you need more information to run the docker.

### `yarn test`
### `npm run test`

Launches the test runner in the interactive watch mode.

### `yarn build`
### `npm run build`

Builds the app for production to the `build` folder.

### `yarn generate-licenses`
### `npm run generate-licenses`

Update licenses attributions in /src/common/ReleaseInformations/json/

### `yarn e2e-tests`
### `npm run e2e-tests`

Launches end to end tests.

It requires:

- Install playwright dependencies `cd ./front/ && yarn playwright install --with-deps`
- Backend containers to be up: `docker compose up --no-build --detach valkey postgres gateway core editoast`
- Install playwright dependencies `cd ./front/ && npx playwright install --with-deps`
- Backend containers to be up:
`docker compose up --no-build --detach valkey postgres gateway core editoast`
- Running front with `docker compose up --build --detach front`

Now you can run the test with `cd front/ && yarn e2e-tests`.
Now you can run the test with `cd front/ && npm run e2e-tests`.

If you are using a Linux distribution not supported by playwright (which only supports Windows, macOS and Ubuntu/Debian),
you can instead start the tests inside a docker container using `osrd/scripts/run-front-playwright-container.sh`.
You may pass the same options and arguments to this script as you would to `yarn e2e-tests` or `yarn playwright test`.
If you are using a Linux distribution not supported by playwright (which only supports Windows,
macOS and Ubuntu/Debian), you can instead start the tests inside a docker container using
`osrd/scripts/run-front-playwright-container.sh`. You may pass the same options and arguments to
this script as you would to `npm run e2e-tests` or `npx playwright test`.

> [!CAUTION] If you try to run `yarn start` instead of running it through docker, you'll notice it
> doesn't work because the gateway can't access your local port from inside a container. 2
> [!CAUTION] If you try to run `npm run start` instead of running it through docker, you'll notice
> it doesn't work because the gateway can't access your local port from inside a container. 2
> solutions:
>
> - run all the components locally (you might keep Postgres and Valkey in containers)
Expand All @@ -63,9 +64,9 @@ these videos as artifacts.

You may also want to explore the documentation of the test framework
[Playwright](https://playwright.dev/). For example, try launching each test independently using
`yarn playwright test --ui`, debug a test with `yarn playwright test --debug`, or launch a specified
test of a specified test file with a specified browser once with for example
`yarn playwright test 011-op-times-and-stops-tab.spec.ts -g "should correctly set and display times and stops tables" --project=firefox --retries=0`.
`npm run playwright test --ui`, debug a test with `npm run playwright test --debug`, or launch a
specified test of a specified test file with a specified browser once with for example
`npm run playwright test 011-op-times-and-stops-tab.spec.ts -g "should correctly set and display times and stops tables" --project=firefox --retries=0`.

## Design rules

Expand Down Expand Up @@ -106,8 +107,8 @@ organized in folders.
**The components propose the main JS/TS file and eventually another folder with same name containing
some minor subcomponents linked to.**

- components/
- views/
- components/
- views/
- [editor/](#infrastructure-editor-editor)
- components/
- [opendata/](#opendata-importation-opendata)
Expand Down Expand Up @@ -210,8 +211,8 @@ All common code (and shared components) supposed to be in `common/`.

- ESLint is used as linter and prettier as formatter. Both are configured as devDependencies to
enforce default eslint configuration eventually overidden by
[airbnb rules](https://airbnb.io/javascript/) translation. A few rules (see eslintrc) has
been disabled and will be re-enabled in the near future):
[airbnb rules](https://airbnb.io/javascript/) translation. A few rules (see eslintrc) has been
disabled and will be re-enabled in the near future):
- 'no-named-as-default': 'off',
- 'react/jsx-props-no-spreading': 0,
- 'react/static-property-placement': 0,
Expand All @@ -225,7 +226,7 @@ All common code (and shared components) supposed to be in `common/`.
[Prettier - Code Formatter Extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
and follow instructions.

You may also use `yarn lint-fix` to format/lint.
You may also use `npm run lint-fix` to format/lint.

## Dependencies

Expand All @@ -252,12 +253,15 @@ You may also use `yarn lint-fix` to format/lint.
- jsdocs

### Updating Dependencies
When `package.json` changes (new packages or updated versions), developers may have issues running the app with Docker. New packages or versions might not be recognized by Docker.

When `package.json` changes (new packages or updated versions), developers may have issues running
the app with Docker. New packages or versions might not be recognized by Docker.

To fix this, follow these steps:

1. After pulling new changes, run `yarn install` to update local dependencies.
2. If issues persist, delete `node_modules` and run `yarn install` again.
3. Run `docker compose build --no-cache` to rebuild Docker images from scratch with new dependencies.
1. After pulling new changes, run `npm install` to update local dependencies.
2. If issues persist, delete `node_modules` and run `npm install` again.
3. Run `docker compose build --no-cache` to rebuild Docker images from scratch with new
dependencies.

This ensures developers can run the app with the latest dependencies using Docker.
2 changes: 1 addition & 1 deletion front/docker/Dockerfile.devel
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,4 @@ WORKDIR /app
# Start the app
COPY docker/dev-entrypoint.sh /
ENTRYPOINT ["/dev-entrypoint.sh"]
CMD ["sh", "-c", "id && yarn install && exec yarn start-container"]
CMD ["sh", "-c", "id && npm install && exec npm run start-container"]
6 changes: 3 additions & 3 deletions front/docker/Dockerfile.nginx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ FROM node:20-bookworm AS build
WORKDIR /app

# Build dependencies
COPY package.json yarn.lock /app/
RUN yarn install --frozen-lockfile
COPY package.json package-lock.json /app/
RUN npm install --frozen-lockfile

# Generate the licenses file and build
COPY . /app
RUN yarn generate-licenses && yarn build
RUN npm run generate-licenses && npm run build

### TESTS STAGE

Expand Down
4 changes: 2 additions & 2 deletions front/docker/Dockerfile.playwright
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
ARG PLAYWRIGHT_VERSION=latest
FROM mcr.microsoft.com/playwright:$PLAYWRIGHT_VERSION

COPY front/package.json front/yarn.lock /app/front/
COPY front/package.json front/package-lock.json /app/front/
WORKDIR /app/front
RUN yarn install --frozen-lockfile
RUN npm install --frozen-lockfile

COPY front /app/front/
COPY tests /app/tests
Expand Down
4 changes: 2 additions & 2 deletions front/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
Loading

0 comments on commit 52ef1ae

Please sign in to comment.