Skip to content

HelixUI with Vanilla HTML

Jump to bottom
Ryan Johnson edited this page Feb 3, 2020 · 2 revisions

(a.k.a. No framework)

Installing

Prerequisites

  1. Latest stable NodeJS (for the npm and npx command-line utilities)
  2. helix-ui v0.18.0 or later

Assumptions

(all paths are relative to the root of the project directory)

  1. Web server assets live in public/
  2. Application assets live in public/assets/ (coded by you)
  3. Vendor assets live in public/vendor/ (coded by 3rd party)

Instructions

1. Install NPM Assets

npm install helix-ui vendor-copy
  • vendor-copy allows you to automatically copy bundled assets to your project after npm install.

2. Configure package.json

2.1 - Modify package.json

Include the following configurations:

{
  "scripts": {
    "postinstall": "vendor-copy"
  },
  "vendorCopy": [
    {
      "from": "node_modules/helix-ui/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js",
      "to": "public/vendor/webcomponents-loader.js"
    },
    {
      "from": "node_modules/helix-ui/node_modules/@webcomponents/webcomponentsjs/bundles",
      "to": "public/vendor/bundles"
    },
    {
      "from": "node_modules/helix-ui/dist/css/helix-ui.min.css",
      "to": "public/vendor/helix-ui.min.css"
    },
    {
      "from": "node_modules/helix-ui/dist/js/helix-ui.module.min.js",
      "to": "public/vendor/helix-ui.module.min.js"
    },
    {
      "from": "node_modules/helix-ui/dist/js/helix-ui.min.js",
      "to": "public/vendor/helix-ui.min.js"
    }
  ]
}
2.2 - Copy Vendor Assets

Run the following to copy files configured via the vendorCopy configuration, above.

npx vendor-copy

NOTE: You may also want to verify that your postinstall script is working as expected, by running npm install.

3. Consuming Assets in your App

Follow the instructions in the "Getting Started" guide, starting from "Consuming Assets" (we've already handled steps 1 and 2 in the instructions above).

Compatibility

Other Notes

TBD...

Clone this wiki locally