Javascript/CSS files don't load on website while hosting

September 20, 2019 367 views
Nginx API JavaScript Initial Server Setup

when I try running my server (with the domain being my ip address),
It loads the base index.html but all of the files I reference (other CSS files, javascript files) in my directory aren’t loaded.

  • When I run on the Chrome browser, interestingly, it reads all of the css/js files in the directory of my index.html file as that index.html file:

  • In My Default file (in /etc/nginx/sites-enabled[available]/default), my code looks like this:

server {
        listen 80 default_server;
        listen [::]:80 default_server;

root /usr/share/nginx/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name <ip-address-here>;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri /index.html;
                autoindex on; (I've tried with and w/o this)
                # proxy_pass http://localhost:8080;
                # proxy_http_version 1.1;
                # proxy_set_header Upgrade $http_upgrade;
                # proxy_set_header Connection 'upgrade';
                # proxy_set_header Host $host;
                # proxy_cache_bypass $http_upgrade;

the rest is just comments

before, my files were in a folder called /srv/www/ Now I moved to /usr/share/nginx/html. Before and after the move my problem still existed.

This is my first time using DigitalOcean. I’ve followed tutorials to host my website and things like that but I don’t understand the ins and outs of nginx.

1 Answer

HI @MoGb1,

Is that your whole Nginx configuration?

Additionally, can you try to add the following to the configuration file :

location ~ \.css {
    add_header  Content-Type    text/css;
location ~ \.js {
    add_header  Content-Type    application/x-javascript;

You can also try and add it to /etc/nginx/conf.d/default.conf

Kind regards,

Have another answer? Share your knowledge.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!