Install the framework using npm from our repo
npm install @nautoguide/ourthingsOpen the framework examples in your web browser
Add an include for our framework
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="../build/bundle.js"></script>
</head>
<body>
<div id="content">
Hello World
</div>
</body>
</html>
Add a templates.json file to the directory where you html page is
{ "version": 1.0, "templates":["actions.html"] }Add a html template called actions.html that you reference above
<script id="init" type="text/html">
<!-- init is always run automatically on startup -->
@templates.render({"targetId":"#content","template":"#basic"},{"queueRun":"Instant"});
</script>
<script id="basic" type="text/html">
Very basic template
</script>That's it, now open the page in the browser and you will see your Hello World has been replaced with Very basic template
Install the framework using npm from our repo
#npm install @nautoguide/ourthingsWe use webpack to build so install this using
npm install webpack
npm install webpack-cli
Now create your self an index.html containing your base site
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="dist/main.js"></script>
</head>
<body>
<div id="content">
Hello World
</div>
</body>
</html>
Add a templates.json file to the directory where you html page is
{ "version": 1.0, "templates":["actions.html"] }Add a html template called actions.html that you reference above
<script id="init" type="text/html">
<!-- init is always run automatically on startup -->
@templates.render({"targetId":"#content","template":"#basic"},{"queueRun":"Instant"});
</script>
<script id="basic" type="text/html">
Very basic template
</script>Now your javascript code goes in src/index.js
import { Queue } from '@nautoguide/ourthings';
import Templates from '@nautoguide/ourthings/Queueable/Templates';
import Elements from '@nautoguide/ourthings/Queueable/Elements';
let queue;
document.addEventListener("DOMContentLoaded", function(event) {
queue = new Queue({"templates":Templates,"elements":Elements});
window.queue=queue;
});And last of all add a webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'site/dist')
}
};Thats it. Now you can run 'webpack' from the command line and you have a custom build
Lets walk over what has happened here. When you specified actions.html in the json files ourthings loaded that template and looked for the a script entry called "init". In there the command:
@templates.render({"targetId":"content","template":"basic"},{"queueRun":"Instant"});was run. It called the queueable module templates and the function render with the argument json {"targetId":"content","template":"basic"}. The second json argument indicateds we want this queue to run instantly
To understand how the queueable command structure works and is formatted please read the command guide bellow and then checkout the API reference for all included queueables