Linux/Mac

https://github.com/creationix/nvm

Windows

https://github.com/coreybutler/nvm-windows

Install Node.js

nvm install 14.3.0

list versions

nvm list

use version

nvm use 14.3.0

git clone https://github.com/unic/darvin-boilerplate.git myProject

cd myProject

npm start

Full start

npm start

Fast start

npm run dev

bundle dev

npm run dev-bundle

bundle system dev

npm run dev-bundle-system

bundle dev

npm run prod

bundle prod

npm run prod-system

config/.darvinrc.modern.json

{
  "settings": {
    "base": ["js", "typescript"],
    "default": ["cleaner", "copy", "fonts", "images", "sprites", "modernizr", "sass"],
    "html": ["nunjucks"],
    "devserver": ["webpackdev"],
    "framework": ["vue"],
    "addons": ["favicons", "analyzer", "markdown", "i18n"]
  },
  "name": "My Project",
  "company": "Unic AG"
}

Example

{
  "name": "Vue.js",
  "value": "vue",
  "type": "framework"
}

1. Create Dir

Navigate to the settings and create folder

cd webpack/settings
mkdir javascript-react

2. Add Dependencies

Create a package.json inside the new directory and add dependencies.

Example

{
  "dependencies": {
    "react": "^16.9.0",
    "@babel/preset-react": "^7.0.0",
    "react-dom": "^16.9.0"
  }
}

3. Add Darvin Config

Add a new darvin configuration and set the type for CLI purpose.

Example

{
    "name": "React",
    "value": "react",
    "type": "framework"
}

4. Add webpack settings

Create index.js and set the webpack config for dev, prod and prev.

Example

const prod = {
  plugins: [
    new ...({

    }),
  ],
}

const dev = {
  plugins: [
    new ...({

    }),
  ],
}

const prev = {
  plugins: [
    new ...({

    }),
  ],
}

5. Hook into lifecycle

Add your new setting to build process by adding the value under defined type array.

Example

{
  "settings": {
    "base": ["js"],
    "default": ["cleaner", "fonts", "images", "sass"],
    "html": ["twig"],
    "devserver": ["browsersync"],
    "framework": ["react"],
    "addons": ["analyzer", "markdown"]
  },
  "name": "My Project",
  "company": "Unic AG"
}

Example

global.project = 'Darvin';
global.mainChunk = 'js/main'; // other entrypoints can be defined in the webpack.config.*.js -> settings.entry[global.mainChunk]
global.proxy = 'unic.local'; // used proxy if boilerplate initialised with thirdparty
global.port = 8001; // dev server port
global.template = {
  'extIn': 'njk', // template extensions for HTML Engine
  'extOut': 'html' // rendered extensions for HTML Engine
}
global.preview = {
  indexFileInput: 'index.njk', // preview template file
  indexFileOutput: 'index.html' // rendered preview file
}
global.inputDirs = {
  src: 'src', // source directory in project root
  assets: 'assets', // asset directory in source directory
  templates: 'templates', // html templates in source directory
  scripts: 'scripts' // directory for scripts and entrypoint
}
global.output = {
  'index': 'index' // start index name
}
global.server = {
  'base': (process.env.NODE_ENV === 'dev') ? '' : '', // root path to assets directory (different on system config)
  'assets': 'assets' // name of systems assets directory
}
global.build = {
  'legacy': true // build IE11 styles
}

bind CLI

npm link

show commands

darvin-cli usage

add new module to project

darvin-cli add

show settings

darvin-cli list

init settings

darvin-cli init

src/scripts/main.js

window.apps = {};
window.apps.main = createApp({
  modules: {
    // Directly integrate module
    button,

    // lazy-load module if it's found in the DOM
    'vue-module': () => import(/* webpackChunkName: "vue-mod" */ './demo/vue-module'),

    // lazy laod when scrolled to this element
    'lazy-module': {
      lazy: true,
      handler: () => import(/* webpackChunkName: "lazy-mod" */ './demo/lazy-module'),
    },
  },
});

src/scripts/demo/lazy-module.js

import createModule from '@scripts/libs/create-module';

export default createModule({
  options: () => ({
    foo: 'bar',
  }),

  /**
   * createVueModule
   * @param {Object} module - Module
   * @param {Element} module.el - Element
   * @param {Object} module.state - State
   * @param {Object} module.options - Options
   * @return {Object} state
   */
  constructor({ el, state, options }) {
    el.innerHTML = 'this is lazy initiated by IntersectionObserver; ' + options.foo;

    return state;
  },
});

Hook HTML with script

<!-- START - m01-lazymod -->
  <div class="m-lazymod" data-module="lazymod" data-lazymod-options='{"json": true}'>
    <a class="lazylink">
      ..
    </a>
    <div class="lazybody">
      ..
    </div>
  </div>
  <!-- END - m01-lazymod -->