github.com/wfusion/gofusion@v1.1.14/common/infra/asynq/asynqmon/ui/README.md (about)

     1  # Working with the React UI
     2  
     3  This file explains how to work with Asynqmon UI.
     4  
     5  ## Introduction
     6  
     7  The Asynqmon UI was bootstrapped using [Create React App](https://github.com/facebook/create-react-app), a popular toolkit for generating React application setups. You can find general information about Create React App on [their documentation site](https://create-react-app.dev/).
     8  
     9  Instead of plain JavaScript, we use [TypeScript](https://www.typescriptlang.org/) to ensure typed code.
    10  
    11  ## Development environment
    12  
    13  To work with the React UI code, you will need to have the following tools installed:
    14  
    15  - The [Node.js](https://nodejs.org/) JavaScript runtime.
    16  - The [Yarn](https://yarnpkg.com/) package manager.
    17  - _Recommended:_ An editor with TypeScript, React, and [ESLint](https://eslint.org/) linting support. See e.g. [Create React App's editor setup instructions](https://create-react-app.dev/docs/setting-up-your-editor/). If you are not sure which editor to use, we recommend using [Visual Studio Code](https://code.visualstudio.com/docs/languages/typescript). Make sure that [the editor uses the project's TypeScript version rather than its own](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript).
    18  
    19  **NOTE**: When using Visual Studio Code, be sure to open the `ui/` directory in the editor instead of the root of the repository. This way, the right ESLint and TypeScript configuration will be picked up from the React workspace.
    20  
    21  ## Installing npm dependencies
    22  
    23  The React UI depends on a large number of [npm](https://www.npmjs.com/) packages. These are not checked in, so you will need to download and install them locally via the Yarn package manager:
    24  
    25      yarn
    26  
    27  Yarn consults the `package.json` and `yarn.lock` files for dependencies to install. It creates a `node_modules` directory with all installed dependencies.
    28  
    29  **NOTE**: Remember to change directory to `ui/` before running this command and the following commands.
    30  
    31  ## Running a local development server
    32  
    33  You can start a development server for the React UI outside of a running Asynqmon server by running:
    34  
    35      yarn start
    36  
    37  This will open a browser window with the React app running on http://localhost:3000/. The page will reload if you make edits to the source code. You will also see any lint errors in the console.
    38  
    39  ## Building the app for production
    40  
    41  To build a production-optimized version of the React app to a `build` subdirectory, run:
    42  
    43      yarn build
    44  
    45  **NOTE:** You will likely not need to do this directly. Instead, this is taken care of by the `build` target in the main Asynqmon `Makefile` when building the full binary.
    46  
    47  ## Integration into Asynqmon
    48  
    49  To build a Asynqmon binary that includes a compiled-in version of the production build of the React app, change to the root of the repository and run:
    50  
    51      make build
    52  
    53  This installs npm dependencies via Yarn, builds a production build of the React app, and then finally compiles in all web assets into the Asynqmon binary.