webpack-nexus π¨: my first open source project
The story behind webpack-nexus, a small CLI I built to scaffold JavaScript/React projects and to learn how tools like create-react-app work under the hood.
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 CLIs.
So, after 2 months of research and development I have finished my own CLI and I want to share this with you.
webpack-nexus π¨: GiancarlosIO/webpack-nexus
Why did I create 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 CLIs/boilerplates.
I know it's not better than create-react-app or 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-staged: coming soon...
- webpack-nexus.js: file to configure/override 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. Sometimes I just want to test some edge 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 helps you to scaffold your next big side project. π
You can see the docs here: GiancarlosIO/webpack-nexus
And... that's it. Thank you for reading!!!