How to check change code works

p5.js Development
1

Hey, I have some good solutions of some issues , but I don’t know how to start the localserver for p5.js repository, like I ran all the scripts but can’t see editor on live server

2

Hi @Ujjwal25,

You are talking about p5js webeditor?

Cheers
— mnse

PS: carefully read the contribution guidelines

3

Hey @mnse . There are 2 repository right? p5.js and p5.js-web-editor, I am working on issue raised in p5.js repo and I have found the solution for it, but can’t verify if my changes are helping or not cause even the documentation does not tell something abt running on local server on p5.js repo contributor guidance.Is there any way to verify if my changes help for this repo?

Screenshot 2023-12-09 at 1.41.42 PM
Screenshot 2023-12-09 at 1.41.42 PM1920×1200 116 KB

4

Hi @Ujjwal25,

You dont need a local server for testing. Just build the bundle with your changes and reference it in your testing webpage or write a unit test for it …

Building p5js:

Cheers
— mnse

PS: contribution docs here…

1 Like
5

@mnse I read all the documents carefully and checked versions of everything. I am running the commands but they are not helping , npm run grunt shows no grunt found in script I ran all the script commands of package.json() , grunt build and rest, and nothing really works . Can you please demonstrate through a small video or something, I am first time contributor , and maybe even after spending a lot of time, might not be able to comprehend

6

Hi @Ujjwal25,

Did you missed out to install it before using?

npm install -g grunt
npm install -g grunt-cli

Cheers
— mnse

7

@mnse. I ran both the commands earlier and then ran npm run grunt

8

@mnse I reached uptill here, now no idea on proceeding further

Screenshot 2023-12-10 at 6.44.37 AM
Screenshot 2023-12-10 at 6.44.37 AM3360×2100 294 KB

9

Hi @Ujjwal25,

Looks quite good. Now just reference the created module (ie lib/p5.js) instead the released one in your testing html.

The simplest way would be ie. …

|- yourdirectory
  |- p5.js (the generated lib above)
  |- index.html
  |- sketch.js (your sketch to test)

Example Index.html:

<html>
  <head>
    <script src="p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

Example sketch.js

// Do whatever you want to test here
function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(0); 
}

Open the index.html in your browser.

Cheers
— mnse

PS: if you prefer other testing environment (webeditor, own editor, local server) start here…

10

To check if your code changes work in the p5.js repository, install dependencies, run the local server with npm start and access the editor at http://localhost:5555/editor/.