https://github.com/dna-engine/webpack-to-do-app

Sample "To Do" application powered by dna.js and built with webpack
https://github.com/dna-engine/webpack-to-do-app

sample starter todo webpack

Last synced: about 2 months ago
JSON representation

Sample "To Do" application powered by dna.js and built with webpack

• Host: GitHub
• URL: https://github.com/dna-engine/webpack-to-do-app
• Owner: dna-engine
• License: mit
• Created: 2017-02-25T02:11:08.000Z (almost 8 years ago)
• Default Branch: main
• Last Pushed: 2024-09-11T01:18:42.000Z (4 months ago)
• Last Synced: 2024-09-11T06:03:26.066Z (4 months ago)
• Topics: sample, starter, todo, webpack
• Language: JavaScript
• Homepage: https://dna-engine.org/docs/#setup-webpack
• Size: 46.9 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# webpack-to-do-app



_Sample "To Do" application powered by dna-engine and built with webpack_

[![License:MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://dna-engine.org/license)

[![Build](https://github.com/dna-engine/webpack-to-do-app/actions/workflows/run-spec-on-push.yaml/badge.svg)](https://github.com/dna-engine/webpack-to-do-app/actions/workflows/run-spec-on-push.yaml)

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](https://webpack.js.org) treats the [dna-engine](https://dna-engine.org) library as a module. 

Use `import` statements in your application to pull in the library's JavaScript and CSS:

**app.js**

```javascript

// Imports

import { dna } from 'dna-engine';

import '../css/app.css';

```

**app.css**

```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:

```javascript

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:

```html

Do Something

```

See the example code in [app.js](src/js/app.js).

---

[MIT License](LICENSE.txt)