CODEWITHSUNDEEP
cssflaskamazon-elastic-beanstalk
pongoS
pongoS

Reputation: 336

Flask renders css files as empty on aws elastic beanstalk

I have a flask app that loads css when I run it locally via flask run, but not when I upload it to aws elastic beanstalk.

css-test-app/ application.py requirements.txt app/ init.py routes.py static/ stylesheets/ style.css templates/ index.html

I deploy it on my computer by setting export FLASK_APP=application.py and then flask run before going to 127.0.0.1:5000 in my browser.

To upload it on aws elastic beanstalk I make a zip file from app/, application.py, and requirements.txt and then deploy it, which works except for the css file. When I inspect the page with dev tools, then under sources it shows the location of the css file in static/stylesheets/style.css, but it is empty. I view the site at the url MyApp-env.********.us-west-2.elasticbeanstalk.com or mydomain.com

My init.py file looks like this:

from flask import Flask
application = app = Flask(__name__)
from app import routes

app.static_folder = 'static'

application.py looks like this:

from app import application

and my template index.html file looks like this:

<html>
    <head>
        <link rel="stylesheet" href="{{ url_for('static', filename='stylesheets/style.css') }}" type="text/css" />
        <title>{{ title }} - Microblog</title>
    </head>
    <body>
        <h1>Hello, {{ user.username }}!</h1>
    </body>
</html>

The style.css file is:

body {
    color: purple;
    background-color: #d8da3d }

If I refresh the page via ctrl - (reload this page icon) in chrome or do ctrl f5, this does not change anything.

If I use the ebcli to ssh into the beanstalk instance than I find all of the files for the app under /opt/python/current/app/, with the css file in /opt/python/current/app/app/static/stylesheets/style.css, which contains the full contents.

Upvotes: 0

Views: 899

Answers (1)

Ankur
Ankur

Reputation: 310

In AWS you will have to set path for your static file as app/static

On your aws console, go to configuration > software > modify

Scroll down to 'Static Files'.

You might see /static/ on left side of the table, on the right side under Directory, mention app/static/

click save and reload your app.

Upvotes: 1

Related Questions