Fix Docker and upgrade Node (#415)

Co-authored-by: Tania Allard <[email protected]>

.github/workflows/javascript-tests.yml

@@ -17,20 +17,26 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 20.x, 22.x]
+        node-version: [20.x, 22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
       - name: "Checkout repository 🛎"
         uses: actions/checkout@v4
+
+      - name: "Set Yarn to correct version 📌"
+        run: corepack enable
+
       - name: "Setup Node.js ${{ matrix.node-version }}"
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: "yarn"
           # https://github.com/actions/setup-node?tab=readme-ov-file#caching-global-packages-data
+
       - name: "Install dependencies 📦"
         run: yarn install --immutable
         # https://yarnpkg.com/cli/install#options
+
       - name: "Run tests 🧪"
         run: yarn test

.github/workflows/pages.yml

@@ -19,6 +19,7 @@ jobs:
 
       - name: "Install and Build 🔧"
         run: |
+          corepack enable
           yarn
           yarn run storybook:build
 

.github/workflows/release.yml

@@ -25,10 +25,16 @@ jobs:
       - name: "Checkout repository 🛎"
         uses: actions/checkout@v4
 
+      - name: "Set Yarn to correct version 📌"
+        run: corepack enable
+
+      # Setup .npmrc file to publish to npm
       - name: "Set up Node.js 🧶"
         uses: actions/setup-node@v4
         with:
-          node-version: "20.x"
+          node-version: "22.x"
+          registry-url: "https://registry.npmjs.org"
+          scope: "@conda-store-ui"
           cache: "yarn"
 
       - name: "Install dependencies 📦"

.github/workflows/test.yml

@@ -35,6 +35,9 @@ jobs:
         run: |
           cp .env.example .env
 
+      - name: "Set Yarn to correct version 📌"
+        run: corepack enable
+
       - name: "Install Dependencies 📦"
         run: |
           sudo apt install wait-for-it -y

.yarnrc.yml

@@ -1,3 +1 @@
 nodeLinker: node-modules
-
-yarnPath: .yarn/releases/yarn-4.4.0.cjs

Dockerfile

@@ -1,14 +1,21 @@
-FROM node:18.18-alpine3.18
+# Keep this in sync with the Node version specified for the Conda dev environment (in environment_dev.yml)
+FROM node:22-alpine
+
+RUN corepack enable
 
 WORKDIR /usr/src/app
 
 COPY . .
+# Use the --immutable flag as a precaution. This guarantees that the Docker
+# build will fail if `yarn install` results in a different yarn.lock file than
+# the one checked into the repo. This could happen for example if the version of
+# Yarn used in one dev environment differs from the version used here.
 RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn \
-    yarn install --network-timeout 600000 && \
+    yarn install --immutable --network-timeout 600000 && \
     if [[ ! -f ".env" ]]; then mv .env.example .env; fi;
 
 
 
 EXPOSE 8000
 
-CMD [ "yarn", "webpack-dev-server", "--port", "8000" ]
+CMD [ "yarn", "run", "start:ui" ]

README.md

@@ -25,58 +25,7 @@ To learn how to use conda-store-ui alongside conda-store, please visit [the cond
 
 ## Development 👩🏻‍💻
 
-To get started with conda-store-ui development, there are a couple of options, depending on the type of changes you are working on.
-This guide will help you to set up your local development environment.
-
-### Prerequisites 📋
-
-Before setting up conda-store-ui, you must prepare your environment.
-
-We use [Docker Compose](https://docs.docker.com/compose/) to set up the infrastructure. Before starting ensure that you
-have Docker Compose installed.
-If you need to install Docker Compose, please see their [installation documentation](https://docs.docker.com/compose/install/)
-
-1. Clone the [conda-store-ui](https://github.com/conda-incubator/conda-store-ui.git) repository.
-2. Copy `.env.example` to `.env`. All default settings should work, but if you want to test against a different version
-   of conda-store-server, you can specify if in the `.env` file by setting the `CONDA_STORE_SERVER_VERSION` variable to
-   the desired version.
-   Refer to the [Configuration documentation](https://conda.store/conda-store-ui/how-tos/configure-ui/) for more
-   information on the `.env` file.
-
-### Local Development with conda-store-ui running in Docker 🐳
-
-Running conda-store-ui in Docker is the most straightforward way to set up your local development environment.
-
-1. Run `yarn install`. This will download the needed JavaScript dependencies into a directory named `node_modules/`.
-   This directory will later be copied into the `conda-store-ui` Docker container for use at runtime by the Conda Store
-   UI app.
-2. Run `yarn run start:docker` to start the entire development stack.
-3. Open you local browser and go to [http://localhost:8000](http://localhost:8000) so see conda-store-ui.
-4. You can then log in using the default username of `username` and default password of `password`.
-
-Hot reloading is enabled, so when you make changes to source files, your browser will reload and reflect the changes.
-
-### Local Development without running conda-store-ui in Docker 💻
-
-This setup still uses Docker for supporting services but runs conda-store-ui locally.
-
-#### Set up your environment
-
-This project uses [conda](https://conda.io) for package management.
-To set up conda, please see their [installation documentation](https://docs.conda.io/projects/conda/en/latest/user-guide/install/index.html).
-
-1. Change to the project root `cd conda-store-ui`
-2. From the project root create the conda environment `conda env create -f environment_dev.yml`
-3. Activate the development environment `conda activate cs-ui-dev-env`
-4. Install yarn dependencies `yarn install`
-
-#### Run the application
-
-1. Run `yarn run start` and wait for the application to finish starting up
-2. Open you local browser and go to [http://localhost:8000](http://localhost:8000) so see conda-store-ui.
-3. You can then log in using the default username of `username` and default password of `password`.
-
-Hot reloading is enabled, so when you make changes to source files, your browser will reload and reflect the changes.
+Please refer to the `conda-store` docs: [Contribute code - conda-store-ui](https://conda.store/community/contribute/contribute-code#conda-store-ui).
 
 ### Making a release 🚀
 
@@ -102,30 +51,25 @@ yarn test
 
 Steps to install and set up:
 
+```
+conda env create -f environment_dev.yml
+conda activate cs-ui-dev-env
+playwright install chromium
+cp .env.example .env
+corepack enable
+yarn install --immutable
+yarn build
+```
+
+Line by line, here's what the commands above do:
+
 1. Create Conda environment
-   ```sh
-   conda env create -f environment_dev.yml
-   ```
 2. Activate Conda environment
-   ```sh
-   conda activate cs-ui-dev-env
-   ```
 3. Install Playwright-usable browser
-   ```sh
-   playwright install chromium
-   ```
 4. Copy environment variables
-   ```sh
-   cp .env.example .env
-   ```
-5. Install JavaScript dependencies
-   ```sh
-   yarn install --immutable
-   ```
-6. Build app
-   ```sh
-   yarn build
-   ```
+5. Use Corepack to set Yarn to correct version
+6. Use Yarn to install JavaScript dependencies
+7. Build app
 
 To run the tests, you will need to run the following commands in two separate terminal windows
 or tabs:

docker-compose.yml

@@ -81,7 +81,7 @@ services:
 
   conda-store-ui:
     build: .
-    command: "yarn run start:ui --port 8000 --history-api-fallback"
+    command: "yarn run start:ui"
     profiles:
       - local-dev
     ports:
@@ -91,7 +91,8 @@ services:
         condition: service_healthy
     platform: linux/amd64
     volumes:
-      - .:/usr/src/app
+      - ./src:/usr/src/app/src
+      - ./style:/usr/src/app/style
     healthcheck:
       test:
         ["CMD", "curl", "--fail", "http://localhost:8000"]

environment_dev.yml

@@ -6,8 +6,9 @@ channels:
   - conda-forge
 dependencies:
   - python=3.10
-  - yarn>=4.4.0
-  - nodejs>=18.0
+  # Match the version of Node.js defined in the Dockerfile.
+  # Also, do not install Yarn separately, use Corepack (comes with Node.js).
+  - nodejs=22
   - pytest
   - pip
   - pip:

package.json

@@ -143,7 +143,7 @@
     "whatwg-fetch": "^3.6.2"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "packageManager": "[email protected]"
 }