How to check change code works

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

Hi @Ujjwal25,

You are talking about p5js webeditor?

Cheers
— mnse

PS: carefully read the contribution guidelines

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?

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

@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

Hi @Ujjwal25,

Did you missed out to install it before using?

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

Cheers
— mnse

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

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

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…

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/.