@area17/a17-boilerplate

A17 FE Boilerplate - 3.0(Release Candidate)

• Wiki https://code.area17.com/a17/fe-boilerplate/wikis/home
• Issues https://code.area17.com/a17/fe-boilerplate/issues

Introduction

The rebuild of A17 FE Boilerplate.

Highly inspired by kcd-scripts and react-scripts

Installtion

No more clone. It is an npm package.

Via a17-generator

Please see instructions here a17-generator.

Manual install

Go to the project root, and run:

$ npm install @area17/a17-boilerplate

After the package is installed please run:

$ npx a17-bp init

Tasks

All avaliable tasks are listed in package.json file as npm tasks.

Configuration

A17 BP 3.0 has a bunch of config files located in the /config folder. If not specified, A17 BP 3.0 will use configurations with it.

Custom configuration is enabled via adding corresponding configuration file in the right place.

For example, place manifest.json file into the project's frontend folder will have A17 BP 3.0 use this file instead of the default one in the /config folder.

That is to say, it works the way that it will look for configuration file or use default. No command for configuration.

Update Log

3.0.0-rc.4

• Update icon task so ids of the svg symbols are prefixed with icon--.

3.0.0-rc.3

• Add non-frontend file watch support. In manifest.json, just add bs options to config like the following example (it is using relative path to the root of frontend folder):

  {
    "config": {
      "bs" : {
        "watchExtra" : [
          "./*.php"
        ]
      }
    }
  }
  

3.0.0-rc.2

• Fix warning in Sass, typography mixin : "&&" means two copies of the parent selector. You probably want to use "and" instead.

3.0.0-rc.1

• Safely update packages
• Watch images

3.0.0-beta.8

• Clean dist folder before doing a build

• Add the rev task : a rev-manifest.json file will be added at the root of the dist folder to map assets with revisioned ones

• In dev the rev-manifest.json will look like this npm run build :

  {
    "styles/app.css":"styles/app.css",
    "styles/html4css.css":"styles/html4css.css",
    "scripts/app.js":"scripts/app.js",
    "scripts/head.js":"scripts/head.js"
  }
  

• In production npm run prod :

  {
    "styles/app.css":"styles/app-7ad77318e2.css",
    "styles/html4css.css":"styles/html4css-894eb0106a.css",
    "scripts/app.js":"scripts/app-e82b5c7421.js",
    "scripts/head.js":"scripts/head-b39adeb404.js"
  }
  

3.0.0-beta.7

• Add script source map

3.0.0-beta.6

• Refactor icon task so it is only using svg-store and svgo (it remove the phantomjs dependency)

3.0.0-beta.5

• Add sass source map

3.0.0-beta.4

• Use Webpack to watch scripts (other files are still watchting via package watch)

3.0.0-beta.3

• Add icon watch and revise some readme info.

3.0.0-beta.2

• Updated some instructions

3.0.0-beta.1

• The bp 3.0