/p5-typescript-dev-server

Starter project for a p5.js sketch with TypeScript, esLint, Hot Reloading, WebPack and npm

Primary LanguageJavaScript

a Simple p5 starter project with TypeScript, esLint, Prettier, WebPack and Live Reloading

About The Project

This project contains a simple starter template to write p5 sketches in TypeScipt, which has become a widely used method of writing modern JavaScript programs. Writing p5 sketches in TypeScript gives creative coders benefits like optional static typing, cross browser support, early access to new JavaScript language features, etc.

Additionally, it provides basic modern development conviniences like Code formatting using esLint and Prettier, Hot Reloading and code bundling using WebPack. Also, this is a npm based project, giving the creative coder the ability to easily extend their code with external libraries from the vast npm repository.

Getting Started

First, open your terminal and clone the project

git clone https://github.com/VadimGouskov/p5-simple-typescript-starter.git

Navigate inside the project directory

cd p5-simple-typescript-starter

Then, install the project's dependancies

npm i

Finally, start the development server

npm run start

A browser window should open on localhost:8080 and the sketch is shown after the compilation process.

Usage

With the development server running, changes to sketch.ts triggers automaticly reload the browser window, reflecting the new changes of the sketch.

If the browser window does not reload properly, check your terminal for potential errors in the build process.

Resources

This small project is based on folowing resources, special thanks to the people involved!