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
The global constants that are available: HTML (with handlebars), Pug
Automatically available in selected preprocessors.
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.
The build configuration is done in local.yml
.
See example for local.yml.
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.
See example.
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.