Created for Gray Area's Creative Code Intensive. Last updated for fall 2025.

Building on another socket drawing app, this example (temporarily) stores past gestures/strokes to the server so that new clients can see past drawings. See client.js for updates to the p5.js code, which includes receiving a new kind of message from the server that will enable drawing past strokes. See server.js for additional implementation to store strokes in an array. Note that this storage is not very permanent—it will only stick around as long as the server is not restarted. For more permanent storage, you will need a database (example coming in-class on Thursday).

Node.js is a popular runtime that lets you run server-side JavaScript. This project uses the Express framework.

You'll get best use out of this project if you're familiar with basic JavaScript. If you've written JavaScript for client-side web pages this is a little different because it uses server-side JS, but the syntax is the same!

← README.md: That’s this file, where you can tell people what your cool website does and how you built it.

← public/style.css: The styling rules for the pages in your site.

← public/client.js: The JavaScript for the site's front-end. This connects to a socket to talk to the server and contains our p5.js code.

← public/index.html: This is the main index for the site. In other Glitch examples, you may see HTML templates with libraries like Handlebars instead of an index.html

← server.js: The Node.js server script for your new site. In this example, we set up some simple socket communication in addition to serving HTML, CSS, and JS files.

← package.json: The NPM packages for your project's dependencies.

Want a minimal version of this project to build your own Node.js app? Check out Blank Node!

Note: this is a template developed by Glitch and uses Fastify instead of Express. Both libraries are similar in function, but have different syntax.

Glitch is a friendly community where millions of people come together to build web apps and websites.

• Need more help? Check out our Help Center for answers to any common questions.
• Ready to make it official? Become a paid Glitch member to boost your app with private sharing, more storage and memory, domains and more.

Glitch was a friendly community where people shared and hosted creative websites. Glitch shut down in summer 2025. Some of the text in this file is adapted from their node start project README.

Example adapted from The Coding Train.