Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revisionLast revisionBoth sides next revision | ||
p5js-local-server [2024/02/20 21:11] – renick | p5js-local-server [2024/03/06 19:57] – renick | ||
---|---|---|---|
Line 25: | Line 25: | ||
- use your browser to access the IP address indicated by http-server | - use your browser to access the IP address indicated by http-server | ||
- | Let's look at each step in detail. | + | Let's look at each step in detail. |
+ | |||
+ | {{: | ||
+ | |||
+ | If you want to follow along with my files, you can: | ||
+ | |||
+ | https:// | ||
+ | |||
+ | I'd suggest using one of your own, though! | ||
===== install nodejs and npm ===== | ===== install nodejs and npm ===== | ||
Line 50: | Line 58: | ||
https:// | https:// | ||
+ | |||
+ | On a Mac, I recommend this process: | ||
+ | |||
+ | - In your Documents folder, create a folder called ' | ||
+ | - In that folder, run the command: npm install http-server. | ||
+ | |||
+ | Here's a tutorial on using the terminal on a Mac: https:// | ||
===== make a directory for your project ===== | ===== make a directory for your project ===== | ||
Line 56: | Line 71: | ||
{{:: | {{:: | ||
+ | |||
+ | I'd put this in the javascript directory that you made above. | ||
===== put the necessary files in the directory ===== | ===== put the necessary files in the directory ===== | ||
+ | |||
+ | If you downloaded them from the editor, then you'll have all of the files in the zip. That includes: | ||
+ | |||
+ | - sketch.js | ||
+ | - the p5js libraries: p5.js and p5.sound.min.js | ||
+ | - index.html | ||
+ | - style.css | ||
+ | |||
+ | If you are creating from scratch rather than downloading, | ||
===== run http-server from the command line in that directory ===== | ===== run http-server from the command line in that directory ===== | ||
+ | |||
+ | Open a terminal and change to the directory where the index.html is located. Any files which you have in this directory will be accessible by the web server which you are about to launch. | ||
+ | |||
+ | In the terminal, run the command: | ||
+ | http-server | ||
+ | |||
+ | If the command is not found, be sure that the directory where the bin of http-server is on your system' | ||
+ | |||
+ | If your PATH is configured correctly, you should see something like this in the terminal: | ||
+ | |||
+ | {{:: | ||
+ | |||
+ | If http-server is not in your system PATH, then you need to call it explicitly with the path to the binary executable. That's in the location ./ | ||
+ | |||
+ | | ||
+ | |||
+ | For more on paths, see this tutorial: https:// | ||
===== use your browser to access the IP address indicated by http-server ===== | ===== use your browser to access the IP address indicated by http-server ===== | ||
+ | http-server will present addresses which you can use in your browser to see the sketch. In the example above, you can see these: | ||
+ | |||
+ | http:// | ||
+ | http:// | ||
+ | |||
+ | In my case, either of these can be used. In your case, you probably have the same first choice and a different second choice. Copy one of them from YOUR case and paste it in the address bar in your browser and hit enter. You should then be able to see your sketch in the browser. It looks like this for me: | ||
+ | {{:: |