Nginx and Django encountering issues with loading css files on a production server

I've come across several similar posts, but none of the solutions seem to work for me. Every time I load my static files, the browser throws errors like these: When I collect static files, everything works fine. Even running findstatic points me to the correct directory. So I'm confused as to why nginx can't locate them, even though the path is correct.

GET https://www.exostock.net/staticfiles/vendor/font-awesome/css/font-awesome.min.css net::ERR_ABORTED 404 (Not Found)

and 

Home:136 GET https://www.exostock.net/staticfiles/img/logo8.png 404 (Not Found)

Despite reading through django and nginx documentation, I can't figure out where I'm going wrong. I've been stuck on this for days and hope someone can spot what I'm missing.

nginx/sites-available/app.conf


server {
    server_name  exostock.net www.exostock.net;

    location / {
        include proxy_params;
        proxy_pass http://unix:/home/ubuntu/exostocksaas/app.sock;
}
        location /static/ {
        alias /home/ubuntu/exostocksaas/collected_static/;
}
location ~ \.css {
   add_header  Content-Type    text/css;
}
location ~ \.js {
    add_header  Content-Type    application/x-javascript;
}
}

settings.py in django

STATIC_URL = '/staticfiles/'

# STATICFILES_FINDERS = (
#     'django.contrib.staticfiles.finders.FileSystemFinder',
#     )
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'staticfiles')
]

STATIC_ROOT = os.path.join(BASE_DIR, 'collected_static')

and my html links to statics

   <!-- Bootstrap CSS-->
    <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}">
    <!-- Font Awesome CSS-->
    <link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}">
    <!-- Custom Font Icons CSS-->

    <link href="{% static 'css3/font.css' %}">

UPDATE: I tried the suggested changes, but it's still not working. When I check the nginx error log, it shows the static file path as:

"/usr/share/nginx/html/staticfiles/

This is incorrect because if I look inside the html folder, all I see is the default "welcome to nginx" HTML page. Why is nginx searching for files there? I've deleted the default file, yet the error log persists even after restarting the server.

htmlcssdjangonginx

Answer №1

It seems like there may be some confusion with the path names you've chosen. To resolve this issue, try updating your nginx configuration in `app.conf` as follows:

server {
    location /static/ {
        root /home/ubuntu/exostocksaas;
    }

    location / {
        include proxy_params;
    }
}

Next, make adjustments to your `settings.py` file:

STATIC_URL = '/static/'

# STATICFILES_FINDERS = (
#     'django.contrib.staticfiles.finders.FileSystemFinder',
#     )
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'staticfiles')
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

By implementing these changes, your static files should now be served correctly. Feel free to customize the pathnames further to suit your needs, but this configuration serves as a solid starting point for Django deployments.

Answer №2

STATIC_DIRECTORY = os.path.join(ROOT_DIR,'assets')

Include the directory assets within the same path it will be utilized.

Store your static files (CSS, JavaScript, etc.) in the assets folder and reference them in your HTML file.

{% load static %}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The button labeled as "hamburger" on my navigation bar seems to be malfunctioning (using bootstrap)

Recently, I've been facing an issue with the "hamburger" button in my navbar. Whenever I click on it, nothing seems to happen. This was not a problem before, and now I can't seem to figure out what went wrong or where the error lies. If anyone c ...

htmlcssbootstrap-4

Animating the navbar with CSS transitions

https://i.sstatic.net/cV3X6.png Seeking advice on adding a transition effect to my navbar. Specifically, I'd like to have a colored background appear below each link when hovered over. For example, when hovering over "HOME," a yellow color should dis ...

htmlcsstwitter-bootstrap

What separates $(document).ready() from embedding a script at the end of the body tag?

Can you explain the distinction between running a JavaScript function during jQuery's $(document).ready() and embedding it in the HTML within script tags at the bottom of the body? Appreciate your insights, DLiKS ...

javascriptjqueryhtml

How to set a default class for Bootstrap tabs using AngularJS

I'm working with an angular tabbable element and I need to set a default tab as well as add a specific class to one of the tabs. For example, I want tab 2 to be selected by default and give tab 1 a specific class. Here is the link to the code: http:/ ...

htmlclassangularjsangular-ui

Create an HTML table to view JSON data from a cell on a map

Looking to transform the JSON data into a table by organizing the information based on supplier and product. Below is the JSON input and code snippet: $(document).ready(function () { var json = [{ "Supplier": "Supplier1", "Product": "O ...

javascriptjqueryhtmlarraysjson

Navigating the complexities of Django CustomUser dual behavior during migration phases

I am currently facing a data migration scenario where I need to utilize the create_user method of CustomUser to create a new user, retrieve the created user instance, and then use that instance to create a Partner model. It's important to note that th ...

djangomigrationdata-migrationmigratedjango-custom-user

Is it worth the effort to incorporate HTML5 header, main, section elements, and more into your website?

Do all of these elements simply serve the purpose of making the HTML code easier to read? They don't have any additional functions, right? Unfortunately, we could achieve the same result without them. <Div> <p> Example </p> </ ...

html

Restrict the number of clicks allowed on a button

I am working on a project for my college where I need to restrict the number of times a button can be clicked to only 3 times. I have searched everywhere for code to achieve this and finally found some yesterday. The code is functioning partially as it giv ...

javascripthtml

Achieve a stunning visual effect by placing images behind the background using HTML and

I'm currently working on developing a webpage with a slideshow feature. I've decided that I want the transition between images in the slideshow to be a smooth fade effect, going from color to image to color. To achieve this, I have set up a backg ...

csshtmlimage

Add a Page to Your Domain Name using the Text Input Box

I'm looking to create an input field that allows users to enter a text string, which will be added to a domain name when submitted, redirecting the user to a specific page. Here's how the process works: The user enters 'foo' into the ...

javascripthtmlforms

What is the process for mediating a SWF-Flash file with a PHP mediating, also known as an HTTP-Pseudostreaming script?

I am currently developing a mini context media platform that utilizes HTTP Pseudostreaming. This involves using a PHP script to manage the media file, ensuring proper access and linking to the correct directory. Below are the key components of my code: // ...

phphtmlflashhttpmediator

A guide on adjusting the location of star ratings in Woocommerce

Is there a way to move the star ratings below the price on my archive and category pages instead of between the "buy it now" button and the price? I've attempted unhooking and floating left, but it doesn't seem to be effective. Below is my code s ...

phpcsswordpresswoocommercerating-system

When working with angular.js and angular-sanitize.js, the src attribute is removed from JSON HTML data

I'm new to Angular and I'm really enjoying learning how to work with it. Currently, I have a simple JSON file that contains text structured like this: "gettingstarted":{ "title":"Getting Started", "content":"<img ng-src='i ...

javascripthtmljsonangularjs

Ways to confirm hashed passwords generated by Django(make_password) independently of Django

Having experience with Django and using make_password and check_password for password management, I am now transitioning to the fastapi framework. As I switch to fastapi, I need to find a way to verify passwords created by Django, as both frameworks will ...

pythondjango

Granting anonymous users read-only access to objects in Django Rest Framework permissions

Challenge Faced In my usage of Django REST Framework, I have been relying on the DjangoObjectPermissions permissions class. To determine user permissions for objects, I utilize django-rules. Unfortunately, it has come to my attention that the current per ...

pythondjangopermissionsdjango-rest-frameworkanonymous-users

Issues with Bootstrap integration in Visual Studio causing problems

I'm encountering an alignment issue when using Bootstrap in Visual Studio, specifically with Bootstrap columns. When I use a div with the class col-md-4, it automatically adds some space to the right and doesn't align properly. However, when I wr ...

htmlvisual-studiotwitter-bootstrap-3

Require ContentType Field in Django Model Optional

I'm dealing with this particular model: class Auth(models.Model): TYPES = ( ('agent', 'Agent'), ('broker', 'Broker'), ) user = models.ForeignKey(User, unique=True) type = mode ...

pythondjangocontent-type

Struggles encountered when choosing the initial visible item

I have a set of 3 tabs, each with its own heading and content. However, I only want to display the tabs that the user selects by checking the corresponding checkboxes. There are 3 checkboxes, one for each tab. Below is the code snippet: //Function to ...

javascriptjquerycsshtml

The CSS3 Animation remains stationary

I've been attempting to animate my block element moving to the left using CSS animation shorthand property, but unfortunately, it's not working as expected. Here is my HTML: <div id="game"> <div id="block">&l ...

htmlcssanimation

Universal HTML form validation with a preference for jQuery

Is there a jQuery plugin available for form validation that follows the most common rules? Specifically, I need to validate based on the following criteria: All textboxes must not be empty If the 'Show License' checkbox is checked, then the &a ...

javascriptjqueryhtmljquery-plugins