Local server
Pages 36
- Home
- Archived Content
- Beyond the canvas
- Code of Conduct
- Contributed Tools, Projects, Demos
- Design Principles
- Development
- Development Checklist
- Development – extended
- DOM notes
- Education
- Embedding p5.js
- Frequently Asked Questions
- Friendly Debugger
- Getting Started
- Getting started with WebGL in p5
- Inline documentation
- Instantiation Cases
- Integrating other libraries
- Intro to DOM manipulation and events
- Intro to HTML and CSS
- Issue Labels
- JavaScript basics
- Libraries
- Loading external files: AJAX, XML, JSON
- Local server
- p5.js Contributors Conference at CMU
- p5.js overview
- p5.js, node.js, socket.io
- Positioning your canvas
- Preparing a pull request
- Processing transition
- Reference
- Release steps
- SimpleHTTPServer
- Supported browsers
- Show 21 more pages…
Clone this wiki locally
Some functionality (loading external files, for example) works as expected when the files are placed online via FTP or SSH. However, if you try to view them locally, you see some kind of "cross-origin" errors in console. The solution to this is to view them using what's called a local web server. This tutorial includes instructions for setting this up on Mac OSX, Windows, and Linux.
Python SimpleHTTPServer
If you need a quick web server running and you don't want to mess with setting up apache or something similar, then Python can help. 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 SimpleHTTPServer tutorial
Unfortunately the python simple server is very slow. Loading a local page will often stall and it can't stream video and has trouble with even medium size files like an 8meg mp3 for example
Node http-server
An alternative is node.js. Just 3 simple steps
- Download and Install node.js
- Open a terminal or command prompt
-
On OSX/Linux type
sudo npm install -g http-serverOn Windows type (you might need to open the command prompt as admin)
npm install -g http-server
Done!
From then on just cd to the folder that has the files you want to serve and type
http-server
Then point your browser at http://localhost:8080/
Apache Server
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
Snow Leopard has a built in web server, all you have to do is enable it and place the files in the right place.
- Turn on the web server. In Snow Leopard, go into System Preferences > Sharing, and check the “Web Sharing” box. In Lion, Mountain Lion, or Maverick, open Terminal and type:
sudo apachectl start
- Enable permissions, type:
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.
Windows
- 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.
Linux
- Install apache2 via apt-get.
- Place your project somewhere inside /var/www/.
- View it at http://localhost.