Serving Static Files Directly With Nginx

00:00 Serving Static Files Directly With Nginx. You now have Nginx proxying requests to your Django app. Importantly, you can also use Nginx to serve static files directly.

00:13 If you have DEBUG set to True in your settings.py file, then Django will render the files, but this is inefficient and probably insecure. Instead, you can have the web server render them directly.

00:28 Common examples of static files include local JavaScript, images, and CSS—anything where Django isn’t really needed as part of the equation in order to dynamically render the response content.

00:41 To get started, from within your project directory, create a place to hold and track JavaScript static files in development.

00:58 Next, open static/js/greenlight.js and add the following JavaScript.

01:18 This JavaScript will make a block of text be rendered in a big green font if it’s hovered over. Yes, it’s cutting-edge front-end work!

01:49 Next, add the following configuration to settings.py, updating STATIC_ROOT with your domain name. You’re telling Django’s collectstatic command where to search for and place the resulting static files that are aggregated from multiple Django apps, including Django’s own built-in apps, such as admin.

02:35 Last but not least, modify the HTML in your application sole HTML template to include the JavaScript that you just created. First, the text in the paragraph is enclosed in a span with the "changeme" ID, and then the JavaScript file you created earlier is added.

03:00 Now the span with the ID of "changeme" will have an event listener added to it. Note that to keep this example straightforward, you are hard-coding the URL path to greenlight.js file instead of using Django’s static template tag.

03:14 You’d want to take advantage of that feature in a larger project. The next step is to create a directory path that will house your project’s static content for Nginx to serve.

03:43 Now run collectstatic as your non-root user from within your project’s directory. Finally, add a location variable for /static in the Nginx configuration file for your site. Once again, remember that your domain won’t be deploydjango.site, so you’ll need to customize these steps for them to work in your own project.

04:35 Now, you should turn off DEBUG in settings.py.

04:53 Gunicorn will pick up this change, as earlier on, you set reload to be True. Next, restart Nginx. Refresh the site again and see what happens when you hover over the page text.

05:11 This shows that the JavaScript enlarge() function has kicked in. To get this result, the browser had to request the greenlight.js file.

05:20 The key here is that the browser got that file directly from Nginx without needing to ask Django for it. Notice something different about this process. Nowhere did you add a new Django URL route or view for delivering the JavaScript file. That’s because after running collectstatic, Django is no longer responsible for determining how to map the URL to a complex view and render that view.

05:45 Nginx can just hand the file off directly to the browser. In fact, if you navigate to your domain’s equivalent of the one seen on-screen, you’ll see a traditional file system view of /static created by Nginx.

05:58 This means faster and more efficient delivery of static files. At this point, you’ve got a great foundation for a scalable site using Django, Gunicorn, and Nginx. In the next section of the course, you’ll take a look back at what you’ve learned.