It's so easy! build in 5 minutes! WEB/PWA/SPA boilerplate CLI.

$ npm i -g @io-arc/cli
# or
$ yarn global add @io-arc/cli

$ cd <Project Directory>
$ io-arc

Documents | Set up configuration | Builds

• HTML (with handlebars)
• Pug

The global constants that are available: HTML (with handlebars), Pug

• CSS
• SASS(SASS/SCSS)
• Stylus

• Babel
• TypeScript

Automatically available in selected preprocessors.

• Vue (Babel/TypeScript)

• BrowserSync

• File copy - (documents)
• YAML to JSON file build - (documents)
• Build directory clean - (documents)
• Stats for library used
• Create manifest.json - (documents)
• Create Web Worker (Use worker-loader) - (documents)
• Create Service Worker (Use WorkBox) - (documents)
• PNG/JPG/GIF to Webp files - (documents)

Create directory structure below.

<Project Directory>
    ├ config/ (settings)
    │   ├ default.yml (site settings)
    │   ├ development.yml
    │   ├ production.yml
    │   ├ local.yml (build settings)
    │   ├ local-development.yml
    │   ├ local-production.yml
    │   └ webpack.extends.js
    ├ config-vue/ (select Vue only)
    │   └ .pug-lintrc.json
    ├ src/ (working directory)
    │   ├ css/
    │   ├ html/
    │   ├ img/ (using file-loader)
    │   ├ js/
    │   ├ static/ (file copy)
    │   └ yaml2json/
    ├ types/ (select TypeScript only)
    ├ .babelrc (select Babel only)
    ├ .browserslistrc
    ├ .editorconfig
    ├ .eslintrc.yml
    ├ .pug-lintrc.json (select Pug only)
    ├ .gitignore
    ├ .npmrc
    ├ .prettierrc
    ├ tsconfig.json (select TypeScript only)
    ├ package.json
    └ webpack.config.js

Internally, the build can be tweaked using the node-config library.

Settings related to the website, such as the site title, are specified in the default.yml or development.yml or production.yml.
See example for default.yml.

See documents.

The build configuration is done in local.yml.
See example for local.yml.

See documents.

There are several extensions available on the user side as well.
The extension is configured in <project>/config/webpack.extends.js.

The extensible webpack options are as follows.

• externals
• module rule
• plugins

See example.

See documents.

If you want to use global constants other than those available in TypeScript and Babel, you can use CONFIG global constants.

# config/local-development.yml
api: https://foo.com

console.log(CONFIG.api)
// result => https://foo.com

* If you are using TypeScript, please define the type by yourself.