To develop:
npm installnpm run dev-- this launches a development server at http://localhost:9000/webpack-dev-server/ which automatically builds and reloads. (Note: it says that it serves from./dist, but it does not.)
To make a production build:
npm run prod-- this puts a built static directory in./dist, which is directly uploaded to S3 to serve the site.
We use the following technologies:
- TypeScript (v2.1)
- React (for rendering the UI)
- MobX (for mapping the state to UI)
- D3 (for graphs)
- Webpack for builds.
Our CSS includes a few global resets for ease of use:
- "box-sizing: border-box" is default.
- All margin and padding is removed from all elements.
- All font size and weights are reset.
All styles are defined in the same file as their owning component, defined with styled-components. This allows us to avoid CSS rot.
Assets (images, etc.) are included in the src/assets folder and referenced by requiring them in modules like so:
<img src={require<string>('./assets/foo.png')} />Under the hood, Webpack copies that file to the output directory using an opaque name. Files which are not referenced are not included in the output; this avoids bundling unused files.