Table of Contents

System Requirements

To use this template, you will first need to have the following software installed on your system:

  • Node.js - Current version compatibility is specified in package.json under the engines field
  • npm - Bundled with Node.js installation
  • Text editor or IDE of your choice - Visual Studio Code and WebStorm are two popular options for TypeScript development. For a pared down developer experience, you can use a text editor like Sublime Text.
  • Web browser of your choice for testing and running your sketches

Getting Started

Creating a New Project

To create a new project from this template, you can use the GitHub “Use this template” feature to create a new repository based on this template. Once your new repository is created, you can clone it to your local machine.

Alternatively, you can download the template source code as a ZIP file and extract it to your desired location.

Installing Dependencies

Once you have created your new project, navigate to the project directory in your terminal and run the following command:

npm install

npm install will install all the dependencies required to test and run this project.

Project Structure

Source code for your sketches should be placed in the src/ directory. The src/sketch.ts file provided contains a simple p5.js program with a black background and a white circle. This file will be used as the entry point for webpack. The webpack build configuration lives in webpack.config.mjs.

Production and development builds are written to the _dist/ directory, which is generated and not committed.

Running the Sketch on a localhost Development Server

To test your sketch, navigate to the project directory in your terminal and run the following command:

npm run dev

npm run dev will bundle the sketch in development mode, start a localhost development server (127.0.0.1:8080), and open a new browser window for the index.html file bundled with the compiled sketch. Development server settings live alongside the build configuration in webpack.config.mjs, under the devServer object.

Available npm Scripts

  • npm run lint:js - lint repository files with eslint.config.js.mjs
  • npm run lint:ts - lint repository files with eslint.config.ts.mjs
  • npm run lint:all - run both lint configurations in sequence
  • npm run build - bundle the sketch source code and dependencies with webpack in production mode
  • npm run build:dev - bundle the sketch source code and dependencies with webpack in development mode
  • npm run build:check - run both build scripts in sequence
  • npm run serve - bundle the sketch in production mode, start a localhost development server, and open a new browser window for the index.html file bundled with the compiled sketch
  • npm run dev - bundle the sketch in development mode, start a localhost development server, and open a new browser window for the index.html file bundled with the compiled sketch
  • npm run test - placeholder for a future test runner; the template ships none, and the script exits with an error until one is added
  • npm run validate - run lint and build checks in sequence

Resources and References

For additional information about the software and tools discussed in this guide, the following resources may be helpful:

Node.js and npm Resources

Text Editor and IDE Resources

Git and GitHub Resources

Unix Shell

Back to top.