Skip to content
Marcus Oscarsson edited this page Sep 20, 2023 · 58 revisions

MXCuBE-Web is the latest generation of the data acquisition software MXCuBE. It is developed as a web application and runs in any recent browser. The application is built using standard web technologies and does not require any third party plugins to be installed in order to function. Being a web application, it's naturally divided into a server and client part. The communication between the client and server are made using HTTP/HTTPS and web-sockets. It's strongly recommended to use HTTPS, SSL/TLS encrypted HTTP. The traffic passes through the conventional HTTP/HTTPS ports minimizing the need for special firewall or proxy settings to get the application to work.

HardwareRepository and mxcubecore

The underlying beamline control layer is implemented using the library mxcubecore previously known as HardwareRepository. The mxcubecore module is compatible with both MXCuBE-WEB the MXCuBE-Qt application.

Installing using conda

We recommend using conda to create an isolated environment, conda can be downloaded here.

1. Create a folder that will contain both mxcubeweb and mxcubecore

mkdir mxcube
cd mxcube

2. Clone mxcubeweb and mxcubecore

git clone https://github.com/mxcube/mxcubeweb.git
git clone https://github.com/mxcube/mxcubecore.git

3. Create Conda environment mxcubeweb

Create Conda environment mxcubeweb using the conda environment file in mxcubeweb. The installation of the dependencies in the environment takes a few minutes.

The name of the environment is located at the top of file conda-environment.yml. It can be changed from the command line with --name <env-name>.

cd mxcubeweb
conda env create -f conda-environment.yml
# or (to pass a different name)
conda env create -f conda-environment.yml --name another_name

4. Activate the environment

conda activate mxcubeweb

5. Install remaining dependencies

poetry install

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

7. Running the application (server)

# Start redis-server (if not already running)
# Open a new terminal:
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

Running the above should give something similar to mxcube-backend

8. Running the MXCuBE-WEB front-end

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 i.e "test". mxcube-login

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

Please read the contributing guidelines 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

# To install the additional dependencies run:
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. This can be done with pip.

# In the project root of mxcubeweb (please note that the . (period) is important):
pip install -e .

# In the project root of mxcubecore:
pip install -e .

The above makes it possible to add break points directly in the "checked out code"

9.1 Running tests

The tests are located in the test folder and are executed with pytest

# Run pytest In the root of the mxcubeweb directory
cd mxcubeweb
pytest

The output should look something like the following: image

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

# The front-end needs the backend to run so before starting the 
# development server open a new terminal and run (as in step 7):

conda activate mxcubeweb
mxcubeweb-server -r $(pwd)/mxcubeweb/test/HardwareObjectsMockup.xml/ --static-folder $(pwd)/mxcubeweb/ui/build/ -L debug

# Enter the `ui` folder and issue:
npm run start

The above will automatically open a browser with the URL: http://localhost:3000

9.4 Running the end to end (e2e) tests

# Keep the backend running, and issue in the mxcubeweb root:
npm run --prefix ./ui e2e

This should give a result looking something like: image

9.5 Ready to develop

Use your favorite editor to start working with the code. Read the contributing guidelines and check that linting tools are setup correctly. There are settings files for visual studio code in the repository.