refl1d-web-gui

Web-based client for Refl1D webview GUI

Setting up development environment

This package depends on the bumps-webview-client package, which can be installed in a few ways:

Install bumps client from NPM

This will get the most recent version that has been published to npmjs.com (or update an existing version)

npm install bumps-webview-client@latest

Use current git version

This gives you the most up-to-date version, but requires a little setup

N.B. For the example below, bumps and refl1d have been cloned to the ~/dev/ folder. Your install location will be different...

1. Create a conda environment

   conda create -n refl1d-dev python nodejs
   conda activate refl1d-dev

2. Clone the bumps repository (only need to do once)

   cd ~/dev
   git clone https://github.com/bumps/bumps
   cd bumps
   git checkout webview

3. Install bumps library in development mode

   pip install -e .
   pip install -r webview-requirements

4. Navigate to the webview client folder

   cd ~/dev/bumps/bumps/webview/client

5. Install dependencies

   npm install

6. Add bumps-webview-client to npm links

   npm link

7. Clone the refl1d repository

   cd ~/dev
   git clone https://github.com/reflectometry/refl1d
   cd refl1d
   git checkout webview

8. Install refl1d python library

   pip install -e .

9. Navigate to webview client folder

   cd ~/dev/refl1d/refl1d/webview/client

10. Install dependencies

    npm install

11. Link to local bumps-webview-client folder (this overwrites the bumps-webview-client installation from npm install with a hard link to the local folder)

    npm link bumps-webview-client

12. Build the client

    npm run build

Rebuilding after changes

Now you can run the server, and it will use this locally built client. After changes to the source code (to incorporate new client features):

cd ~/dev/bumps
git pull
cd ~/dev/refl1d
git pull
cd ~/dev/refl1d/refl1d/webview/client
npm run build

Hot-reloading client preview

This mode is useful for rapid prototyping (esp. trying to fix styling in the client)

cd ~/dev/refl1d/refl1d/webview/client
npx vite

... this will start a local server for the rendered client at something like http://localhost:5173 (a link will appear in the console).

In a different terminal, you have to also start the python server, which will be listening on a different port, e.g.

python -m refl1d.webview.server --port 8888

Then, in your browser, you would navigate to the server that is rendering the client code, but also passing information on where the API server is located, e.g.

https://localhost:5173/?server=http://localhost:8888

Changes made to the client code, e.g. the .vue files, will be immediately reflected in the running client.

(When using a pre-built client, the python API server will also serve the static client files, but for hot-reloading we want those two services separated.)

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Publishing new client versions:

(...after checking to make sure there aren't extraneous files in this folder)

npm version patch
npm publish

and then

git commit package.json -m "webview client version bump"
git pull
git push