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.
- 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...
npm:
npm install -g webpack-nexus
yarn
yarn global add webpack-nexus
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
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... ⏳
- Webpack
- Babel
- Typescript
- Eslint (typescript-parser)
- React
- vscode configuration
- Jest: coming soon
- Apollo client: coming soon
- Lint staged + husky: coming soon
This project is a mono-repo built with lerna.
webpack-nexus
├── packages
├──── babel-preset-webpack-nexus
├──── eslint-config-webpack-nexus
├──── nexus-scripts
├──── webpack-nexus
- 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.
>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9
By default it will create a .tsx file in the src folder but you can change it for a .js or .ts file.
Well, actually I have two reasons for this:
- 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.
- I want to learn how to build something like create-react-app/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? 🤔
- 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
This project is still in development. So, if you find some improvements or errors go ahead and create an issue. 😃