Deploy reactjs with nginx results in css and images not being applied. Works locally

Question

Hoping some one can point me in the right direction.

This is no doubt a miss understanding on my part, but is webpack required as part of the npm build process?

I am unable to deploy my react application to production.

I can run the app locally with no problems. I then run

npm run build

Push the bundled code to my server and configure nginx. The bundled code gets copied into a nginx docker container.

I can see the plaintext in my browser when I run the application (via docker), the static files load, but they do not render correctly.

Here is an example of an image import:

<img class="waiting_icon" src="./static/media/waiting.da817564.svg" alt="logo">

Nothing shows, same with css styling.

```

├── LICENSE
├── README.md
├── build
│   ├── asset-manifest.json
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── service-worker.js
│   └── static
│       ├── css
│       │   ├── main.e072dfe6.css
│       │   └── main.e072dfe6.css.map
│       ├── js
│       │   ├── main.1b1a2e16.js
│       │   └── main.1b1a2e16.js.map
│       └── media
│           ├── logo.43568448.svg
│           └── waiting.da817564.svg
├── dockerfile
├── now.json
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── renovate.json
├── src
│   ├── assets
│   │   └── images
│   │       ├── logo.svg
│   │       └── waiting.svg
│   ├── containers
│   │   ├── about
│   │   │   └── index.js
│   │   ├── app
│   │   │   └── index.js
│   │   └── home
│   │       └── index.js
│   ├── dockerfile
│   ├── index.css
│   ├── index.js
│   ├── modules
│   │   ├── counter.js
│   │   └── index.js
│   └── store.js
├── webpack.config.js
└── yarn.lock

```

Answer 1

In my case, it had to do with the mime types. In your nginx.conf file, you can try to add the following line in the http section

... http { ... include /etc/nginx/mime.types; server { ... } }