[SOLVED] React Vite web app will not apply css after build

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).

Solution

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;
        }
    }
}