milka is a custom server tool built using deno and
rspack to locally run and reload creative coding sketches
without having to manually create html files for each one. 1
currently only p5js is supported for rendering sketches.
some features will be added as project progresses, like building sketches for NFT marketplaces; but for now:
work with p5js sketches out of the box with no configuration needed, just create
your sketch code with setup() and draw() functions; making sure to export
them:
function setup() {
// sketch setup
}
function draw() {
// sketch draw
}
// export them for milka to correctly link them
export default { setup, draw }Important
there's no need to setup an index.html or any configuration to start working
on a sketch. just your code and milka will handle everything for you
you can add code for your sketches and visualize them on your localhost once
milka is up and running; any changes done to the sketches files will
automatically be detected and the page will be reloaded.
there's currently 3 formats accepted to work with sketches:
|
standalone file |
creating any .js file under sketches/ allows the sketch to be rendered
when navigating to localhost:PORT/yourFile.
|
|
standalone with config |
you can save your project under a directory inside sketches/ and add your
sketch .js file there, this allows you to add a milka.config.ts file if
you want to configure the project with specific values (more configuration
will be added as features are created).
|
|
multiple files |
having a directory inside sketches/ allows you to organize your sketch into
different files that milka will still handle and show when rendering your
sketch.the default entry file used by milka for your sketch will be sketch.js, if
you wish to change this value be sure to add a milka.config.ts file
overriding with your preferences:import { ProjectConfig } from '@/compiler/config/index.ts'
export const config: ProjectConfig = { entry: 'otherEntryPoint', }be sure to export any needed functions or classes needed for your entrypoint to render the sketch so milka can properly link
them:// inside yourOtherFile.js
// ...
// define `myFunction` and `myClass` as you wish
// ...
// make sure to export them
export default { myFunction, MyClass }
|
Tip
it's possible to organize sketches into directories allowing flexibility for developing and organization.
naming a directory between brackes ([dirName]) will allow milka to
"ignore" the directory; meaning it won't be part of the request path needed to
render the sketch. for example: A sketch saved on
sketches/[my2025sketches]/happy.js can be rendered through
localhost:PORT/happy
you can find some sketch examples here.
after cloning or downloading the repo; only deno is required to run the project:
- install dependencies:
deno install- run the local server:
deno run servethe environment variable PORT can be set on the .env file to change the
default port.
- navigate to the project you wish to work on:
example:
localhost:8000/milka🔗 this will try to render the sketch matchingmilka(directory or standalone file); listen for changes on the file and reload if needed.
Footnotes
-
built with 🤍 by me for me ↩