Troubleshoot: CSS Paths Broken after Deploying Django App on AWS Elastic Beanstalk

I recently deployed my first simple Django 1.8.6 application to AWS via Elastic Beanstalk.

While everything appears to be working properly, the styles are not loading as expected.

Below is the template code:

{% load blog_tags %}
{% load staticfiles %}
   <!DOCTYPE html>
   <html>
   <head>
     <title>{% block title %}{% endblock %}</title>
     <link href="{% static "css/blog.css" %}" rel="stylesheet">
   </head>
   <body>
     <div id="content">
       {% block content %}
       {% endblock %}
     </div>
     <div id="sidebar">
       <h2>My blog!</h2>
       <p>This is my blog. I have written {% total_posts %} posts so far.</p>
       <h3>Latest posts</h3>
       {% show_latest_posts 3 %}
     </div>
   </body>
   </html>

And here is the page's source code:

 <!DOCTYPE html>
   <html>
   <head>
     <title>My Blog !!!</title>
     <link href="/static/css/blog.css" rel="stylesheet">
   </head>
   <body>
     <div id="content"> ...

When clicking on the link "/static/css/blog.css" on the local machine, the CSS file opens correctly. However, on Beanstalk, it cannot be found.

I suspect this issue is related to some configurations. Any suggestions on where to look for a solution?

Edit:

Here is the contents of the .ebextensions/django.config file:

option_settings:
  aws:elasticbeanstalk:container:python:
    WSGIPath: django_by_example_blog/wsgi.py
    StaticFiles: /static/=static/

Answer №1

If you are utilizing AMI 2, the following configurations can be applied:

option_settings:
  aws:elasticbeanstalk:container:python:
    WSGIPath: mysite.wsgi:application
  aws:elasticbeanstalk:environment:proxy:staticfiles:
    /static: static
container_commands:
  01_collectstatic:
    command: "source /var/app/venv/staging-LQM1lest/bin/activate && python manage.py collectstatic --noinput"
  02_migrate:
    command: "source /var/app/venv/staging-LQM1lest/bin/activate && python manage.py migrate --noinput"
    leader_only: true

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

"Within Angular 2+, the attribute referenced is not recognized as a valid property, even though it is explicitly defined within the @Input

The main goal here is to increase the vertical pixel count. <spacer [height]="200"></spacer> Initially facing an issue where an error message states that height is not a recognized attribute of spacer. To address this problem, I set up the fo ...

Resetting form fields when clicking the "Next" button with the FormToWizard jQuery Plugin

I am in the process of developing a lengthy form using the jQuery plugin called formToWizard. Within one of the fieldsets located midway through the form, there are hidden fields that are displayed upon clicking a button. The strange issue I am encounterin ...

I am having trouble retrieving images from the /media/ directory. Strangely, everything works perfectly when I try to access them through the index. Additionally, the for loop within the templates is

My settings.py file looks like this: Static STATIC_URL = '/static/' STATIC_DIR = [os.path.join(BASE_DIR, "static")] Media MEDIA_ROOT = os.path.join(BASE_DIR, 'media') MEDIA_URL = '/media/' URLs Code - urls.py from d ...

An error occurred when executing Selenium through Python due to an invalid selector issue

While attempting to save a document, I encountered an issue. Using Firefox and the Firefox IDE, the following target worked perfectly: css=div.ui-dialog-buttonset button:contains('Yes, ') However, when trying to implement it in Python with the ...

Utilizing SCSS Interpolation within a mixin invocation

My goal is to incorporate a simple interpolation into a mixin call: $shapes: "square", "square-green", "circle"; $platforms: "facebook", "twitter", "linkedin", "gplus", "feed"; @each $shape in $shapes { @include sprite-#{$shape}; @each $platform ...

Images are failing to show up in the iPhone design

Encountering issues with displaying images on an iPhone? You can replicate the problem by minimizing your browser window horizontally. Here is a link showcasing the problem: here. To temporarily fix this, try zooming out the browser (Ctrl+-). You can see a ...

Ways to showcase an icon within a select options tag

Is there a way to show Font Awesome icons in select options tag? I have tried using it outside like this <i class="fas fa-chart-pie"></i> But I'm not sure how to display it within the <option> tags instead of text. <select id="s ...

What is the reason that styled() does not apply styles to the Material-UI <TextField /> component?

I've managed to figure out a solution, but I'm curious about why this code is working: <TextField label='Zip Code' size='small' InputProps={{ style: { borderRadius: '.4rem' }, }} sx={{ width: & ...

Ensuring that images are the perfect size for their parent container

Exploring the functionalities of angular bootstrap carousel, I am eager to showcase various images and enable clicking on them. The challenge I'm facing is that my images are not uniform in size and don't fit perfectly within my bootstrap column ...

The animation will only activate upon the initial click of the button

I'm looking to add a simple text animation to my website. The idea is that when a button is clicked, the text transitions from being fully transparent to fully visible, and then back to transparent. I've written some code to achieve this animatio ...

Creating a unique JavaScript script that gradually adjusts the background color using the setTimeout() function

Is there a way to create a function that continuously changes the background color every 15 seconds by picking colors from an array that starts over once all colors have been used, without having the function run just one time? $(document).ready(() => ...

What steps can be taken to stop my Bootstrap carousel from overflowing its boundaries?

While constructing my bootstrap portfolio, I encountered an issue with the carousel at the top. It is overflowing and causing horizontal scrolling. Carousel HTML: <div id="carouselExampleIndicators" class="carousel slide" data-ride= ...

How can we pass on the width from an image to its parent or grandparent element using CSS?

Creating a cohesive image gallery with captioned images of different aspect ratios is my goal. To maintain consistency, I desire the browser to display each image at the same height while preserving its original aspect ratio by adjusting the width accordin ...

Styling Circles with CSS

HTML: <ul class="list_header"> <li><a href="#">06 december 2013</a></li> <li><a href="#">item2</a></li> <li><a href="#">item3</a></li> ...

"Maximizing the slider with jCarousel: A guide to enhancing your carousel experience

I recently added jcarousel to my website and things are looking good so far. Take a peek at how my site is currently set up: check it out! What I'm aiming for now is a feature where if a user clicks on an image to enlarge, it will open in a new tab ...

Challenge with CSS Box Shadow

Hey there, I've been attempting to add a shadow effect to a box inside another box but I'm struggling to achieve the desired outcome. <div class="box effect2"> <div class="box effect2"> Box inside a box <div> &l ...

Failure of ngClass in Angular 7 due to the presence of multiple classes (spaces)

Many frontend frameworks have a practice of encapsulating their CSS styling by adding another class as a prefix. For example, in Bootstrap: btn btn-primary where btn is the prefix. If I were to conditionally apply this using [ngClass] in Angular, it woul ...

Placing text at the bottom of a backdrop image

Looking for a way to position text at the bottom of a background image? Here's how you can do it: <div style="background-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/1325120512b60-45927-1.jpg'); height:100px"> ...

Django Error: "to" parameter must be a list or tuple - TypeError occurred at /contact/

While trying to send the contact form email data to the domain email ID, I encountered an error after filling all the fields in the contact form and submitting it: Error Message: "to" argument must be a list or tuple https://i.sstatic.net/pWBot ...

Having trouble getting PostCSS nesting to work with CSS variables in Tailwind CSS and Next.js?

I've been attempting to utilize PostCSS nesting alongside CSS variables, but unfortunately the CSS variables are not being converted at all. Instead, I am seeing Invalid property value in the DOM for CSS Variables. The tailwind.css file I have inclu ...