Blog

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

image

Hi,

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

image

 

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.

image

 

Useful demo

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

image

 

Enjoy it!

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

@jquintozamora

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

Post Navigation