Switch to pnpm

.github/workflows/e2e-test.yml

@@ -31,43 +31,54 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
+
       - name: Set up Python ${{ matrix.python-version }}
         uses: actions/setup-python@v3
         with:
           python-version: ${{ matrix.python-version }}
+
       - name: Add conda to system path
         run: |
           # $CONDA is an environment variable pointing to the root of the miniconda directory
           echo $CONDA/bin >> $GITHUB_PATH
+
       - name: Install ldap dependencies
         run: sudo apt-get -y install libsasl2-dev libldap2-dev libssl-dev
+
       - name: Install dependencies
         run: |
           conda install -c conda-forge mamba
           mamba env update --file conda-environment.yml --name base
           pip install -e .
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.x
+
       - name: Cache UI dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
+            ~/setup-pnpm/node_modules/.bin/store
             ~/.cache/Cypress
-            ui/node_modules
-          key: cache-${{ runner.os }}-${{ hashFiles('ui/package-lock.json') }}
+          key: cache-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
 
       - name: Install UI dependencies
-        run: npm install --prefix ./ui --legacy-peer-deps
+        run: pnpm --prefix ui install
 
       - name: Build UI
-        run: npm run --prefix ./ui build
+        run: pnpm --prefix ui build
         env:
           DISABLE_ESLINT_PLUGIN: true
 
-      - name: Run MXCuBE backend
+      - name: Start MXCuBE server
         run: mxcubeweb-server -r ./test/HardwareObjectsMockup.xml/ --static-folder $(pwd)/ui/build/ -L debug &
 
       - name: Run Cypress
-        run: npm run --prefix ./ui e2e
+        run: pnpm --prefix ui e2e
 
       - uses: actions/upload-artifact@v3
         if: failure()

.github/workflows/format_and_lint_ui.yml

@@ -41,14 +41,28 @@ jobs:
         run: |
           conda install -c conda-forge mamba
           mamba env update --file conda-environment.yml --name base
-
-      - name: Install dependencies
-        run: |
           pip install -e .
-          npm install --prefix ./ui --legacy-peer-deps
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.x
+
+      - name: Cache UI dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/setup-pnpm/node_modules/.bin/store
+            ~/.cache/Cypress
+          key: cache-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+
+      - name: Install UI dependencies
+        run: pnpm --prefix ui install
 
       - name: Check formatting
-        run: npm run --prefix ./ui prettier
+        run: pnpm --prefix ui prettier
 
   lint:
     runs-on: ubuntu-latest
@@ -80,11 +94,25 @@ jobs:
         run: |
           conda install -c conda-forge mamba
           mamba env update --file conda-environment.yml --name base
-
-      - name: Install dependencies
-        run: |
           pip install -e .
-          npm install --prefix ./ui --legacy-peer-deps
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.x
+
+      - name: Cache UI dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/setup-pnpm/node_modules/.bin/store
+            ~/.cache/Cypress
+          key: cache-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+
+      - name: Install UI dependencies
+        run: pnpm --prefix ui install
 
       - name: Lint
-        run: npm run --prefix ./ui eslint
+        run: pnpm --prefix ui eslint

README.md

@@ -5,6 +5,7 @@
 <p align="center"><img src="http://mxcube.github.io/mxcube/img/mxcube_logo20.png" width="125"/></p>
 
 # MXCuBE-Web
+
 MXCuBE-Web is the latest generation of the data acquisition software MXCuBE (Macromolecular Xtallography Customized Beamline Environment). The project started in 2005 at [ESRF](http://www.esrf.eu), and has since then been adopted by other institutes in Europe. In 2010, a collaboration agreement has been signed for the development of MXCuBE with the following partners:
 
 - ESRF
@@ -26,12 +27,10 @@ MXCuBE-Web is developed as a web application and runs in any recent browser. The
 
 The underlaying beamline control layer is implemented using the library [**mxcubecore**](https://github.com/mxcube/mxcubecore) previously known as [HardwareRepository](https://github.com/mxcube/HardwareRepository). The **mxcubecore** module is compatable with both MXCuBE-Web and the [MXCuBE-Qt application](https://github.com/mxcube/mxcubeqt).
 
-
 |                                                       Data collection                                                       |                                                       Sample grid                                                       |
 | :-------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: |
 | ![datacollection-view](https://user-images.githubusercontent.com/4331447/42496925-d983bf3e-8427-11e8-890e-898dda649101.png) | ![samplegrid-view](https://user-images.githubusercontent.com/4331447/42496937-e8547b34-8427-11e8-9447-645e6d7f1dc5.png) |
 
-
 Latest information about the MXCuBE project can be found on the
 [project webpage](http://mxcube.github.io/mxcube/).
 
@@ -62,6 +61,7 @@ Gabadinho, J. et al. (2010). MxCuBE: a synchrotron beamline control environment
 We recommend using conda to create an isolated environment, conda can be downloaded [here](https://docs.conda.io/en/latest/miniconda.html#linux-installers).
 
 ### 1. Create a folder that will contain both `mxcubeweb` and `mxcubecore`
+
 ```
 mkdir mxcube
 cd mxcube
@@ -75,6 +75,7 @@ git clone https://github.com/mxcube/mxcubecore.git
 ```
 
 ### 3. Create Conda environment `mxcubeweb`
+
 We recommend using conda a convenience and create a seperate environemnt for libraries and python version. This, though, is not compulsory and one can use any other tool or configuration for installing the application and the necessary third party libraries.
 
 Create Conda environment `mxcubeweb` using the conda environment file in mxcubeweb. The installation of the dependencies in the environment takes a few minutes.
@@ -98,45 +99,45 @@ conda activate mxcubeweb
 
 ```
 poetry install
+npm install --global pnpm@8
 ```
 
 ### 6. Install front-end dependencies and build the UI
 
 ```
-npm install --legacy-peer-deps
-# (NB --legacy-peer-deps is for the moment needed for the testing library Cypress)
-npm run build
+pnpm --prefix ui install
+pnpm --prefix ui build
 ```
 
-### 7. Running the application (server)
+### 7. Starting the MXCuBE server
+
 ```
-# Start redis-server (if not already running)
-# Open a new terminal:
+# Activate the conda environement and start the Redis server (if not already running)
 conda activate mxcubeweb
 redis-server
 
-# In the previous terminal:
-# The paths passed below needs to be the full path (thats why there is an extra `$(pwd)` in the command below) 
-# to the HardwareObjectsMockup.xml and build directories.
-mxcubeweb-server -r $(pwd)/mxcubeweb/test/HardwareObjectsMockup.xml/ --static-folder $(pwd)/mxcubeweb/ui/build/ -L debug
+# In a separate terminal, start the MXCuBE server (note the use of `$(pwd)` to specify absolute paths):
+mxcubeweb-server -r $(pwd)/test/HardwareObjectsMockup.xml/ --static-folder $(pwd)/ui/build/ -L debug
 ```
 
 _Running the above should give something similar to_
 ![mxcube-backend](https://github.com/mxcube/mxcubeweb/assets/4331447/33c01fd3-14fe-4437-a2d2-6525e739f9b3)
 
-### 8. Running the MXCuBE-WEB front-end
+### 8. Serving the MXCuBE-Web front-end application
 
-All that is needed to run the application is to start the server and point your browser to http://localhost:8081, which will serve the prebuilt client (if any). 
+All that is needed to run the application is to start the server and point your browser to http://localhost:8081, which will serve the prebuilt client (if any).
 
 _The test username is `idtest0` and the password can be any string (except `wrong` and `ispybDown`, those are used to emulate different behaviors), you can use `test` as a password for example:_
 ![mxcube-login](https://github.com/mxcube/mxcubeweb/assets/4331447/a29f9c55-a4e1-474e-89cc-854f1c3c24d8)
 
 The client is not built if nothing appears or you get a "404 page not found" error when browsing localhost:8081. Follow the instructions in step 6 "Install front-end dependencies and build the UI" to build a client .
 
-### 9. Installing MXCUBE-WEB for development
+### 9. Installing MXCUBE-Web for development
+
 Please read the [contributing guidelines](https://github.com/mxcube/mxcubeweb/blob/develop/CONTRIBUTING.md) before getting started with the development.
 
 The additional tools for development are in the conda-environment-dev.yml file, the environment created above needs to be updated with this.
+
 ```
 # Make sure the environment created above is activated
 conda activate mxcubeweb
@@ -145,7 +146,7 @@ conda activate mxcubeweb
 conda env update --file conda-environment-dev.yml
 ```
 
-Its recommended to install mxcubeweb and mxcubecore as links to be able to add breakpoints and debug the application easier.
+It's recommended to install mxcubeweb and mxcubecore as links to be able to add breakpoints and debug the application more easily.
 This can be done with `pip`.
 
 ```
@@ -156,55 +157,52 @@ pip install -e .
 pip install -e .
 ```
 
-The above makes it possible to add break points directly in the "checked out code".
-
-Before running any test, make sure that the local *Redis* server is running. For example with the `mxcubeweb` *conda* environment activated in a terminal, run the `redis-server` command.
-
-#### 9.1 Running tests
+#### 9.1 Running the back-end tests
 
-The tests are located in the test folder and are executed with `pytest`
+The tests are located in the test folder and are executed with `pytest`.
 
 ```
-# Run pytest In the root of the mxcubeweb directory
-cd mxcubeweb
+# Make sure that the conda environment is activated and that the local Redis server is running:
+conda activate mxcubeweb
+redis-server
+
+# In a separate terminal, activate the environment again and run pytest from the project root of mxcubeweb:
+conda activate mxcubeweb
 pytest
 ```
 
 _The output should look something like the following:_
 ![image](https://github.com/mxcube/mxcubeweb/assets/4331447/379fa92e-566b-47e5-8522-cacfa9f8de2d)
 
-#### 9.2 Running the front-end development server
-The front end development server, webpack development server, listens to changes on the filesystem and builds (re-builds) the UI when a change are made. This makes it very easy and fast to see how a change effects the UI and makes debugging alot easier. The developmen server listens on port **3000**
+#### 9.2 Starting the front-end development server
 
-```
-# The front-end needs the backend to run so before starting the 
-# development server open a new terminal and run (as in step 7):
+The front-end development server listens to changes on the file system and re-builds the UI when changes are made. This makes it very easy and fast to see how changes affect the UI. The development server listens on port **3000**.
 
+```
+# Activate the Conda environment and start the MXCuBE server (cf. step 7)
 conda activate mxcubeweb
-mxcubeweb-server -r $(pwd)/mxcubeweb/test/HardwareObjectsMockup.xml/ --static-folder $(pwd)/mxcubeweb/ui/build/ -L debug
+mxcubeweb-server -r $(pwd)/test/HardwareObjectsMockup.xml/ --static-folder $(pwd)/ui/build/ -L debug
 
-# Enter the `ui` folder and issue:
-npm run start
+# Enter the `ui` folder and start the front-end developement server:
+cd ui
+pnpm start
+
+# Note that you can also run any pnpm script from the root folder with:
+pnpm --prefix ui <script>
 ```
 
-The above will automatically open a browser with the URL: http://localhost:3000
+Your default browser will open automatically at http://localhost:3000.
 
-#### 9.4 Running the end to end (e2e) tests
+#### 9.4 Running the end-to-end tests (E2E)
 
 ```
-# Keep the backend running, and issue in the mxcubeweb root:
-npm run --prefix ./ui e2e
-
+# With the MXCuBE server still running, run:
+pnpm e2e
 ```
 
 _This should give a result looking something like:_
 ![image](https://github.com/mxcube/mxcubeweb/assets/4331447/e3d0eda7-caa1-44c2-9791-05ef482b81ad)
 
-
 #### 9.5 Ready to develop
-Use your favorite editor to start working with the code. Read the [contributing guidelines](https://github.com/mxcube/mxcubeweb/blob/develop/CONTRIBUTING.md) and check that linting tools are setup correctly. There are settings [files](https://github.com/mxcube/mxcubeweb/tree/develop/.vscode) for visual studio code in the repository.
-
-
-
-
 
+Use your favorite editor to start working with the code. Read the [contributing guidelines](https://github.com/mxcube/mxcubeweb/blob/develop/CONTRIBUTING.md) and check that linting tools are setup correctly. There are settings [files](https://github.com/mxcube/mxcubeweb/tree/develop/.vscode) for visual studio code in the repository.

conda-install.sh

@@ -46,15 +46,15 @@ mxcube_download() {
 }
 
 init_conda() {
-  command conda create --name mxcube-web
-  command conda env update --name mxcube-web --file conda-environment.yml
-  command conda activate mxcube-web
+  command conda create --name mxcubeweb
+  command conda env update --name mxcubeweb --file conda-environment.yml
+  command conda activate mxcubeweb
 }
 
 
 install_node() {
-  command conda install nodejs
-  command npm install
+  command npm install --global pnpm@8
+  command pnpm --prefix ui install
 }
 
 mxcube_download

debian-install.sh

@@ -58,7 +58,8 @@ install_node() {
   source "$NVM_DIR/nvm.sh"
   source "$NVM_DIR/bash_completion"
   command nvm install --lts
-  command npm install
+  command npm install --global pnpm
+  command pnpm --prefix ui install
 }
 
 mxcube_download

docker/docker-entrypoint.sh

@@ -9,8 +9,9 @@ vncserver :1 -geometry 1680x1050 -depth 24 &
 
 cd /opt/mxcube3
 
-npm install --legacy-peer-deps
-npm start &
+npm install --global pnpm@8
+pnpm --prefix ui install
+pnpm --prefix ui start &
 
 redis-server &
 

docker/mxcube

@@ -8,4 +8,4 @@ source "$NVM_DIR/bash_completion"
 
 redis-server&
 python mxcube3-server -r test/HardwareObjectsMockup.xml --log-file mxcube.log&
-npm start&
+pnpm --prefix ui start &

ui/.gitignore

@@ -1,24 +1,13 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
 # dependencies
-/node_modules
-/.pnp
-.pnp.js
+/node_modules/
 
 # testing
-/coverage
-/cypress/debug
+/coverage/
+/cypress/debug/
 
 # production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+/build/
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# environment
+/.env.local
+/.env.*.local

ui/.npmrc

@@ -1,2 +1,5 @@
+# Enforce Node and pnpm versions as specified in `package.json`
+engine-strict=true
+
 # Save exact dependency versions in `package.json`
 save-prefix=""