0

I started an p5 project in p5s web editor. Now its getting big and I want to continue the project on my local Linux, but have no idea how to install a preview plug in there. before I used Atom on win 10 and it worked for me. But without the preview plug in I cant just preview the webpage html because of cors. Its a browser game and I have sprite and sound data in the html folder.

I tried an "allow cors" addon for firefox, but that doesnt make any difference. I tried to start a localhost from terminal, and put an allow origin in the http header but I have no Idea how that goes. I could might install Atom, but I dont know if the same plugins are working on linux. And I actually want to learn how professional web developers do get around it?

PS: I couldnt find anything that I understand or that solves my problem. I can understand if its not possible to post a solution for the cors error. Tipps for a nice and easy Linux Editor, or link to a tutorial, or solved thread would be great. THX

Daniel Bollinger
  • 13
  • 2

1 Answers1

0

What you actually need is a web server (started from your terminal, and potentially with a command from your editor which will call the external command) which will serve your files. This has the advantage of being decoupled from your editor and this way you can change your tools or your environment without breaking your development workflow.

One way to do it is to add light-server to your project (There are a lot of alternatives to this tool tho, one of them being serve). To add it to your project you can use the following command:

npm install --save light-server

And then you can run the following command to serve your directory on localhost:4000 by default:

npx light-server -s .

To avoid using npx you can also install the server globally with this (that require to have your permissions properly configured for npm otherwise you'll get an error):

npm install --global light-server

And then you can use the command directly light-server -s .

You could also add the following to your package.json file to make the script easier to use:

"scripts": {
  "dev": "npx light-server -s . -w \"**/*\""
},

With that, running npm run dev in your project directory should start the webserver and reload the page each time you modify a file in the project.

Note that this kind of development server is also available in other languages if you need to (for example python). Using a webserver instead of loading directly the page from file:///path/to/index.html in your browser should fix your CORS issues.

statox
  • 2,827
  • 1
  • 21
  • 41