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
    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
    Run Locally
    Clone the project
    git clone https://github.com/fariasmateuss/webpack-setup-for-react.git
    Go to the project directory
    cd webpack-setup-for-react
    Install dependencies
    yarn
    Start the server
    yarn dev
    Open http://localhost:8080 with your browser to see the result.
    Deployment
    To deploy this project run
    yarn build
    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

    21

    This website collects cookies to deliver better user experience

    Mininal Webpack and React.js Starter boilerplate for TypeScript projects