Webpack/TypeScript/React starter kit as of 2020

Blog/JavaScript · 2020-02-23 · webpack typescript starter react eslint beginning krasimir beginning npm run watch components app tsx src components app beginning https github

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