My 5th book "50 Tips on JavaScript" is on sale. Go get it from
Illustrated guide to 50 of the most interesting JavaScript topics.

Webpack/TypeScript/React starter kit as of 2020

Webpack/TypeScript/React starter kit as of 2020 Photo by Ciprian Boiciuc

I just started using TypeScript. I did couple of React projects and noticed a pattern in the setup. I decided to export that to a starter kit ๐Ÿ‘‰ beginning. It is based on Webpack with Babel and TypeScript loader.

How to use it

It's just a one-liner. Pick an empty folder and run:

> npx beginning && npm install

What it does

npx beginning fills the folder with the necessary setup files:

โ”œโ”€โ”€ public
โ”‚   โ””โ”€โ”€ index.html
โ”œโ”€โ”€ src
โ”‚   โ”œโ”€โ”€ components
โ”‚   โ”‚   โ””โ”€โ”€ App.tsx
โ”‚   โ””โ”€โ”€ index.tsx
โ”œโ”€โ”€ .babelrc
โ”œโ”€โ”€ .eslintrc
โ”œโ”€โ”€ .gitignore
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ tsconfig.json
โ”œโ”€โ”€ webpack.config.js

And npm install brings the dependencies locally. After that you have three scripts to run:

  • npm run build - generating a production bundle under the public folder.
  • npm run watch - generating a bundle under the public folder and starts a watcher.
  • npm run dev - same as npm run watch but also spins up a server at http://localhost:9000

There is a simple React component under the src/components/App.tsx. I did not include stuff for testing or app development. That's up to you.

Closing notes

As most of the stuff that I'm doing beginning is an open source project. If you find it useful please support it at GitHub here.

If you enjoy this post, share it on Twitter, Facebook or LinkedIn. To leave a comment go here.