Cutting Edge ReactJS Boilerplate without Webpack

June 24th, 2020 / 1 minute(s) reading time
react

Cutting Edge ReactJS Boilerplate without Webpack

The why

Recently I started working in some projects using ReactJS and at the moment of deciding what our team was going to use a good friend of mine ran into Parcel while watching a nice course by Brian Holt at Frontend Masters called Complete Intro to React, v5. So he said why don't we use it instead of webpack, because seriously sometimes it gets really strange and does stuff hard to work with.

So I remembered about Parcel and said okay, let's use it in the following project, I read about it and started making the setup of all the dependencies we think we are going to need for the project. Everything is working properly so I started another toy project and realized quickly that I needed a lot of the dependencies that the other project has, so I decided to extract a new Template or Boilerplate for any other projects that you or I would need.

What's included?

  • Parcel
  • ReactJS
  • Emotion
  • i18n
  • css.gg
  • react-spring
  • React Router
  • JSON Web token
  • React Hook Form
  • axios
  • SCSS
  • jest
  • cypress

What commands do we have?

  • npm run dev Starts parcel and storybook servers in development mode
  • npm run start Starts parcel in development mode
  • npm run format Formats code beautifully
  • npm run clear-build-cache Clears cache and dist folders
  • npm run lint Users ESLint to check code
  • npm run test Run tests
  • npm run test:coverage Runs tests displaying code coverage
  • npm run test:update Updates snapshots
  • npm run test:watch Runs Jest in watch mode
  • npm run cypress Starts Cypress

The repo

The repository is available at Github. and can be used as a template for any project you what to build with.

Happy coding

The silly code

Self taught 📖 Software engineer 💻 Coffee lover ☕️ Coding and sharing cool stuff and knowledge