DEV Community

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

Posted on • Updated on

Mininal Webpack and React.js Starter boilerplate for TypeScript projects

Say hello to my new open source project!!!

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.

What is included in this boilerplate?

  • Support for both JSX and TSX.
  • ESLint — Using airbnb config
  • Prettier — Code Formatter
  • Husky — For running scripts before committing
  • Commitizen — To define a standard way of committing rules
  • Commitlint — Make sure your commit messages follow the convention
  • Renovate — Keep your dependencies up to date
  • lint-staged — To run ESLint and Prettier against staged Git files
  • PR Workflow — Run Type Check & Linters on all Pull Requests
  • EditorConfig — Maintain consistent coding styles across editors and IDEs
  • React refresh — So you can change and modify your component without refresh or reload the page in real time change!
  • CSS-loader & SASS-loader & style-loader.
  • Webpack-serve — A lean and modern webpack development server.

Demo

Link to demo

Usage

Create a new application using create-react-app with the -e | --example flag pointing to…

What is included in this boilerplate?

  • Support for both JSX and TSX.
  • ESLint — Using airbnb config
  • Prettier — Code Formatter
  • Husky — For running scripts before committing
  • Commitizen — To define a standard way of committing rules
  • Commitlint — Make sure your commit messages follow the convention
  • Renovate — Keep your dependencies up to date
  • lint-staged — To run ESLint and Prettier against staged Git files
  • PR Workflow — Run Type Check & Linters on all Pull Requests
  • EditorConfig — Maintain consistent coding styles across editors and IDEs
  • React refresh — So you can change and modify your component without refresh or reload the page in real time change!
  • CSS-loader & SASS-loader & style-loader.
  • Webpack-serve — A lean and modern webpack development server.

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

Scripts

  • Start dev server using yarn dev.
  • Build and bundling your resources for production yarn build.
  • Deploy it to GitHub pages using yarn deploy
  • yarn type-check validate code using TypeScript compiler.
  • yarn lint and yarn format to run ESLint and Prettier for all files in the src directory.
  • yarn commit run commitizen. Alternative to git commit.

Switch to npm

By default, this boilerplate uses Yarn 1 (Classic), but this choice is yours. If you'd like to switch to npm, delete the yarn.lock file, install the dependencies with npm install, and change the CI workflows, Husky Git hooks, and lint-staged steps to use npm commands.

Feedback

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

License

MIT

Discussion (1)

Collapse
jancizmar profile image
Jan Cizmar

Whats the difference between your solution and CRA?