Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/atlassubbed/atlas-webpack-init


https://github.com/atlassubbed/atlas-webpack-init

Last synced: 21 days ago
JSON representation

Awesome Lists containing this project

README 

        
# atlas-webpack-init



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



[![Travis](https://img.shields.io/travis/atlassubbed/atlas-webpack-init.svg)](https://travis-ci.org/atlassubbed/atlas-webpack-init)



---



## 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 " -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.