DEV Community

Giancarlos Isasi
Giancarlos Isasi

Posted on

6 2

webpack-nexus 🐨 - my little first open source project

https://github.com/GiancarlosIO/webpack-nexus

One year ago I was wondering how things like create-react-app are being created.
In may of this year I decided I should try to create my own "create-react-app" to learn about cli's.

So, after 2 months of research and development I have finished my own cli and I want to share this with you.

Webpack-nexus 🐨:
https://github.com/GiancarlosIO/webpack-nexus

Why I created my own cli?

I created this because I want to learn how to build something like create-react-app/next.js. I'm not trying to compete with the big current cli's/boilerplates

I know it's not better than create-react-app o next.js but I made this to supply my custom requirements about webpack and vscode configurations. Maybe it will do the same for you.

Features

  • Webpack: Dev and Prod configurations inspired by the awesome work of React - boilerplate 🔨
  • Babel: ES6/ES7, jsx and more plugins configured for dev and production mode. ⚛️
  • Styling with styled-components 💅
  • Typing with typescript and eslint ✔️
  • Auto formatter with prettier 🔄
  • vscode configured to work with eslint + typescript + prettier 💙
  • React-apollo: coming soon...
  • Jest: coming soon...
  • Husky + lint-stagged: coming soon...
  • webpack-nexus.js: file to configure/overrite the actual webpack/babel configuration, coming soon...
  • Setup/configurations for atom and sublime, coming soon...

What is the difference with other projects like create-react-app/react-boilerplate/next.js?

It has a lot of specific configurations used in all of my side-projects, so maybe you are good using CRA or NEXTJS.

I tested create-react-app and I think it is awesome but I don't like the way it works.

  • You need to eject to add your own webpack or babel plugins.
  • You need to eject to configure/add prettier/eslint rules.
  • If you have lint errors it will throw an error. Some times I just want to test some egde cases. webpack-nexus doesn't throw an error because eslint is not configured inside webpack, it is just used to lint the files in vscode.
  • It doesn't have support for multi-entries. It can be configured for that, but again, you need to eject.
  • It has no styled-components installed.
  • It has no apollo graphql configured. Graphql is what I always use in my projects.
  • It has no react-hot-loader configured.

react-boilerplate? I really like that, but I just wanted a simple cli to scaffold my projects and not to clone a repository every time.

And... It is not comparable with next.js because it is not a react framework... but maybe in the future it can be? 🤔

I hope this project help you to scaffold your next big side project. 😊

You can see the docs here: https://github.com/GiancarlosIO/webpack-nexus

And... that's it. Thank you for reading!!!

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Postgres on Neon - Get the Free Plan

No credit card required. The database you love, on a serverless platform designed to help you build faster.

Get Postgres on Neon