Template for p5Js projects that uses Typescript and Fusebox for fast, iterative development. I created this to help port a legacy Processing Java application to p5Js. Porting it to Typescript with Fusebox meant I had little dependency overhead to worry about (see package.json).
- I highly recommend n or nvm for installing Node - I used Node 14.x & npm 6.x.
- Clone this project
npm i- Run
npm run sketch - Open http://localhost:4444
- Modify
src/sketch.ts, save it, watch sketch auto-reload in browser. - Have fun!
You can publish your sketch to Open Processing. This repo is posted for you as an example.
- Run
npm run dist - Copy/Paste the contents of
./dist/app.jsto your sketch. - Add the mp3 from
dist/resourcesto the sketch Files tab. - Turn on p5.Sound in your Sketch
- Source Maps are turned on by default which means you can set breakpoints in the browser or in Visual Studio Code (use Chrome Debugging extension).
- Fusebox vs Webpack - Fusebox has incredibly fast hot module reloading and native Typescript support. QED for me.
- UPDATE - The upgrade from Fusebox 3 to 4 was way harder than it needed to be. The hardest part is there was absolutely zero migration guide. This made it hard but then some of the powerful things such as bundle instructions were replced with, well, magic. It's still very fast but the lack of any real documenation means I will move to either Parcel or Webpack at some point.