DEV Community

Cover image for Mininal Webpack and React.js Starter boilerplate for TypeScript projects
Mateus V. Farias
Mateus V. Farias

Posted on

Mininal Webpack and React.js Starter boilerplate for TypeScript projects

Say hello to my new open source project!!!

React.js boilerplate with TypeScript, SASS, Webpack and Babel.

Out now:

GitHub logo fariasmateuss / webpack-setup-for-react

Mininal Webpack and React.js Starter boilerplate for TypeScript projects

Webpack Setup for React.js

Mininal Webpack and React.js Starter boilerplate.

Demo

Link to demo

Usage

Create a new application using create-react-app with the -e | --example flag pointing to this repository's url, like so:

npx create-react-app project-name -e https://github.com/fariasmateuss/webpack-setup-for-react.git
Enter fullscreen mode Exit fullscreen mode

Run Locally

Clone the project

git clone https://github.com/fariasmateuss/webpack-setup-for-react.git
Enter fullscreen mode Exit fullscreen mode

Go to the project directory

cd webpack-setup-for-react
Enter fullscreen mode Exit fullscreen mode

Install dependencies

yarn
Enter fullscreen mode Exit fullscreen mode

Start the server

yarn dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:8080 with your browser to see the result.

Deployment

To deploy this project run

yarn build
Enter fullscreen mode Exit fullscreen mode

Feedback

If you have any feedback, please contact me through my LinkedIn profile.

License

MIT




Why new boilerplate?

Customized as minimal as it could be with using cutting-edge technology to be usable and scalable in the future.

What is included in this boilerplate ?

  • Support for both JSX and TSX.
  • Strict linting with Eslint and Prettier configured for typescript.
  • Webpack-serve a lean and modern webpack development server that use WebSockets.
  • Webpack-serve a lean and modern webpack development server that use WebSockets.
  • React hot loader so you can change and modify your component without refresh or reload the page in real time change!
  • Last but not least CSS-Modules scoped CSS/SCSS locally for each component.

Used Technologies

  • Webpack
  • Babel — Transpali JSX,TSX ES6, ES7, ES8
  • React
  • ESlint — Using airbnb config
  • Prettier — Code Formatter
  • Style and CSS-Loader & SASS-loader
  • CSS modules — Isoleted styled based on each component
  • React refresh
  • Webpack serve
  • Husky — For running scripts before committing
  • Commitizen — To define a standard way of committing rules
  • Commitlint — Make sure your commit messages follow the convention
  • lint-staged — To run ESLint and Prettier against staged Git files
  • PR Workflow — Run Type Check & Linters on all Pull Requests

I refactored this boilerplate multiple times to match my needs and to be easy to maintain and scale and will keep it update as much as I can. feedback is always welcome.

Discussion (1)

Collapse
jancizmar profile image
Jan Cizmar

Whats the difference between your solution and CRA?