Django development on OS X using a local media server

Update: Eric Moritz has pointed out to me that Django provides an easy way to do this already. See How to serve static files.

For a long time now, I’ve been uploading CSS and image changes to an FTP server every time I wanted to change the look and feel of a locally developed Django app, and used an HTTP path in my MEDIA_URL setting. It wasn’t until this week that I found an effective way to host static media from outside of Django while developing locally. For some, this solution will be rather obvious. For anyone else, I hope this helps your workflow like it helped mine.

Step 1: Turn on OS X’s built-in Apache server

Open your System Preferences, and select the “Sharing” preferences. Click the check box next to “Web Sharing” to turn on the built-in Apache web server. When this box is checked, visiting http://localhost/~yourusername/ in a web browser will show the files from the “Sites” folder inside your user’s home folder.

Step 2: Set your Django project to use your local URL for media

In your projects settings.py file, create a folder called (yourprojectname), then set:

1 MEDIA_URL = "http://localhost/~yourusername/yourprojectname"

Step 3: Use MEDIA_URL in your templates instead of full paths

When MEDIA_URL is set in your settings.py file, Django provides adds a {{ MEDIA_URL }} variable to the context for each request on your site:

1 2 3 <link href= "{{ MEDIA_URL }}/css/base.css" rel= "stylesheet" type= "text/css" /> <img src= "{{ MEDIA_URL }}/img/picture.jpg" alt= "Picture" />

Step 4: Make a folder for media inside your project

Create a folder named ‘media’ inside your project folder, then use dynamic paths in your settings.py to make deployment easier

1 2 3 4 5 6 # Store the path to the project folder in a variable for repeated use import os project_path = os . path . dirname ( __file__ ) # Set the media root as the folder named 'media' inside the project folder MEDIA_ROOT = os . path . join ( project_path , 'media' )

Step 5: Point MEDIA_URL to MEDIA_ROOT

Since OS X’s Apache server looks in ~/Sites/ for files, but media is hosted elsewhere inside the Django project, the two need to be connected. In your terminal, make a symbolic link (also known as an alias) from ~/Sites/yourprojectname/ to the Django project:

1 ln -s /path/to/your/project ~/Sites/yourprojectname

To confirm this has worked, open your ~/Sites in the Finder and you should see a folder with an arrow, indicating an alias, labeled with your project name. Click on the alias and you’ll see the contents of the media folder inside your project. Fire up your Django development server, and you’re ready to go.

For more information on Django’s development server, visit the docs