P5.js-web-editor: Can't see shaders code

[pavel-b-kr12]

Nature of issue?

• Found a bug

Details about the bug:

• Web browser and version: all Chromium, FireFox, Opera tested
• Operating System: Windows 10
• Steps to reproduce this bug:

open any example with shaders e.g. https://editor.p5js.org/p5/sketches/3D:_shader_as_a_texture
navigate to shader file. Nothing appears.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[catarak]

Thanks for reporting! It is not clear here, but these files are actually hosted externally to the web editor, and even though it appears they are empty, they are not (see #196). Since these are small text files, they probably should be hosted locally, and this would involve changing the fetch-examples script.

[pavel-b-kr12]

I think people goes to the examples to see that files (and play with them). Now they can't, without download it. But even after download, it is not possible to run examples without setup web server because files can't be loaded from local system because of cross-domain security restriction %\

[catarak]

@pavel-b-kr12 I hear you and I agree with you!

[ricknjacky]

@catarak I'd like to work on this issue, I'm new to the codebase can you please give me an insight as to what needs to be done?

[catarak]

@ricknjacky sure! The file server/scripts/examples.js pulls all of the p5.js examples from the p5.js website repository via the GitHub API and then uploads them to the web editor database. This is the file you'll need to edit. I would suggest the following approach:

1. Get this project running locally on your computer
2. Run the fetch-examples script, and make sure that it worked successfully by testing if you can run the p5.js examples on your local version of the web editor.
3. Edit examples.js so that shader files (I think they are .vert and .frag files) are created as a file in a sketch in the same way that .js, .css, or .html files are, with their text content inserted directly into the MongoDB database, rather than linked via a url like .jpg or .mp3 files.

[ricknjacky]

Run the fetch-examples script, and make sure that it worked successfully by testing if you can run the p5.js examples on your local version of the web editor.

I get this error
@catarak please help me out here

[catarak]

@ricknjacky did you create a .env file with valid Github credentials?

[ricknjacky]

Yes I performed this command using
cp .env.example .env

i refereed the docs step by step here

[ricknjacky]

Wait, I didn't do the

(Optional) Update .env with necessary keys to enable certain app behaviors, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
step

let me try once again

[ankitpal1029]

is this issue still open? i'd like to work on this.

[catarak]

@ankitpal1029 yes and go ahead and work on it!

[ankitpal1029]

@catarak sure I'll get right to setting up the project , I'm new to contributing to open source projects
Forgive me if I badger you with too many questions ⊙﹏⊙

[vulongphan]

@catarak @ricknjacky I had the same issue with running the fetch-examples script although I am sure I passed my correct github credentials (since I am able to login thru Github in my local development). I believe the error is emitted at line 78 (please see attached) and the problem should be within the options at line 51 (see attached), and more specifically I speculate that the issue is with the github api used in this case

Could you please assess if my speculation is correct and how I can overcome this?

Thank you.

[catarak]

That's super weird! I don't know what to tell you since it is working for me, and the only difference is the GitHub credentials. Are you sure you're giving the right permissions to your GitHub app?

[vulongphan]

@catarak is it possible that you can tell me what permissions I need to grant my Github App? I have enabled the Contents option but there is still the error 401 - Bad Credentials. I have also searched for the permissions that I need to give my github app in order for it to access resources at /repos GitHub API endpoint but there is no useful document on this.
I was looking at the GET repository API here. I just dont know if I am heading in the right direction.

[catarak]

I would recommend trying to authenticate with the GitHub API outside of the context of the web editor to confirm your credentials work! You could write a small script to do this.

[vulongphan]

Hi @catarak, I wrote a script to check my credentials and I realized that (yes, I should have realized earlier) the credentials I created previously are for a Github app, while the correct credentials should be for an Oauth App. Hence, I have been able to run the fetch-examples successfully. If @ricknjacky does not mind, could I work on this issue?

Also, do you think that we should update the installation guide with a note that the Github credentials should be for an Oauth app instead of a Github app so that the incoming contributors won't run into the same issue as me?

[catarak]

Also, do you think that we should update the installation guide with a note that the Github credentials should be for an Oauth app instead of a Github app so that the incoming contributors won't run into the same issue as me?

That makes sense to me! I think that there have been some changes to the GitHub API since I started this project, and maybe there wasn't a distinction between OAuth Apps and GitHub Apps then?

[vulongphan]

@ricknjacky sure! The file server/scripts/examples.js pulls all of the p5.js examples from the p5.js website repository via the GitHub API and then uploads them to the web editor database. This is the file you'll need to edit. I would suggest the following approach:

1. Get this project running locally on your computer
2. Run the fetch-examples script, and make sure that it worked successfully by testing if you can run the p5.js examples on your local version of the web editor.
3. Edit examples.js so that shader files (I think they are .vert and .frag files) are created as a file in a sketch in the same way that .js, .css, or .html files are, with their text content inserted directly into the MongoDB database, rather than linked via a url like .jpg or .mp3 files.

@catarak Is it fine if I work on this shaders code issue since there hasn't been any update?

[vulongphan]

@catarak I am so sorry for mentioning you in many different issues and PRs. I think that is why you missed my comment on this issue. I just want to know if this issue still needs to be worked on and whether I can work on it.

Thank you!

[catarak]

No worries! Yes you can go ahead and work on this 😄

[vulongphan]

@catarak I have been able to add text content to the .frag and .vert files. However, I am not sure if my solution is of the best coding practice. Could you please have a look?