Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 0 additions & 58 deletions .github/workflows/docs.yml

This file was deleted.

105 changes: 4 additions & 101 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
# yaptide web interface

## User Documentation
- [User documentation](https://yaptide.github.io/docs/) - guide for users

## For users

The development version is unstable, without many features and with a lot of bugs.
Expand All @@ -8,106 +11,6 @@ It is released automatically after every commit to the main branch of this repos

The stable version is not released yet, have patience.

### Loading a project file with results from a URL

You can load a project file with results from a URL by adding `?<project_file_url>` to the end of the editor URL.

```txt
https://<editor_url>?<project_file_url>
```

Example: <https://yaptide.github.io/web_dev/?https://raw.githubusercontent.com/yaptide/ui/master/src/ThreeEditor/examples/ex1.json>

To see the results, you need to navigate to the `Results` tab in the main menu.

## For developers

Start by downloading submodules:

```bash
git submodule update --init --recursive
```

Before starting the local version of the web interface, you need to install the necessary dependencies by typing the command:

```bash
npm install
```

To run the app in the development mode, type:

```bash
npm run start
```

Then open [http://localhost:3000/web_dev](http://localhost:3000/web_dev) to view it in the web browser.

The page will reload if you make edits.

### App configuration

Currently, app can be configured by setting the following environment variables in .env file in the main project directory (same as `package.json` is located).

#### Setting communication with backend
UI can be deployed on different machine (with different IP) than a backend. During build phase the UI can be configured to talk to given backend instance via `REACT_APP_BACKEND_URL` environmental variable. To adjust it put following line in the `.env` file:

If the backend is deployed as a set of docker containers, then Flask is listening on port **6000** for HTTP requests (HTTPS is supported only via NGINX proxy) on a host called `yaptide_flask`.
Additionally, the main NGINX proxy server listens on port **5000** for plain HTTP and **8443** for HTTPS. Relevant configuration can be found in this [config file](https://github.com/yaptide/yaptide/blob/master/nginx.conf) of backend

**Make sure that both url for backend in `.env` and url typed in browser's address bar contain same domain part: either localhost (recommended) or 127.0.0.1. When e.g. in browser frontend will be opend from localhost:3000 and REACT_APP_BACKEND_URL will be set to http://127.0.0.1:5000 the difference in domains will cause browser to block setting access_token and refresh_token returned from backend as part of a response to login request. It's because cookie option samesite='Lax' set in backend. Without those cookies each refresh request will fail.**

**When opening yaptide that runs from docker in chromium based browsers set ```REACT_APP_BACKEND_URL=https://localhost:8443``` in `.env`. Otherwise problem described above will appear. There are some differences how each browser implements security policies and those constantly change**


#### Other configuration options are:
- `REACT_APP_TARGET` - if set to `demo`, app will not require authentication and will be preloaded with demo results (this version is available at <https://yaptide.github.io/web_dev/>)
- `REACT_APP_ALT_AUTH` - if set to `plg`, app will use plgrid authentication
- `REACT_APP_DEPLOYMENT` - if set to `dev`, configuration wil be editable from the browser console. For example, you can change the backend URL by typing `window.BACKEND_URL="http://mynew.url"` in the browser console.

### Useful commands

In order to easy configure the app, `cross-env` package for setting env is used with custom npm scripts.

| Command | Description |
| --------------------- | --------------------------------------------------------------------------- |
| `npm run start` | Runs the app in the development mode. |
| `npm run build` | Builds the app for production to the `build` folder. |
| `npm run start-demo` | Runs the app in the development mode with demo results. |
| `npm run build-demo` | Builds the app for production to the `build` folder with demo results. |
| `npm run start-plg` | Runs the app in the development mode with plgrid authentication. |
| `npm run build-plg` | Builds the app for production to the `build` folder with plgrid authentication. |
| `npm run format` | Runs the formatter. |
| `npm run test` | Launches the test runner in the interactive watch mode. |

For more commands, see `package.json`.

### Building the app using the Dockerfile

To build the docker image, type:

```bash
docker build -t ui .
```

Then you can run the docker container named `ui` and serve the UI on port 80:

```bash
docker run --rm -d -p 80:80/tcp --name ui ui
```

## Requirements

- Node.js 20.x or higher
- Python 3.9+
- pip and venv

## Private docker image generated in the GHCR

The docker image is generated automatically after every commit to the main branch of this repository.
The package is here <https://github.com/yaptide/ui/pkgs/container/ui-web>

The command below will run the docker container named `ui` and serve the UI on port 80:

```bash
docker run --rm -d -p 80:80/tcp --name ui ghcr.io/yaptide/ui-web:master
```
[Developer documentation](https://yaptide.github.io/for_developers/frontend/)
Loading
Loading