Getting Started with maker.js and Glitch

[didny]

Hi maker.js team.

I am trying to use maker.js but stuck at the very first place, loading the library.

I have added a script tag in my HTML:

<script src="https://maker.js.org/target/js/browser.maker.js" type="text/javascript"></script>

and tried to use the require function to get a reference inside the client-side JavaScript,
var makerjs = require('makerjs');
which ended up Uncaught ReferenceError: require is not defined error.

I assume I need to use node.js, but as i am not familiar with node.js,
I cannot figure out how to proceed after loading library on the server.

Here is my current attempt on glitch.
https://glitch.com/edit/#!/makerjs-test?path=public%2Fscript.js%3A6%3A0

Any suggestions or pointers are welcome.
Thank you in advance!

[danmarshall]

Hi @didny , thanks for asking, Glitch is really cool and I hope this helps others get started too.

1. Let's skip the node.js stuff for now, and just start with hello-webpage in Glitch
2. Add the Maker.js script tag before the script.js tag
3. Add a div to the html page: <div id="drawing"></div>, we will put svg in here instead of document.write()
4. In script.js add the following code:

var drawingDiv = document.getElementById("drawing");
const makerjs = require("makerjs");
const model = new makerjs.models.Star(5, 100)
drawingDiv.innerHTML = makerjs.exporter.toSVG(model);

You can see my project here: https://glitch.com/edit/#!/husky-pollen-pharaoh

Hope this helps. Happy coding!

[didny]

Thank you @danmarshall for the swift response and clear instructions.

Now I have managed to get maker.js to draw basic drawings! This is Awesome!
https://glitch.com/edit/#!/aboard-tortoiseshell-bass

Thank you for creating great library! It opened up a lot of possibilities for me.

Cheers!