webpack-to-do-app

Sample "To Do" application powered by dna-engine and built with webpack

Build the project by running build.sh.command or by using the commands:

$ cd webpack-to-do-app
$ npm install
$ npm test
$ open dist/index.html

The build process creates a dist folder:

webpack-to-do-app/
   dist/
      bundle.js
      index.html

webpack treats the dna-engine library as a module.  Use import statements in your application to pull in the library's JavaScript and CSS:

app.js

// Imports
import { dna } from 'dna-engine';
import '../css/app.css';

app.css

/* Imports */
@import "dna-engine/dna-engine.css";

Then use dna.registerContext(appName, appObject) to expose your application so its functions can be used as callbacks from web pages:

const myApp = {
   doSomething(elem) {
      console.log('myApp.doSomething() was called.');
      },
   };

dna.registerContext('myApp', myApp);  //give dna-engine access to your code

Now in the HTML you can wire up a button to call the function:

<button data-on-click=myApp.doSomething>Do Something</button>

See the example code in app.js.

---

MIT License