Boilerplate project for React, TypeScript, Webpack 2, postCSS, CSS-Modules and HMR

Introduction

Few months ago, I was starting to use WebPack 2 and TypeScript on my React projects. To be fair with ES6 and Babel, I really enjoyed build applications with them and they are in my hearth and that is why I did other post as well, about how to build a new SPA with ES6, SCSS, React, Webpack and HMR.

But, then I met TypeScript and to be honest at the beginning was so annoying to deal with typings… but once you get used to it, that really rocks!

Then I decided to create a boilerplate, starter template, (o whatever name you like more) to help me and other people in the community create the baseline project for our React applications written in TypeScript, using webpack 2 as a bundler system, using postcss combined with CSS Modules as a Style technique and having Hot Module Replacement as a powerful feature which allows us to see the changes reflected on the browsers immediately.

You can see, download and use freely the boilerplate on this link: https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS.

Folder Structure

folder structure

Lot’s of configurations are happening on this template, but I will recap the main features:

Main Features

Stats

If you run npm run stats you will generate a HTML file with the bundle stats. That is really helpful to see which npm packages are you including and the size of them.

stats

Useful demo

As part of the boilerplate, you will see a fancy demo app with two react components already created:

[sample

Star it!

If you like it, don’t forget to ★ on Github.

 

Author: José Quinto
Link: https://blog.josequinto.com/2017/04/19/boilerplate-project-for-react-typescript-webpack-2-postcss-css-modules-and-hmr/
Copyright Notice: All articles in this blog are licensed under CC BY-SA 4.0 unless stating additionally.