vitess.io/vitess@v0.16.2/web/vtadmin/README.md (about)

     1  # VTAdmin
     2  
     3  ## Prerequisites
     4  
     5  - [node](https://nodejs.org) >= 16.13.0 LTS
     6  	- _Note_: If you are using Node >= 17.x.y, you may see errors like `Error: error:0308010C:digital envelope routines::unsupported` when running `npm run build`. This is due to node dropping support for older versions of `openssl`. A workaround was added in [nodejs/node#40455](https://github.com/nodejs/node/issues/40455), allowing you to `export NODE_OPTIONS="--openssl-legacy-provider"` before running `npm run build`.
     7  - npm >= 8.1.0 (comes with node)
     8  
     9  ## Available scripts
    10  
    11  Scripts for common and not-so-common tasks. These are always run from the `vitess/web/vtadmin` directory (although some of them have counterparts in `vitess/Makefile`):
    12  
    13  | Command | Description |
    14  |---|---|
    15  | `npm local` | Start vtadmin-web in development mode on [http://localhost:3000](http://localhost:3000), pointed at a vtadmin-api server running on [http://localhost:14200](http://localhost:14200). This is most useful when running against a [local Vitess cluster](https://vitess.io/docs/get-started/local/). |
    16  | `npm start` | Start vtadmin-web in development mode on [http://localhost:3000](http://localhost:3000). Additional environment variables can be specified on the command line or in a .env file; see [Environment Variables](#environment-variables). |
    17  | `npm run test` | Launches the test runner in the interactive watch mode. See the create-react-app documentation about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. |
    18  | `npm run lint` | Run all of the linters and formatters. The `package.json` file defines a bunch more scripts to run individual linters, if you prefer, like `npm run lint:eslint`. |
    19  | `npm run lint:fix` | Run all of the linters and fix errors (where possible) in place. Note that this will overwrite your files so you may want to consider committing your work beforehand! |
    20  | `npm run build` | Generates a build of vtadmin-web for production and outputs the files to the `vitess/web/vtadmin/build` folder. In most cases, you won't need to run this locally, but it _can_ be useful for debugging production-specific issues. See the create-react-app documentation about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. |
    21  
    22  ## Toolchain
    23  
    24  - [React](https://reactjs.org/)
    25  - [create-react-app](https://create-react-app.dev/) (generated with v.4.0.1)
    26  - [TypeScript](http://typescriptlang.org/)
    27  - [protobufjs](https://github.com/protobufjs)
    28  - [tailwindcss](https://tailwindcss.com/)
    29  
    30  ## Environment Variables
    31  
    32  Under the hood, we use create-react-app's environment variable set-up which is very well documented: https://create-react-app.dev/docs/adding-custom-environment-variables. 
    33  
    34  All of our environment variables are enumerated and commented in [react-app-env.d.ts](./src/react-app-env.d.ts). This also gives us type hinting on `process.env`, for editors that support it. 
    35  
    36  ## Linters and Formatters
    37  
    38  We use three libraries for consistent formatting and linting across the front-end codebase. (Not quite as streamlined as Go, alas!) These can be run individually, as noted below, or all in sequence with `npm run lint`.
    39  
    40  | Library | Commands | What it's for |
    41  |---------|----------|---------------|
    42  | [eslint](https://eslint.org/) | `npm run lint:eslint`<br/><br/>`npm run lint:eslint:fix` | ESLint identifies potential bugs and other issues. vtadmin-web uses the default ESLint configuration [built in to create-react-app](https://create-react-app.dev/docs/setting-up-your-editor/#extending-or-replacing-the-default-eslint-config). |
    43  | [prettier](https://prettier.io/) | `npm run lint:prettier`<br/><br/>`npm run lint:prettier:fix` | Prettier is an "opinionated code formatter" run against our JavaScript, TypeScript, and (S)CSS code to ensure a consistent style. Prettier is not a linter, and so it complements (rather than replaces) eslint/stylelint. | 
    44  | [stylelint](https://stylelint.io/) | `npm run lint:stylelint`<br/><br/>`npm run lint:stylelint:fix` | Stylelint is a linter for CSS/SCSS. Whereas prettier's CSS/SCSS support is largely focused on formatting (newlines, spaces vs. tabs), stylelint is able to flag possible errors, limit language features, and surface stylistic issues that prettier isn't intended to catch. |
    45  
    46  ## Configuring your editor
    47  
    48  ### VS Code
    49  
    50  To set up automatic formatting on save:
    51  
    52  1. Install the [Prettier VS Code plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).
    53  2. Add the following to your VS Code workspace:
    54  
    55  ```js
    56  {
    57  	// ... other workspace config ...
    58  
    59  	"settings": {
    60  		// ... other settings ..
    61  
    62  		"prettier.useEditorConfig": false,
    63  
    64  		// You may have to adjust this depending on which folder is the root of your workspace.
    65  		// By default, this configuration assumes that you have your workspace settings 
    66  		// at `vitess/.vscode/settings.json`. 
    67  		"prettier.configPath": "web/vtadmin/.prettiercc",
    68  		
    69  		"[typescriptreact]": {
    70  			"editor.defaultFormatter": "esbenp.prettier-vscode",
    71  			"editor.formatOnSave": true,
    72  		},
    73  		
    74  		"[typescript]": {
    75  			"editor.defaultFormatter": "esbenp.prettier-vscode",
    76  			"editor.formatOnSave": true,
    77  		},
    78  		
    79  		"[javascript]": {
    80  			"editor.defaultFormatter": "esbenp.prettier-vscode",
    81  			"editor.formatOnSave": true,
    82  		},
    83  
    84  		"[css]": {
    85  			"editor.defaultFormatter": "esbenp.prettier-vscode",
    86  			"editor.formatOnSave": true,
    87  			"editor.codeActionsOnSave": {
    88  				"source.fixAll.stylelint": true
    89  			}
    90  		},
    91  
    92  		"[scss]": {
    93  			"editor.defaultFormatter": "esbenp.prettier-vscode",
    94  			"editor.formatOnSave": true,
    95  			"editor.codeActionsOnSave": {
    96  				"source.fixAll.stylelint": true
    97  			}
    98  		}
    99  	}
   100  }
   101  ```
   102  
   103  For more, check out ["Setting Up Your Editor"](https://create-react-app.dev/docs/setting-up-your-editor/) in the create-react-app docs.