Question 414376 in Html Question posted in
Some basic documentation can be found here.

Html – React Vite web app will not apply css after build

I am creating a web application using react + vite and tailwindcss. I want to dockerize it.

Here is my dockerfile:

# Stage 1
FROM node:lts AS builder
WORKDIR /app
COPY . .
RUN npm i -f && npm audit fix
RUN cp .env.production .env
RUN npm run build

# Stage 2
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

and my nginx.conf:

events{
    worker_connections 1024;
}
http{
    server {
        listen 80;
        root /usr/share/nginx/html;

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

        location ~ .js$ {
            types { application/javascript js; }
            add_header Content-Type application/javascript;
        }

        location /api/ {
            proxy_pass http://localhost:3000;  
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: ''
})

index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo_white.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
  </head>
  <body>
    <div id="root"></div>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

when i dockerize this, the css won’t apply to the web page
and I checked and the stylesheet is available on the docker container. here is the file structure.

what am i doing wrong? and any advice regarding any part of the process is welcome since this is my first time doing this.

now the npm run dev works perfectly, and when i manually run npm run build and npm run preview it works too. but when i dockerize it the app does not get any css styling(tailwind or not).

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Including mime.types and clearing cache on docker did the thing.

    events{
    worker_connections 1024;
}
http{
    include /etc/nginx/mime.types;
    server {
        listen 80;
        
        root /usr/share/nginx/html;

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

        location /api/ {
            proxy_pass http://localhost:3000;  
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

  2. 0

    Ensure your Nginx config correctly serves CSS with the proper MIME type by adding a location block for .css files, text/css as the MIME type . Also, double-check that the paths in your HTML match those expected by Nginx within the Docker container.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search