1# git-bug rich web UI
 2
 3## Prerequisites
 4
 5<div align="center">
 6<img height="119px" alt="ReactJS" src="./public/reactjs_logo.png">
 7<img width="150px" src="./public/materialui_logo.svg">
 8<img height="119px" src="./public/graphql_logo.svg">
 9<img height="119px" src="./public/apollo_logo.svg">
10</div>
11<div align="center">
12ReactJS | Material UI | GraphQL | Apollo GraphQL
13</div>
14
15## How to develop
16
17### Run GraphQL backend
18
191. Download a git-bug stable binary or compile your own by running `make` in the **root** directory:
20
212. Run the git-bug binary inside your git repository. It will manage issues and start the API:
22   - `git-bug webui -p 3001`
23
24### Run ReactJS front-end
25
261. If you haven't already, clone the git-bug repository:
27
282. Enter the `webui` directory and install the needed libraries:
29   - `make install` or `npm install`
30
313. Generate the TS code from the GrapQL files and run the webui in development mode:
32   - `make start` or `npm start`
33   - If you get some lint errors, run the lint command below and start again:
34      - `make fix-lint` or `npm run lint -- --fix`
35      - `make start` or `npm start`
36
37The development version of the WebUI is configured to query the backend on the port 3001. You can now live edit the js code and use the normal backend.
38
39## Bundle the web UI
40
41Once the webUI is good enough for a new release:
421. run `make build` from webui folder
432. run `make pack-webui` from the *root directory* to bundle the compiled js into the go binary.
44   - You must have Go installed on Your machine to run this command.