anfibiacreativa

#base=/path/to/code/component-one

module/my.module.bundle-one.js
my.component.bundle-one.js

anfibiacreativa

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    categories="[the.category.name.you.wish]"
    dependencies="[some.category, some.other.category]"
    embed="[yet.this.other.category]"
    allowProxy="{Boolean}true"/>

anfibiacreativa

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    categories="[the.category.name.you.wish]"/>

anfibiacreativa

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "some-huge-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "",

anfibiacreativa

{
  "name": "some-huge-app",
  "version": "1.0.0",
  "description": "Some Huge App",
  "main": "index.js",
  "scripts": {
    "typings": "typings",
    "typings:install": "npm run typings install --global --source --save",
    "build:initial": "npm run typings:install && npm run build",
    "build": "node_modules/.bin/webpack",

anfibiacreativa

// States should also be easily identifiable.
// Because they're connected to dynamic behavior!
// And you want to quickly spot them

// do!
.example {
  &__list {
    &-isCollapsed {
      // code
    }

anfibiacreativa

// Now let's talk about modifiers

// do!

.example {
  &__wrapper {
    &--wide {
      // code
    }
    

anfibiacreativa

// ok, this file is called example-block?! How is that?! 
// No, this is just to identify gists ;)

// Sooo, name the element after, you know, an element or a generic reference to it!
// do!
.example {
  &__wrapper {
    // code
  }
  

anfibiacreativa

// The file is called example.scss , you noticed? Yes, call your file as your block, and put only code related to it, in it.

// do!
.example {
  // your code here
}

// don't!
.my-Example-component {
  // your code here

anfibiacreativa

$ cd ~/frontend

$ NPM_FRONTEND_MODULE_BASE_DIR=tenants/tenant/components/package npm run build