atlas-webpack-init

A CLI tool for generating production webpack web apps with necessary boilerplate.

install

npm install -g atlas-webpack-init

why

As awesome as webpack4 is, it still requires boilerplate if you're trying to create production-ready webapps. There are tasks like minifying, gzipping and content-hashing that I would rather not think about every single time I want to make a new HTML widget. For small-medium apps, this stuff is pretty much the same 99% of the time.

ES6/babel-transpiling is already configured. If you need more features, edit the .babelrc and install any new babel plugins. Provides a hot-reload dev-server and hot-reload test runner. Bootstrap test file already imports what you need from mocha and chai. HTML/CSS/JS minification, stylesheet aggregation, content-hashed filenames, and gzipping are already configured for you. Provides static local server for your bundle. If you're building an app with webpack4, chances are it will start out looking like a lot like this. You can easily modify and extend this to fit your own needs as your project grows. There are no dependencies, only a few absolutely necessary dev-dependencies.

examples

using the cli tool

with args

You can specify a name, description, author and index.html title. At least one field is required, the rest are optional:

webpack-init -n my-app -d "my description" -a "atlassubbed <[email protected]>" -t "Page Title"

without args

If you don't specify any args, you will be prompted to enter the name, description, author and index.html title. In this case, all responses are optional. If you don't specify a name, it will default to "webpack-app":

webpack-init

specifying an author

If you specify a full author (with a name and email), the generator will automatically initialize a repository and perform an initial commit.

the generated project

structure

  webpack-app/
    src/
      index.html
      index.js
    test/
      index.test.js
    .babelrc
    .gitignore
    LICENSE.md
    README.md
    package.json
    webpack.common.js
    webpack.dev.js
    webpack.prod.js

scripts

You'll be provided with five scripts to simplify your workflow:

1. npm run test-server: pretty mocha test output to CLI with hot-rerun.
2. npm test: pretty mocha test output to CLI.
3. npm run dev-server: run your app at localhost:8080 with hot-reload.
4. npm start: build and serve production app at localhost:3030.
5. npm run build: builds fully minified, gzipped app in dist/ folder.

npm install

Once you've generated my-app, all you need to do is:

cd my-app
npm install

todo

I'd like to have a global executable called atlas which has the following sub-commands:

1. npm: generates a minimal npm starter app.
2. webpack: generates a minimal webpack starter app.
3. repo: automatically sync your project to github or fork/clone existing projects.
4. logout
5. whoami
6. ~~login~~: Not needed, thanks to atlas-recursive-auth

As of right now, the atlas command only has subcommands 3 and 4 above. atlas-npm-init and altas-webpack-init (this package) are their own commands, but I'd like to turn them into 1 and 2 above, respectively. The atlas command should then be responsible for initializing pretty much everything in a new project.

caveats

react

React is not assumed, it only takes a minute to install react and the associated babel plugins.

license

LICENSE.md defaults to MIT. Currently, there's no option to change it from the CLI. Changing it manually would simply require editing a line in package.json and editing the LICENSE.md file itself.

private

By default, packages will be private -- be sure to delete that line if you plan on publishing your generated package.

sinon and sinon-chai

When I was writing this package, I included sinon and sinon-chai, but I removed them because I found myself not using them in my tests. sinon is great, but why don't I use it? Spying, stubbing and mocking is pretty easy without it.

git initialization

Currently, the generator will automatically initialize a repo and make the first commit if you specify a full author. There's no way to turn this off right now. I understand that this can be undesirable, but I always needed these steps, so I figured it would just be a default.