Commit 9f76f51f authored by Imran Salam's avatar Imran Salam Committed by Imran Salam
Browse files

add description of missing npm commands in README

parent 79f7cff6
......@@ -8,29 +8,35 @@ The tools that need setting up are Node.js and the IDE. To setup Node.js you onl
There are several script commands that have been baked into the NPM configuration. They have been briefly described below:
1. `npm start` - This should start the development server via `webpack`. There is no need to do any compilation manually, as `webpack` will take care of it.
2. `npm run serve:dev` - This does the same as `npm start`. The latter is actually an alias to this script.
3. `npm run build` - Runs the production build. It will initially delete the existing local production build and replace it with the new one.
4. `npm run serve:prod` - This runs the built production site locally.
5. `npm run lint:scripts` - Runs TSLint to check code errors in TypeScript and React. Also, suggests improvements to the code.
6. `npm run lint:style` - Does the same as above through `stylelint` for the SASS code.
7. `npm run lint` - Runs both `lint:scripts` and `lint:style`. There is no need to run any of these lint scripts during development. This is because, each time a change is made to the code, the linters run along with the build.
8. `npm test` - Runs `jest` to check whether the unit tests pass.
9. `npm run coverage` - Updates the `jest` coverage of the React.js code, and shows the test coverage.
10. `npm run shanpshot` - Updates the `jest` snapshots. You will sometimes need to run this after a change is made to the React.js code. However, first check whether the unit tests are passing after updating them. If you get any errors related to `jest` snapshots, you will then need to run this script.
11. `npm run storybook` - Starts the Storybook application
12. `npm run deploy-storybook` — Builds the Storybook application and deploys it to Github Pages ([link](https://ensembl.github.io/ensembl-client))
12. `npm run check-types` – Runs typescript compiler to check for type correctness
- `npm run copy-dotenv` - Makes a copy of `.env.example` file named as `.env` in case it doesn't exist. This command will always run before `serve:dev`.
- `npm start` - This should start the development server via `webpack`. There is no need to do any compilation manually, as `webpack` will take care of it.
- `npm run serve:dev` - This does the same as `npm start`. The latter is actually an alias to this script.
- `npm run serve:prod` - This runs the built production site locally.
- `npm run build` - Runs the production build. It will initially delete the existing local production build and replace it with the new one.
- `npm run deploy` - Runs `deploy.js` file to deploy the production build into the master machine (`ves-hx2-70`). You will need to pass the full address of the machine name along with your username as an argument.
- `npm run certify` - Runs `setup-ssl.js` to create a local SSL certificate to run the production build on `HTTPS`. There are two files that are created for this: `localhost.crt` and `localhost.key`.
- `npm run lint` - Runs both `lint:scripts` and `lint:style`. There is no need to run any of these lint scripts during development. This is because, each time a change is made to the code, the linters run along with the build.
- `npm run lint:scripts` - Runs TSLint to check code errors in TypeScript and React. Also, suggests improvements to the code.
- `npm run lint:styles` - Does the same as above through `stylelint` for the SASS code.
- `npm run storybook` - Starts the Storybook application
- `npm run deploy-storybook` — Builds the Storybook application and deploys it to Github Pages ([link](https://ensembl.github.io/ensembl-client))
- `npm run check-types` – Runs typescript compiler to check for type correctness
- `npm jest` - Runs `jest`in non-verbose mode.
- `npm test` - Runs `jest` to check whether the unit tests pass in verbose mode.
- `npm test:watch` - Runs `jest` on watch mode.
- `npm run coverage` - Updates the `jest` coverage of the React.js code, and shows the test coverage.
- `npm run snapshot` - Updates the `jest` snapshots. You will sometimes need to run this after a change is made to the React.js code. However, first check whether the unit tests are passing after updating them. If you get any errors related to `jest` snapshots, you will then need to run this script.
### IDE Setup
The IDE setup may change depending on which one you have chosen. This document will describe setting VS Code for development. The default setup of VS Code is sufficient for development, as it has great support for TypeScript and React.js. However, its functionality can be extended further with these VS Code extensions:
1. [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens): Extends the existing support for `git`.
2. [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): Automated code formatting. Prettier is built into `webpack`, however it is not fit for formatting the code on the fly. It is currently disabled in `webpack`, so using this extension is recommended.
3. [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss): The support for SCSS, the alternate syntax of SASS, is not great in VS Code. This extension adds this support.
4. [TSLint](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin): Adds TSLint support to VS Code.
5. [stylelint](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint): Adds `stylelint` support to VS Code.
6. [SVG Viewer](https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer): By default, VS Code will show SVG images only as a code file. This extension will add functionality, to let you view the SVG files as images.
7. [snapshot-tools](https://marketplace.visualstudio.com/items?itemName=asvetliakov.snapshot-tools): Enable linking of Jest generated snapshots with the Jest unit tests.
8. [vscode-icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons): By default, VS Code does not have icon support for many of the configuration files and formats used in the code. This extension adds those missing icons and more.
- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens): Extends the existing support for `git`.
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): Automated code formatting. Prettier is built into `webpack`, however it is not fit for formatting the code on the fly. It is currently disabled in `webpack`, so using this extension is recommended.
- [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss): The support for SCSS, the alternate syntax of SASS, is not great in VS Code. This extension adds this support.
- [TSLint](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin): Adds TSLint support to VS Code.
- [stylelint](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint): Adds `stylelint` support to VS Code.
- [SVG Viewer](https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer): By default, VS Code will show SVG images only as a code file. This extension will add functionality, to let you view the SVG files as images.
- [snapshot-tools](https://marketplace.visualstudio.com/items?itemName=asvetliakov.snapshot-tools): Enable linking of Jest generated snapshots with the Jest unit tests.
- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons): By default, VS Code does not have icon support for many of the configuration files and formats used in the code. This extension adds those missing icons and more.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment