react-typescript
react-typescript copied to clipboard
React16 + HMR + typescript + webpack + tslint + tests
React & typescript boilerplate
![Maintainability](https://api.codeclimate.com/v1/badges/7f1962ba5828c6273d14/maintainability)
Deprecated notice
Use nextjs
Why?
Make it fast as possible. Current development environment starts in <10s
Build time as fast as possible ~35s.
Bundle size should be minimum as possible
How to start
-
yarn
Install dependencies - Copy
.env.example
to.env
-
yarn start
Start development -
yarn start:storybook
Start storybook -
yarn build
Build for production
- Optional: Install wallaby plug-in for you IDE
- Configure wallaby test runner
-
yarn test
Run tests to check if everything is working -
yarn prepush
Run before each push -
yarn start:server
Start the server with SR (Server side rendering)
What's inside
- webpack v3
- dashboard
- webpack settings with typescript
- separated settings for development and production
- typescript v2.8
- SourceMaps
- Source maps for typescript
- Source maps for scss/css modules
- react v16
- redux
- react-redux
- redux-loger
- hot reload
- scss/css module
- stylelint (lint scss and css)
- auto typings for css modules
- scss/css hot loader
- jest (for tests)
- git
- attributes
- hooks (run tasks before push)
- travis (for deployment)
-
yarn (For better dependencies lock)
- save exact version
-
configured releases
yarn version
- editorconfig (consistent coding styles for different IDE)
- IDE settings
- live templates for JetBrains
- settings for Visual Studio Code
- Storybook Demo
- With actions
- Addons
Available commands
Command | Description |
---|---|
yarn dev |
Start development environment |
yarn start |
Start production environment |
yarn start:storybook |
Start storybook |
yarn lint |
Lint typescript files |
yarn lint:css |
Lint scss/css files |
yarn test |
Start test enviroiment for development |
yarn test:coverage |
Display tests coverage |
yarn start:server |
Test SSR locally |
Contribute
Git Commit Guidelines
We have very precise rules over how our git commit messages can be formatted. This leads to more readable messages that are easy to follow when looking through the project history. But also, we use the git commit messages to generate the our change log.
The commit message formatting can be added using a typical git workflow or through the use of a CLI
wizard (Commitizen). To use the wizard, run yarn run cm
in your terminal after staging your changes in git.
A detailed explanation borrowed from angular and can be found in this document.
Todo
- [x] Automate Changelist.md
- [ ] E2E Tests
- [ ] i18n
- [ ] Red box for react errors?
- [x] Server side rendering
- [ ] Use redux-observable instead saga
- [ ] Assets (css, js) caching
- [x] HMR route v4
- [ ] PWA