@io-arc/cli v1.1.1

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

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
• YAML to JSON file build
• Build directory clean
• Stats for library used
• Create manifest.json
• Create service-worker (Use WorkBox)

How to create manifest.json

Put manifest.yml or manifest**.yml(e.g. manifest-ios.yml) directly under the workspace.
If the file name is prefix with '_'(e.g. _manifest.yml), it is not applicable.

Reference See: @io-arc/task-manifest

How to create service-worker file

Execute src/sw.js if it exists.
It is created using generateSW of WorkBox.

Reference See: @io-arc/task-service-worker

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
    ├ 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
    ├ .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.

Build settings

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

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.