Webpack/TypeScript/React starter kit as of 2020

March 03, 2020

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.

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└── webpack.prod.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.

Webpack/TypeScript/React starter kit as of 2020