Fix Docker and upgrade Node

.github/workflows/build.yml

@@ -23,6 +23,9 @@ jobs:
           node-version: 18
           cache: 'yarn'
 
+      - name: "Set Yarn to correct version"
+        run: corepack enable
+
       - name: "Install dependencies 📦"
         run: yarn
 

.github/workflows/javascript-tests.yml

@@ -27,8 +27,10 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-        cache: 'yarn' 
+        cache: 'yarn'
         # https://github.com/actions/setup-node?tab=readme-ov-file#caching-global-packages-data
+    - name: Set Yarn to correct version
+      run: corepack enable
     - run: yarn install --immutable
       # https://yarnpkg.com/cli/install#options
     - run: yarn test

.github/workflows/pages.yml

@@ -5,10 +5,10 @@ on:
     branches: [ "main" ]
 
   workflow_dispatch:
-  
+
 permissions:
   contents: write
-  
+
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
@@ -17,11 +17,12 @@ jobs:
       - name: Checkout 🛎️
         uses: actions/checkout@v3
 
-      - name: Install and Build 🔧 
+      - name: Install and Build 🔧
         run: |
+          corepack enable
           yarn
           yarn run storybook:build
-          
+
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4
         with:

.github/workflows/release.yml

@@ -27,6 +27,9 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
           scope: "@conda-store-ui"
 
+      - name: "Set Yarn to correct version"
+        run: corepack enable
+
       - name: "Install dependencies 📦"
         run: yarn
 

.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,17 @@
+# Keep this in sync with the Node version specified for the Conda dev environment (environment_dev.yml)
 FROM node:18.18-alpine3.18
 
+RUN corepack enable
+
 WORKDIR /usr/src/app
 
 COPY . .
 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,49 +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-incubator.github.io/conda-store-ui/?path=/docs/docs-configuration--page) 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: [Local development setup for conda-store-ui codebase](https://conda.store/community/contribute/contribute/local-setup-ui).
 
 ### Making a release 🚀
 
@@ -100,30 +58,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
-   ```
+5. Use Corepack to set Yarn to correct version
+5. Use Yarn to install JavaScript dependencies
 6. Build app
-   ```sh
-   yarn build
-   ```
 
 To run the tests, you will need to run 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=18.18
   - pytest
   - pip
   - pip: