diff --git a/Dockerfile.ui.tilt b/Dockerfile.ui.tilt index 956c9224b4..8f3bb128de 100644 --- a/Dockerfile.ui.tilt +++ b/Dockerfile.ui.tilt @@ -4,6 +4,7 @@ WORKDIR /app/ui COPY ui /app/ui -RUN npm install -g corepack@0.34.6 && corepack enable && pnpm install +RUN npm install -g corepack@0.34.6 && corepack enable && pnpm install --frozen-lockfile + +ENTRYPOINT ["pnpm", "start"] -ENTRYPOINT ["pnpm", "start"] \ No newline at end of file diff --git a/Makefile b/Makefile index 8c7936c38b..dd9ad2aab7 100644 --- a/Makefile +++ b/Makefile @@ -662,8 +662,17 @@ install-go-tools-local: dep-ui: test-tools-image $(call run-in-test-client,make dep-ui-local) +.PHONY: dep-ui-local dep-ui-local: - cd ui && pnpm install + cd ui && pnpm install --frozen-lockfile + +.PHONY: run-pnpm +run-pnpm: test-tools-image + $(call run-in-test-client,make 'PNPM_COMMAND=$(PNPM_COMMAND)' run-pnpm-local) + +.PHONY: run-pnpm-local +run-pnpm-local: + cd ui && pnpm $(PNPM_COMMAND) start-test-k8s: go run ./hack/k8s diff --git a/Tiltfile b/Tiltfile index 5a040aa988..f35b2b52a1 100644 --- a/Tiltfile +++ b/Tiltfile @@ -275,7 +275,7 @@ docker_build( only=['ui'], live_update=[ sync('ui', '/app/ui'), - run('sh -c "cd /app/ui && pnpm install"', trigger=['/app/ui/package.json', '/app/ui/pnpm-lock.yaml']), + run('sh -c "cd /app/ui && pnpm install --frozen-lockfile"', trigger=['/app/ui/package.json', '/app/ui/pnpm-lock.yaml']), ], ) diff --git a/docs/developer-guide/development-cycle.md b/docs/developer-guide/development-cycle.md index 53fc247459..b8aa3d4733 100644 --- a/docs/developer-guide/development-cycle.md +++ b/docs/developer-guide/development-cycle.md @@ -23,12 +23,37 @@ All following commands in this guide assume the namespace is already set. kubectl config set-context --current --namespace=argocd ``` -### Pull in all build dependencies +### Pull in all UI build dependencies -As build dependencies change over time, you have to synchronize your development environment with the current specification. In order to pull in all required dependencies, issue: +As build dependencies change over time, you have to synchronize your development environment with the current specification. In order to pull in all required UI dependencies (NPM packages), issue: * `make dep-ui` or `make dep-ui-local` +These commands run `pnpm install --frozen-lockfile` command, which only brings package versions that are defined in the `pnpm-lock.yaml` file without trying to resolve and download new package versions. + +### Updating UI build dependencies + +If you need to add new UI dependencies or update existing ones you need +to run a `pnpm` command in the ./ui directory to resolve and download new packages. + +You can run it in the docker container using the `make run-pnpm` make target. + +For example, to add new dependency `newpackage` you may run command like + +```shell +make run-pnpm PNPM_COMMAND="add newpackage --ignore-scripts" +``` + +To upgrade an existing package: + +```shell +make run-pnpm PNPM_COMMAND="update existingpackage@1.0.2 --ignore-scripts" +``` + +Please consider using best security practices when adding or upgrading +NPM dependencies, such as this +[guide](https://github.com/lirantal/npm-security-best-practices/blob/main/README.md). + ### Generate API glue code and other assets Argo CD relies on Google's [Protocol Buffers](https://developers.google.com/protocol-buffers) for its API, and this makes heavy use of auto-generated glue code and stubs. Whenever you touched parts of the API code, you must re-generate the auto generated code. diff --git a/ui-test/Dockerfile b/ui-test/Dockerfile index b49da98ca5..7672949c2c 100644 --- a/ui-test/Dockerfile +++ b/ui-test/Dockerfile @@ -19,7 +19,9 @@ RUN dpkg-divert --add --rename --divert /opt/google/chrome/google-chrome.real /o WORKDIR /usr/src/app COPY package*.json ./ + COPY pnpm-lock.yaml ./ -RUN npm install -g corepack@0.34.6 && corepack enable && pnpm install +RUN npm install -g corepack@0.34.6 && corepack enable && pnpm install --frozen-lockfile + COPY . . diff --git a/ui/README.md b/ui/README.md index 2c9d3c687e..b103f2b1b7 100644 --- a/ui/README.md +++ b/ui/README.md @@ -7,7 +7,7 @@ Web UI for [Argo CD](https://github.com/argoproj/argo-cd). ## Getting started 1. Install [NodeJS](https://nodejs.org/en/download/) and [pnpm](https://pnpm.io). On macOS with [Homebrew](https://brew.sh/), running `brew install node pnpm` will accomplish this. - 2. Run `pnpm install` to install local prerequisites. + 2. Run `pnpm install --frozen-lockfile` to install local prerequisites. 3. Run `pnpm start` to launch the webpack dev UI server. 4. Run `pnpm build` to bundle static resources into the `./dist` directory.