This template repo provides a great starting point to make sketches with p5.js, webpack, and node. It comes with a pre-configured dev server and (the coolest feature) automatic deployment from the main branch to GitHub pages. This means that the latest version of your sketch pushed to GitHub will always be live for you to share on the internet!
Main benefits of this boilerplate over the p5 web editor or a simple local set up with only an index.html
and a sketch.js
:
- You can use any npm packages in your sketches! Some packages that might be useful are Flatten.js and geometric, but there are literally millions of packages to choose from.
- If you're using an IDE, you can click in to the p5 methods to see their arguments and how they work.
- Once you've cloned the repo to your local machine, you don't need an internet connection to work on your sketch.
- It deploys your sketch to GitHub pages automatically so you can easily share your sketch on the internet.
- Functions to export as PNG and SVG are already implemented in the sketch. Press
s
to save as PNG andshift+s
to save as SVG.
- Click the big green
Use this template
button at top right andCreate a new repository
. - Name the repository whatever you want and make sure to check the
Include all branches
checkbox. HitCreate repository from template
to create your new repo. - Clone your newly created repo to your local machine. (
git clone <your-repo-url>
) - In the terminal,
cd
into your newly cloned repo and runnpm run start
to start the dev server. - Edit
index.ts
using any IDE or text editor you like. Every time you save the dev server will automatically refresh so you can see your changes live. - When you're happy with your sketch, commit your changes to the
main
branch and push them to GitHub. Your sketch will be automatically built and deployed to GitHub pages and will be live on the internet athttps://<your-username>.github.io/<repo-name>
- I forgot to check
Include all branches
when I created my repo from the template.- When you commit to
main
and push to GitHub, the pre-configured GitHub action will build the project and copy the build to a new branch calledgh-pages
. You will just have to go into the settings for your repo and configure GitHub pages to serve up the root of thegh-pages
branch.
- When you commit to