webpack-nexus 🐨

Scaffold your project in a couple of seconds. Webpack, Babel, Typescript, React, Apollo, syled-components, Eslint, Prettier and VSCode config out of the box.

The most successful dev work smart, not hard.

Webpack nexus is a simple CLI to scaffold your javascript/react projects.

Features

• Webpack: Dev and Prod configurations inspired by the awesome work of React boilerplate 🔨
• Babel: ES6/ES7, Jsx and plugins configured for dev and production mode. ⚛️
• Styling with styled-components and tailwind (it use purgecss under the hook to remove unused css rules) 💅
• Typing with typescript and eslint ✔️
• Auto formatter with prettier 🔄
• vscode configured to work with eslint + typescript + prettier 💙
• React-apollo: with withApollo flag in the command line
• 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...

Quick links

• Usage
• Stack used
• Project structure
• Roadmap
• Browser support
• Some questions
• Inspirations

Usage

Install

npm:

npm install -g webpack-nexus

yarn

yarn global add webpack-nexus

Create an app

webpack-nexus the-name-of-your-project

You can use the additional argvs to customize the tech stack.

• withApollo: Setup apollo client (v3) and add graphql-tag loader to webpack
• withTailwindcss: Setup tailwind css and add purgecss in production mode.

webpack-nexus the-name-of-your-project --withApollo webpack-nexus the-name-of-your-project --withTailwindcss

It will create a folder with your project name, navigate to it.

cd the-name-of-your-project

the-name-of-your-project
├── .vscode
├── node_modules
├── package.json
├── .yarn.lock
├── .tsconfig
├── .gitignore
├── .eslintrc
├── .eslintignore
├── dist
└── src
    ├── index.tsx
    └── index.html

Start coding with:

yarn start # or npm start

To compile in production mode:

yarn build # or npm run build

That's it, happy coding! 🎉

More commands are coming... ⏳

Stack used:

• Webpack
• Babel
• Typescript
• Eslint (typescript-parser)
• React
• vscode configuration
• Jest: coming soon
• Apollo client: coming soon
• Lint staged + husky: coming soon

Project structure

This project is a mono-repo built with lerna.

webpack-nexus
├── packages
├──── babel-preset-webpack-nexus
├──── eslint-config-webpack-nexus
├──── nexus-scripts
├──── webpack-nexus

Roadmap

• [x] Finish to implement the main core packages (eslint-config, babel-preset and nexus-scripts, webpack-nexus cli).
• [ ] Finish to implement the rest of comands (withApollo, withTypescript, withTailwind, etc).
• [ ] Finish to implement the interactive cli. Displays questions about the configuration/stack to use.
• [ ] Create the end-to-end tests for the CLI.
• [ ] Create a webpack-nexus.js config file to customize the webpack and babel configurations.
• [ ] Create a documentation of each core package.

Browser support

>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9

Some questions:

I don't want to use typescript, javascript is good for me.

By default it will create a .tsx file in the src folder but you can change it for a .js or .ts file.

Why I created this project?

Well, actually I have two reasons for this:

1. I hate the boilerplate I have to do to start a new project. So I created a cli to start a project in a rapid way.
2. I want to learn how to build something like create-react-app/next.js.

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

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

It has a lot of specific configurations used in all of my side-projects, so maybe you are good using the other ones.

Ok, so, 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 a error. Some times I just want to test some egde cases. webpack-nexus doesn't throw a error because it 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? 🤔

Inspirations:

• https://github.com/react-boilerplate/react-boilerplate
• https://github.com/facebook/create-react-app
• https://github.com/zeit/next.js
• https://github.com/kentcdodds/kcd-scripts

Issues

This project is still in development. So, if you find some improvements or errors go ahead and create an issue. 😃