CODEWITHSUNDEEP
reactjsdockerantdant-design-pro
Zini
Zini

Reputation: 21

Ant Design not loaded after deployment

I built a react project that applied ant design with react-app-rewired as the official document. Css was loaded well after yarn start, but after yarn build was not loaded. I used Docker and Nginx to deploy. Other components work well, but only the ant design is broken and appears on the screen.

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    }),
);

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "noImplicitAny": false,
        "charset": "utf8"
    },
    "include": ["src"],
    "exclude": ["./node_modules/**/*"]
}

...
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
...
"devDependencies": {
    "@types/react-router-dom": "^5.1.7",
    "babel-plugin-import": "^1.13.3",
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.1.8"
  }
...

FROM node:12 as builder
RUN mkdir /app
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY ./package*.json ./
COPY ./yarn.lock ./

RUN apt-get update
RUN apt install yarn -y
RUN yarn global add [email protected]
RUN yarn install
COPY . .
RUN yarn run build

# Production build

FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY ./nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Upvotes: 1

Views: 978

Answers (1)

Zini
Zini

Reputation: 21

It was Nginx problem. I used Nginx docker container to deploy React built project with custom nginx.conf. It can't serve css files with mime types with adding include mime.types on configs.

worker_processes auto;

events { worker_connections 1024; }

http {

  include mime.types; # MUST BE ADDED
  sendfile on;

  server {
    listen 80;

Upvotes: 1

Related Questions