Skip to content

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

License

Notifications You must be signed in to change notification settings

giancarlosisasi/webpack-nexus

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b4158da Β· Mar 31, 2022
Mar 31, 2022
Feb 20, 2022
Feb 23, 2020
Nov 23, 2019
Mar 31, 2022
Jul 5, 2020
Oct 13, 2019
Sep 27, 2019
Sep 27, 2019
May 3, 2019
May 4, 2019
May 3, 2019
Feb 22, 2020
May 4, 2019
Feb 20, 2022
Feb 20, 2022
Feb 19, 2022

Repository files navigation

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. πŸ˜ƒ

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published