The tools that need setting up are Node.js and the IDE. To setup Node.js you only need to run npm install
. This will install all the necessary NPM packages for app development and the build.
There are several script commands that have been baked into the NPM configuration. They have been briefly described below:
npm start
- This should start the development server viawebpack
. There is no need to do any compilation manually, aswebpack
will take care of it.npm run serve:dev
- This does the same asnpm start
. The latter is actually an alias to this script.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 serve:prod
- This runs the built production site locally.npm run lint:scripts
- Runs TSLint to check code errors in TypeScript and React. Also, suggests improvements to the code.npm run lint:style
- Does the same as above throughstylelint
for the SASS code.npm run lint
- Runs bothlint:scripts
andlint: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 test
- Runsjest
to check whether the unit tests pass.npm run coverage
- Updates thejest
coverage of the React.js code, and shows the test coverage.npm run shanpshot
- Updates thejest
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 tojest
snapshots, you will then need to run this script.
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:
- GitLens: Extends the existing support for
git
. - Prettier - Code formatter: Automated code formatting. Prettier is built into
webpack
, however it is not fit for formatting the code on the fly. It is currently disabled inwebpack
, so using this extension is recommended. - SCSS IntelliSense: The support for SCSS, the alternate syntax of SASS, is not great in VS Code. This extension adds this support.
- TSLint: Adds TSLint support to VS Code.
- stylelint: Adds
stylelint
support to VS Code. - SVG Viewer: 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: Enable linking of Jest generated snapshots with the Jest unit tests.
- 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.