webpack-nexus

A cli to create your next super duper javascript project

Usage no npm install needed!

<script type="module">
  import webpackNexus from 'https://cdn.skypack.dev/webpack-nexus';
</script>

README

webpack-nexus 🐨 npm npm lerna

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

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

  • 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:

Issues

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