Why won't my CSS, images, and Java script load once my app is deployed on Azure?

Question

Why won't my CSS, images, and Java script load once my app is deployed on Azure?

Steven hunter 1

I am using VS code with Django and everything runs fine on my Local server, but once I deploy my app on Azure it wont load any of my images, CSS, and Java script. I am not using whitenoise. I do have my requirements.txt file. I have my allowed_hosts = ["*"]. Any help would be awesome!

Dillon Silzer 57,826 Reputation points Volunteer Moderator

2022-10-15T20:30:27.56+00:00

When you load it in your browser press F12 (Developer Menu). What errors/warnings do you receive?
Steven hunter 1 Reputation point

2022-10-15T22:26:35.153+00:00

Refused to apply style from '/static/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

That is the error it gave me, but my static folder is the main folder along with everything else that it is loading from. djangoforum/static/style.css is the route. Do I need to add djangoforum to the route instead of just /static/style.css?
Steven hunter 1 Reputation point

2022-10-17T23:06:01.653+00:00

now I get Refused to execute script from 'https://.net/static/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Lex Li (Microsoft) 6,037 Reputation points Microsoft Employee

2022-10-19T06:16:59.407+00:00

You cannot skip all the details behind "I deploy my app on Azure" and expect an answer. Edit the question to include more information on that part.

2 answers

Your answer

Dillon Silzer 57,826 Reputation points Volunteer Moderator

2022-10-15T20:30:27.56+00:00

When you load it in your browser press F12 (Developer Menu). What errors/warnings do you receive?
Steven hunter 1 Reputation point

2022-10-15T22:26:35.153+00:00

Refused to apply style from '/static/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

That is the error it gave me, but my static folder is the main folder along with everything else that it is loading from. djangoforum/static/style.css is the route. Do I need to add djangoforum to the route instead of just /static/style.css?
Steven hunter 1 Reputation point

2022-10-17T23:06:01.653+00:00

now I get Refused to execute script from 'https://.net/static/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Lex Li (Microsoft) 6,037 Reputation points Microsoft Employee

2022-10-19T06:16:59.407+00:00

You cannot skip all the details behind "I deploy my app on Azure" and expect an answer. Edit the question to include more information on that part.

Answer 1

Sreeju Nair 12,666

It seems the server returns html page when requesting style.css, this can be a 404 page or default page. To understand whether the css send correctly, try browsing the css URL directly from the browser address bar.

for e.g. you may use <<your application address>>/static/style.css to load the style sheet. use this url in browser and see what it returns.

Hope this helps

Steven hunter 1 Reputation point

2022-10-17T22:54:52.32+00:00

It gives me a 404 not found. Though the static file sits in the root folder
Steven hunter 1 Reputation point

2022-10-17T23:06:19.62+00:00

now I get a Refused to execute script from 'https://.net/static/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Sreeju Nair 12,666 Reputation points

2022-10-18T04:11:13.277+00:00

Similar to css, make sure what is the response for your js file too. browse the js file directly in the browser and see what it returns.

It seems both your js and css files returns 404 pages and failed to load in the browser. Fix that in your application.

Answer 2

Just adding to sreejukg and DillonJS -- For Django web app which includes static front-end files, kindly check the instructions on Managing static files in the Django documentation

If you haven’t done this already, kindly try these modifications:

Oryx runs manage.py collectstatic on your behalf unless you specify the DISABLE_COLLECTSTATIC env var. Make sure you've set STATIC_ROOT in settings.py:

// settings.py
STATIC_ROOT = './static/'

Or

having STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

I understand you have mentioned you’re not levering Whitenoise - To host static files in your web app, you may add the whitenoise package to requirements.txt and the configuration for it to settings.py. It specifically serves those files that are found in the folder specified by the Django STATIC_ROOT variable.

Documentation- Serve static files for Django apps

Sample - You can find a Django working sample with static files for Web Apps On Linux

Share via

Why won't my CSS, images, and Java script load once my app is deployed on Azure?

2 answers

Your answer