Trouble hosting react app at location using docker nginx

Question

I've been stuck on this for over a week now and its driving me bonkers haha. Essentially I have a react app I created for a client that wants it to display at clientdomain.com/react-app. I'm using docker to spin up a container that's running at localhost:8000. When I visit localhost:8000/react-app the project displays properly as I have the app routing there using react-router. Unfortunately when visiting the target url and path it's blank and has a few of these errors in console; Loading failed for the <script> with source “https://clientdomain.com/static/js/2.f5d5b027.chunk.js”

here is the nginx config for the clients site with the location config i've added at location /react-app

     server {
        listen [::]:443 ssl ipv6only=on; # managed by Certbot
        listen 443 ssl; # managed by Certbot

        server_name clientdomain.com www.clientdomain.com;

        root /var/www/clientdomain;
        index index.php index.html index.htm;

        rewrite ^/artiklar/([^/]+)/$ /article-$1.php last;



     location /react-app/ {
            rewrite ^/react-app/(.*)$ /$1 break;

        proxy_http_version 1.1;
        proxy_cache_bypass $http_upgrade;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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;

        proxy_pass http://localhost:8000;
        }
   }

here is my Dockerfile

FROM mhart/alpine-node:11 AS builder
WORKDIR /app
COPY . .

FROM mhart/alpine-node
RUN yarn global add serve
WORKDIR /app
COPY --from=builder /app/build .
CMD ["serve", "-p", "80", "-s", "."]

Also this is the /var/www/html folder structure

/var/www/html
/var/www/clientsdomain
/var/www/react-app

Ive also tried to use just serve -s build and remote proxy to the localhost it is being served at but the same issue occurs.

These are the docker commands that are being used as well to build and run

docker build -t react-app .
docker run -it -p 8000:80 react-app

Thanks!!

What's the root URL of the react app when running locally? localhost:8000 or localhost:8000/react-app? — BahmanM
– BahmanM, Commented Feb 4, 2021 at 23:50
its localhost:8000 but react router displays at /react-app. Sorry ill add a bit to clear that up. Thanks! — rtwhite
– rtwhite, Commented Feb 5, 2021 at 1:39

Thanh Nguyen Van · Accepted Answer · 2021-02-05 07:52:39Z

1

Follow this : Server rendering React app behind a URL prefix with react-router

You should run react app with prefix:

import { createHistory, useBasename } from 'history'

const history = useBasename(createHistory)({
  basename: '/react-app'
})

AND:

You are rewriting /react-app/ to /

You should remove rewrite :

Remove this line : rewrite ^/react-app/(.*)$ /$1 break;

edited Feb 5, 2021 at 7:52

answered Feb 5, 2021 at 2:40

Thanh Nguyen Van

12k8 gold badges41 silver badges58 bronze badges

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

5 Comments

rtwhite Over a year ago

I removed that and still the same issue:/

Thanh Nguyen Van Over a year ago

how did you access clientdomain.com/react-app/ ? it works ?

rtwhite Over a year ago

Sorry, but i'm unsure what you mean by access.

Thanh Nguyen Van Over a year ago

I meant It works when you access clientdomain.com/react-app/ (you see react app index page on that link ?)

rtwhite Over a year ago

ahh in console under sources it's accessing a folder react-app that contains an incorrect index.html file and not the correct folder that contains the build files

Collectives™ on Stack Overflow

Trouble hosting react app at location using docker nginx

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related