A barebones boilerplate for getting started on a bespoke front end.
For development tools and building:
yarn
within the project root directory in Terminal.yarn run build:watch
.yarn run start
in another tab. Tada!Ensure your editor supports:
package.json
config. Atom users install linter-eslint.package.json
config. Atom users install linter-stylelint.After inspecting the example components:
yarn run init
. This script also deletes itself./index.html
./content
./package.json
for build tools./readme.md
to be about your project./components
contains 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/app
is 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./bundle
is the compiled JS, CSS and sourcemaps./content
is where actual content such as images live. This is analogous to a CMS uploads
folder and can be organized however you like. Never place content assets or hardcode content text anywhere in /components
!Command | Purpose |
---|---|
yarn run init |
Remove Barebones examples and references. |
yarn run lint:js |
Lint JS (see eslintConfig in package.json ). |
yarn run lint:js:fix |
Lint JS and automatically fix issues. |
yarn run lint:css |
Lint CSS (see stylelint in package.json ). |
yarn run clean |
Delete /bundle . |
yarn run build |
Compile JS and CSS to /bundle . |
yarn run build:watch |
Build, rebuilding on source file changes. |
yarn run start |
Start a dev server and open in browser. |
html
and body
are an exception as they form the top app
component./components
. For example, icon-link
is more versatile than contact-us-link
.