io-arc / io-arc

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

io arc

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

Install

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

Usage

$ cd <Project Directory>
$ io-arc

Documents | Set up configuration | Builds

Select language and frameworks

HTML template engine

• HTML (with handlebars)
• Pug

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

CSS language

• CSS
• SASS(SASS/SCSS)
• Stylus

JS preprocessor

• Babel
• TypeScript

JS framework

Automatically available in selected preprocessors.

• Vue (Babel/TypeScript)

Local Server

• BrowserSync

Other default use

• 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)

Directory structure

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

Build options

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

Site settings

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.

Build settings

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

See documents.

Extending the webpack build

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.

Using undefined node-config data on the client side

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.