When we work from the p5 Editor and and press play to view your program, a window will open to preview our project. In the background, the p5 editor is starting a server for us, and testing our project on this local server.
When you are NOT working from the p5 editor, and you are developing from Sublime Text or another code editor of your choice, you may need to start a local server to test a p5 project.
Certain p5 functionality relies on a server to host the project (loading external files and using the sound library, for example). Everything will work as expected when the files are placed online via FTP or SSH, but during development, you will get cross-origin errors in the console when you try to view the project locally.
The solution to this is to view them using what’s called a local web server. This tutorial includes instructions for setting this up a local server using Python or Node.js.
Python comes with a simple builtin HTTP server. With the help of this little HTTP server you can turn any directory in your system into your web server directory. The only thing you need to have installed is Python (Python is already installed if you are using Mac OS X).
Open the Command Line (Terminal on a Mac, Command Prompt on Windows)
Change directories to your p5 folder. Use the cd command (with a space after) then drag your p5 folder into the Terminal window.
Press ENTER. Verify that you are now located inside that p5 folder.
To start a simple python server, type the following command, then press ENTER.
python -m SimpleHTTPServer
You’ll receive feedback in the command line that a server has been started. To view your page in the browser, go to: localhost:port, in this case, localhost:8000. You can click on the project directory to preview that page in the browser.
Node HTTP Server
An alternative is node.js http-server. It is much faster than a python simple server, but requires a little bit of setup.
2. Open a terminal or command prompt
3. On OSX/Linux type
sudo npm install -g http-server
On Windows type (you might need to open the command prompt as admin)
npm install -g http-server
From then on just
cd to the folder that has the files you want to serve and type
The full set of commands looks like this:
To test your page, copy one of the addresses in green and paste that in your browser.
Python SimpleHTTPServer is great to get started, but at some point you might want to set up an Apache server. The Apache server supports a greater range of HTTP functionality and scales well for bigger projects. See below for OS specific setup.
Mac OS X
Mac OS X since 10.5 Leopard ships with Apache web server installed, all you have to do is enable it and place the files in the right place.
Open Terminal and type:
sudo apachectl start
Verify it is working by going to
http://localhost on your browser. You should see “It works!” on the browser.
Enable permissions for the files on the server by typing the following two commands into Terminal:
sudo chown root:<your username> -R /Library/WebServer/Documents sudo chmod -R 755 /Library/WebServer/Documents
Place your project somewhere inside /Library/WebServer/Documents/.
View it at http://localhost/(the project folder in /Library/WebServer/Documents).
Turn on the web server. Go into System Preferences > Sharing, and check the “Web Sharing” box.
Verify it is working by going to
http://localhost/~<your username> on your browser. You should see a default webpage with a title of “Your Website”.
Place your project somewhere inside
<your username folder>/Sites.
View it at http://localhost/~(your username)/(the project folder in
<your username folder>/Sites).
Download WampServer from http://www.wampserver.com/en/.
Install WampServer and follow instructions.
The “www” directory will be automatically created (usually c:\wamp\www).
Create a subdirectory in “www” and put your HTML/JS files inside.
Open your internet browser and go to the URL : http://localhost/yourfile.html.
Install apache2 via apt-get.
Place your project somewhere inside /var/www/.
View it at http://localhost.