Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/io-arc/io-arc
It's so easy! build in 5 minutes! WEB/PWA/SPA boilerplate CLI.
https://github.com/io-arc/io-arc
babel browser-sync cli css html json nodejs pug sass stylus typescript webpack workbox yaml
Last synced: 3 months ago
JSON representation
It's so easy! build in 5 minutes! WEB/PWA/SPA boilerplate CLI.
- Host: GitHub
- URL: https://github.com/io-arc/io-arc
- Owner: io-arc
- License: isc
- Created: 2020-03-15T22:19:19.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-06-02T17:18:44.000Z (over 1 year ago)
- Last Synced: 2024-04-13T18:17:18.633Z (9 months ago)
- Topics: babel, browser-sync, cli, css, html, json, nodejs, pug, sass, stylus, typescript, webpack, workbox, yaml
- Language: TypeScript
- Homepage:
- Size: 2.52 MB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# io arc
It's so easy! build in 5 minutes! WEB/PWA/SPA boilerplate CLI.
## Install
```shell script
$ npm i -g @io-arc/cli
# or
$ yarn global add @io-arc/cli
```
## Usage
```shell script
$ cd
$ io-arc
```
[Documents](https://io-arc.tech/) | [Set up configuration](https://io-arc.tech/configuration/) | [Builds](https://io-arc.tech/build/)
## Select language and frameworks
### HTML template engine
- HTML (with handlebars)
- Pug
The global constants that are available: [HTML (with handlebars)](tasks/task-webpack-html#features), [Pug](tasks/task-webpack-pug#features)
### CSS language
- CSS
- SASS(SASS/SCSS)
- Stylus
### JS preprocessor
- Babel
- TypeScript
#### JS framework
Automatically available in selected preprocessors.
- Vue (Babel/TypeScript)
## Local Server
- [BrowserSync](https://browsersync.io/)
## Other default use
- File copy - ([documents](https://io-arc.tech/plugins/tasks/copy.html))
- YAML to JSON file build - ([documents](https://io-arc.tech/plugins/tasks/yaml2json.html))
- Build directory clean - ([documents](https://io-arc.tech/plugins/tasks/clean.html))
- Stats for library used
- Create manifest.json - ([documents](https://io-arc.tech/plugins/tasks/manifest.html))
- Create Web Worker (Use [worker-loader](https://github.com/webpack-contrib/worker-loader)) - ([documents](https://io-arc.tech/build/js.html#web-worker))
- Create Service Worker (Use [WorkBox](https://developers.google.com/web/tools/workbox/modules/workbox-build)) - ([documents](https://io-arc.tech/plugins/tasks/service-worker.html))
- PNG/JPG/GIF to Webp files - ([documents](https://io-arc.tech/plugins/tasks/webp-converter.html))
## Directory structure
Create directory structure below.
```text
├ 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](https://github.com/lorenwest/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](packages/env/config/default.yml).
[See documents](https://io-arc.tech/configuration/site.html).
### Build settings
The build configuration is done in `local.yml`.
See example for [local.yml](packages/env/config/local.yml).
[See documents](https://io-arc.tech/configuration/build.html).
## Extending the webpack build
There are several extensions available on the user side as well.
The extension is configured in `/config/webpack.extends.js`.
The extensible webpack options are as follows.
- [externals](https://webpack.js.org/configuration/externals/)
- [module rule](https://webpack.js.org/configuration/module/#rule)
- [plugins](https://webpack.js.org/configuration/plugins/)
See [example](example/config/webpack.extends.js).
[See documents](https://io-arc.tech/configuration/webpack.html).
## Using undefined [node-config](https://github.com/lorenwest/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.
```yaml
# config/local-development.yml
api: https://foo.com
```
```javascript
console.log(CONFIG.api)
// result => https://foo.com
```
\* If you are using TypeScript, please define the type by yourself.