Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(doc): add UI documentation #190

Merged
merged 1 commit into from
Nov 9, 2023
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
4 changes: 2 additions & 2 deletions ui/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
COPY . .
ARG VITE_API_BASE_URL
ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
ARG API_BASE_URL
ENV VITE_API_BASE_URL=$API_BASE_URL
RUN yarn build

FROM nginx:stable-alpine
Expand Down
33 changes: 14 additions & 19 deletions ui/README.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,22 @@
# React + TypeScript + Vite
# Burrito UI

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
<img src="https://raw.githubusercontent.com/padok-team/burrito/main/ui/public/favicon.svg" alt="Burrito Logo" width="600" />

Currently, two official plugins are available:
Web UI for [Burrito](https://github.com/padok-team/burrito).

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Getting started

## Expanding the ESLint configuration
1. Install [NodeJS](https://nodejs.org/en/download/) and [Yarn](https://yarnpkg.com).
2. Run `yarn install` to install local prerequisites.
3. Run `yarn start` to launch the dev UI server.
4. Run `yarn build` to bundle static resources into the `./dist` directory.

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
## Build Docker production image

- Configure the top-level `parserOptions` property like this:
Run the following commands to build the Docker image:

```js
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
```bash
TAG=latest # or any other tag
BURRITO_API_BASE_URL=https://burrito.example.cloud/api # or any other API base URL
docker build -t burrito-ui:$TAG --build-arg API_BASE_URL=$BURRITO_API_BASE_URL .
```

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list