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>
  • Loading branch information
Yohh committed Oct 24, 2024
1 parent ca461a7 commit 01593dc
Show file tree
Hide file tree
Showing 15 changed files with 21,101 additions and 11,187 deletions.
12 changes: 6 additions & 6 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -444,7 +444,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 @@ -663,7 +663,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 @@ -815,22 +815,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 @@ -949,7 +949,7 @@ jobs:
-e CI=true \
-v $PWD/front/test-results:/app/test-results \
${{ fromJSON(needs.build.outputs.stable_tags).front-tests }} \
/bin/sh -c "npx playwright install --with-deps && yarn e2e-tests"
/bin/sh -c "npx playwright install --with-deps && npm run e2e-tests"
exit $(docker wait playwright-test)
Expand Down
1 change: 0 additions & 1 deletion flake.nix
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,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
57 changes: 30 additions & 27 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,45 +20,46 @@ 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`
- 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`.

> [!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 solutions:
> [!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)
> - if on Linux, you can also launch all the containers on the host network: you can replace the
> `docker compose <something>` above with `osrd/scripts/host-compose.sh <something>`
> `docker compose <something>` above with `osrd/scripts/host-compose.sh <something>`
If the tests fail, you'll find a `front/test-results` folder that will contain videos of the fail
test executions. They might be of help to understand what's going on. Note that the CI also exports
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`, or debug a
test with `yarn playwright test --debug`.
You may also want to explore the documentation of the test framework
[Playwright](https://playwright.dev/). For example, try launching each test independently using
`npm run playwright test --ui`, or debug a test with `npm run playwright test --debug`.

## Design rules

Expand Down Expand Up @@ -100,8 +100,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 @@ -204,8 +204,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 @@ -219,7 +219,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 @@ -246,12 +246,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 --legacy-peer-deps

# 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/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 01593dc

Please sign in to comment.