App.css styles not being applied when react project deployed to docker

Question

Details

I'm trying to deploy a React.js project to docker, but the App.css styles aren't being applied to the HTML elements. The App.css file is being properly imported and can be found in the page sources, but the elements aren't applying their classes.

Configuration

Dockerfile


FROM node:20.10.0 AS build

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:latest

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

events {
  worker_connections 1024;
}

http {
  sendfile on;

  server {
    listen 80;
    server_name localhost;

    location / {
      root /usr/share/nginx/html;
      index index.html;
      try_files $uri $uri/ /index.html;
    }
  }
}

Client pictures

Conclusion

It's possible that I might have misconfigured like package.json or some other React.js component that has an impact on this. I'm still very new to react and might have deleted some important setting or something.

Any help or suggestions would be greatly appreciated

Just solved this exact issue with the fix here: stackoverflow.com/questions/79356449/… — user29357965
– user29357965, Commented Jan 25 at 5:34

Sandeep M · Accepted Answer · 2024-03-08 10:50:37Z

0

There might be issue with the way you copy package.json. Try removing the asterisk. Here is the dockerfile I used and it worked perfectly

#Specify the base image
FROM node:14.14.0-alpine as builder

#Specify the workdir
WORKDIR /app

#Copy the package json
COPY ./package.json ./

#Install dependencies
RUN npm install

#Copy all files and folders
COPY ./ ./

#Create build
RUN npm run build


#Start new image creation
FROM nginx

#Expose port
EXPOSE 3000

#Copy default.conf file
COPY ./nginx/default.conf ./etc/nginx/conf.d/

#Copy files from the previous image
COPY --from=builder ./app/build ./usr/share/nginx/html

answered Mar 8, 2024 at 10:50

Sandeep M

3601 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ronanski11 Over a year ago

Unfortunately this didn't solve the problem. My project is public --> github.com/ronanski11/Teezinator/tree/main/teezinator-client. Maybe there is an obvious mistake i missed..?

Collectives™ on Stack Overflow

App.css styles not being applied when react project deployed to docker

Details

Configuration

Dockerfile

nginx.conf

Client pictures

Conclusion

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Details

Configuration

Dockerfile

nginx.conf

Client pictures

Conclusion

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related