generator-uncomplicated

Uncomplicated Yeoman Generator to kick-off your projects.

Install

First install Yeoman:

yarn global add yo

or

npm install -g yo

Now install the ultimate generator:

yarn global add generator-uncomplicated

or

npm install -g generator-uncomplicated

Finally, run yo uncomplicated and follow the instructions.

You can also use yo uncomplicated --jest to add Jest support or yo uncomplicated --webpack to setup the project with webpack.

Generator

Local server

Launch the static dev server:

yarn serve

Linting

You can check the code syntax and style for JavaScript and CSS.

yarn lint

You can also check individually CSS yarn lint:css, JavaScript yarn lint:js or Markdown yarn lint:md.

Features

• Base HTML file with meta
• Normalisation of CSS using normalize.css
• Empty CSS file included in the HTML file
• Empty JavaScript file included in the HTML file
• Automatic creation of package.json
• Automatic installation of the required NPM packages
• License (ISC)
• Config files (dotfiles):
  • Eslint
  • Git
  • NPM
  • Remark (Markdown)
  • Stylelint (CSS)
• JavaScript linting with eslint
  • Following Standard code style
  • Extended linting to json, html and markdown files
  • Linting of filenames according to exports
• Markdown linting with remarklint, using the recommended preset.
• CSS linting with stylelint following stylelint-config-standard

Options

Jest

Installing the generator with Jest:

yo uncomplicated --jest

Run tests

yarn test

Developing

You can add your tests in the test folder. The __test__/index.test.js is the entry file.

Additional features

• Index.js with sample tests.
• Eslint support for jest.

Webpack

Installing the generator with Webpack:

yo uncomplicated --webpack

Launching dev server

Webpack provides a dev server with hot reload:

yarn serve

Creating a build

You can create a build to deploy by running the following command:

yarn build

Additional features

• Base HTML file with meta and icons
• Babel support with linting
• Automatic creation of package.json
• JavaScript linting with eslint
• Webpack support
  • Production and Development environments
  • Hot reload
  • CSS and JavaScript bundling
• Automatic generation of logos and icons from logo.svg

Cookbook

Create new html file

A new HTML file, test.html in this case, can be added by adding the following code in the webpack.common.js.

plugins: [
  new HtmlWebpackPlugin({ template: 'source/index.html' }),
  new HtmlWebpackPlugin({
    filename: 'test.html',
    template: 'src/assets/test.html'
  }),
  new FaviconsWebpackPlugin('./source/assets/logo.svg'),
  new CleanWebpackPlugin()
]

You can get more information in the html-webpack-plugin.