A barebones boilerplate for getting started on a bespoke front end.
For development tools and building:
yarnwithin the project root directory in Terminal.
yarn run build:watch.
yarn run startin another tab. Tada!
Ensure your editor supports:
package.jsonconfig. Atom users install linter-eslint.
package.jsonconfig. Atom users install linter-stylelint.
After inspecting the example components:
yarn run init. This script also deletes itself.
/package.jsonfor build tools.
/readme.mdto be about your project.
/componentscontains a sub-directory for each component, holding source JS, styles and image assets. Avoid nesting component directories as a flat structure guarantees unique component names, makes paths less complex and encourages reuse.
/components/appis the top component for the entire site and is the JS and CSS entrypoint; from here components are recursively imported and initialized. Import polyfills here.
/bundleis the compiled JS, CSS and sourcemaps.
/contentis where actual content such as images live. This is analogous to a CMS
uploadsfolder and can be organized however you like. Never place content assets or hardcode content text anywhere in
||Remove Barebones examples and references.|
||Lint JS (see
||Lint JS and automatically fix issues.|
||Lint CSS (see
||Compile JS and CSS to
||Build, rebuilding on source file changes.|
||Start a dev server and open in browser.|
bodyare an exception as they form the top
/components. For example,
icon-linkis more versatile than