nfq-eta / react-typescript

React16 + HMR + typescript + webpack + tslint + tests

React & typescript boilerplate

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

1. yarn Install dependencies
2. Copy .env.example to .env
3. yarn start Start development
4. yarn start:storybook Start storybook
5. yarn build Build for production

• Optional: Install wallaby plug-in for you IDE

1. Configure wallaby test runner
2. yarn test Run tests to check if everything is working
3. yarn prepush Run before each push
4. 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
  • import json supported
  • tslint (lint typescript)
  • prettier Automatic code formatter
• SourceMaps
  • Source maps for typescript
  • Source maps for scss/css modules
• react v16
  • react hot loader
• 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)
  • enzyme
  • wallaby (for fast tests development)
• 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

• Automate Changelist.md
• E2E Tests
• i18n
• Red box for react errors?
• Server side rendering
• Use redux-observable instead saga
• Assets (css, js) caching
• HMR route v4
• PWA