CSS not loading with docker, nginx and react app

Question

I am trying to deploy a react app in docker container on an nginx server.

The application deploys... but I do not get ANY css styling.

Docker file:

# Step 1: Use the official Node.js image for building the app
FROM node:18 AS build

# Set the working directory in the container
WORKDIR /usr/src/app

# Copy package.json and package-lock.json (if available)
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the app for production
RUN npm run build

# Step 2: Serve the built app using Nginx
FROM nginx:alpine

# Copy the built React app from the build stage to the Nginx HTML directory
COPY --from=build /usr/src/app/build /usr/share/nginx/html

# Copy the custom Nginx configuration
COPY nginx.conf /etc/nginx/nginx.conf

# Expose the port that Nginx serves on (default 80)
EXPOSE 80

# Use Nginx to serve the app
CMD ["nginx", "-g", "daemon off;"]

nginx.conf file

worker_processes auto;  # Automatically set the number of worker processes based on available CPU cores

events {
    worker_connections 1024;  # Maximum number of simultaneous connections -- PER -- worker process
}

http {

    include /usr/share/nginx/mime.types;
    sendfile on;

    server {
        listen 80;      # IPv4
        listen [::]:80; # IPv6

        server_name _;

        root /usr/share/nginx/html;
        index index.html

        location / {
            try_files $uri /index.html =404;
        }       

        # Optionally, you can add headers or other settings if needed
    }
}

From Nginx server:

What I see in sources from the chrome debugging tools

Is it "normal" for index.html to be missing ???

However, custom.css seems to be pointing at the main CSS file??

Local Build

when I run npm run build I see this in VS code

AND the application has CSS styling.

notice there is an index.html file here and it points to the main CSS file.

Reference Articles

I have read (and tried) these

Stack overflow

from the web

Medium

===================

TAKE 2

===================

I decided to create a basic react app (using create-react-app ) and then deploy it

this is what the app is SUPPOSED to look like:

Docker File

FROM node:18 AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Step 2: Serve the built app using Nginx
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

worker_processes auto;

events {
    worker_connections 1024;
}

http {

    server {
        listen 80;
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html =404;
        }     

        # Optionally, you can add headers or other settings if needed
    }
}

Nginx deployed app

Here is the error I see:

209.200.223.141 - - [14/Jan/2025:23:13:00 +0000] "GET /static/css/main.f855e6bc.css HTTP/1.1" 304 0 "http://44.243.119.4/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"

This is what I am getting now... again NO CSS

There is an (index) which contains an href to the CSS file

You didn't include mime.types file in nginx config, so your CSS (and JS) files are served by nginx with default MIME type value text/plain (that's why browser refuses to process them). In your first config, you try to include it from /usr/share/nginx directory, while this file is located in /etc/nginx directory (I assume that missing semicolon after index index.html line is just typo in question and your original config is fine; BTW index.html is default value for index directive, so this line can be skipped). With your second config, you didn't include mime.types file at all. — Ivan Shatsky
– Ivan Shatsky, Commented Jan 15 at 1:32
stackoverflow.com/users/7121513/ivan-shatsky ... I have answered my own question and in it there is your suggestion as well ... include mime.types; ... so I don't know if the cache or mime.types; is the real answer... all I know is that it works and I am running with it. — MrLister
– MrLister, Commented Jan 15 at 1:49
Beleive me, it is mime.types :) A few suggestions: 1) move the root directive one level up, to the server context, and remove it from location contexts; 2) do not use extra index files, remove the index directive at all. — Ivan Shatsky
– Ivan Shatsky, Commented Jan 15 at 1:58
@IvanShatsky I have updated the answer... if you wouldn't mind, take a look and see if it's good to go now ! thank you ! — MrLister
– MrLister, Commented Jan 16 at 21:04
Almost :) You've got an extra $uri parameter here: try_files $uri $uri /index.html =404; (causing an extra system call for every request that is not an asset request due to the try_files directive internal architecture). Leave it as it was in your first example: try_files $uri /index.html =404; — Ivan Shatsky
– Ivan Shatsky, Commented Jan 16 at 22:30

MrLister · Accepted Answer · 2025-01-18 18:36:23Z

This solves the problem

worker_processes auto;  # Automatically set the number of worker processes based on available CPU cores

events {
    worker_connections 1024;  # Maximum number of simultaneous connections per worker process
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    # Gzip compression for better performance
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml+rss text/javascript;
    gzip_min_length 256;

    server {
        listen 80;
        root /usr/share/nginx/html;

        # Location for serving HTML files (short cache duration)
        location / {
            
            try_files $uri /index.html =404;

            # Ensure index.html is not cached aggressively
            add_header Cache-Control "no-cache, no-store, must-revalidate";
            add_header Pragma "no-cache";
            add_header Expires 0;
        }

        # Location for serving static files (long cache duration)
        location /static/ {

            # Cache static files with hashed names for a long time
            add_header Cache-Control "max-age=31536000, immutable";
            expires 1y;

            # Serve pre-compressed files if available
            gzip_static on;
        }

        # Location for serving other assets (optional)
        location /assets/ {
            add_header Cache-Control "max-age=31536000, immutable";
            expires 1y;
        }

        error_page 404 /404.html;  # Custom 404 page (optional)
    }
}

Collectives™ on Stack Overflow

CSS not loading with docker, nginx and react app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related