Shiny Typescript Boilerplate

My own strong opinionated react/typescript boilerplate with blackjack and hookers. In fact, forget the boilerplate.

Main Features

• Async loader for routing and code
• Only Functional component with Hooks
• State management with unstated-next

Key Techs

• TypeScript (babel compilation)
• React (with hooks)
• Webpack
• Ant Design
• Storybook
• Sass

Other libraries installed

• Reach Router
• Day.js
• Moment.js
• Rest Hooks
• Unstated Next
• Formik

Typescript extended support with:

• TSLint (TODO: change for eslint-typescript when is ready)
  • SonarTS
  • tslint-react
  • TSLint Config Airbnb
  • tslint-clean-code
• type-coverage
• ts-toolbelt

StoryBook extended support with:

• Storybook Addon Actions
• Storybook Info Addon
• Story Links Addon
• Storybook Storysource Addon
• Props Combinations addon
• react-docgen-typescript-loader

Webpack Extended support with:

• babel-plugin-lodash
• babel-plugin-import
• moment-locales-webpack-plugin
• webpack-ant-icon-loader
• Webpack Bundle Analyzer
• critters-webpack-plugin
• preload-webpack-plugin

Vs code recommended extencions

• EditorConfig for VS Code
• TSLint
• JSON to TS

Installation

Install it:

git clone https://github.com/emilianox/shiny-typescript-boilerplate
npm install

Starting the development server

npm start

Screenshots

Main Page

Analize Page

Audits in chrome

NPM Tasks

npm run storybook # run storybook
npm run type-check # run tsc to check ts errors
npm run type-check:watch # run tsc to check ts errors in watch mode
npm run type-coverage # run type-coverage
npm run build # compile project
npm run analize-build # compile project and run Bundle Analyzer
npm run build-storybook # run storybook in production and static mode
npm run clean # clean dist/ folder

API used

https://anapioficeandfire.com/

Maintainers

@emilianox.

Contributing

Feel free to dive in! Open an issue or submit PRs.

This is a heavy edited fork of:

https://github.com/a-tarasyuk/react-webpack-typescript-babel

Licence

MIT