Frontend Boilerplate with React, MobX, TypeScript & Webpack

A bare minimum react-mobx-webpack-typescript boilerplate with TodoMVC example.

Note that this project does not include Server-Side Rendering, Testing Frameworks and other stuffs that makes the package unnecessarily complicated.

Ideal for creating React apps from the scratch.

IMPORTANT: The initial project has been created and developed at: react-mobx-typescript-boilerplate. My work was all about updating the project regarding some points such as package json versions, store persistence, css module approach loading, etc.

Functionalities

• Developed using Typescript
• Functional Components approach used
• Clean architecture (containers, components, stores, etc)
• Build and run using webpack
• Mobx (with data persistence) consumed as "state"
• Environment & Configuration available

Contains

• Typescript 4.5.4
• React 17.0.2
• React Router 6.2.1
• Mobx 6.3.12
• Mobx React 7.2.1

Build tools

• Webpack 5.37.1
  • Tree Shaking
  • Webpack Dev Server
• Typescript Loader 9.2.1
• PostCSS Loader 5.3.1
  • PostCSS Preset Env
  • CSS modules
• React Hot Loader 4.13.0
• Mini CSS Extract Plugin 1.6.0
• HTML Webpack Plugin 5.3.1

Setup

$ npm install

Running

$ npm start

Build

$ npm run build

Code Format

$ npm run prettier

Updates & Help

I still have a couple of points I would like to work on:

• Webpack (maybe) can be optimized: I am a Golang, C/C++, C# backend developer, working on monolithic/microservices architecture etc... Really far from webpack/javascript/web developement so I might not have done the best job while upgrading the webpack.config.js file, so feel free to let me know if anything can be achieved in a better way!
• The package json could be optimized: I know there is Dependencies, devDependencies etc. I am not really sure from my experience to clearly understand the difference with it but if someone could help me to better organize the dependencies between those two, I would appreciate.

License

MIT