Railway•3y ago

React + Vite + React Router - 404 on page reload.

Hi all, We really love your product and we are evaluating to move our current infrastructure to your offered service. We are running into an issue where we have a React app bundled with Vite and client side routing is handled by react-router@6. the app builds and deploys fine and we can see the app remotely @ https://piggy-frontend-production.up.railway.app however when we reload the page we get a 404. we know in order to fix this we need to manually change server rewrites to redirect to /index.html. This functionality is not present on the project dashboard nor in the railway repo settings. Is this a know issue to you or there is some settings we are not seeing? hopefully you can help out 🙂 thanks!

React App

Web site created using create-react-app

5 Replies

Unknown User•3y ago

Message Not Public

scatter•3y ago

same here, did you get this solved? actually i see from the link that you did, could you share the solution? @Jimmy. 🙂

jimmyOP•3y ago

basically the fix for the issue you have is that nginx does not resolves the reload path and you are required to change the server configuration for nginx. unfortunately this is not something Railway supports (for now). the fix is to wrap the whole react app withing a docker container and run nginx into that container. STEP 1: Create a Dockerfile at the root of your project and add in it the following code:

FROM node:14-alpine AS builder

ARG API_URL
ARG COGNITO_REGION
ARG COGNITO_USER_POOL_ID
ARG COGNITO_WEB_CLIENT_ID

# Add a work directory
WORKDIR /app

COPY package.json .

RUN yarn install

COPY . /app/

RUN yarn build

FROM nginx:alpine

# Set working directory to nginx asset directory
WORKDIR /usr/share/nginx/html

# Remove default nginx static assets
RUN rm -rf ./*

COPY --from=builder /app/dist .

COPY .nginx/nginx.conf /etc/nginx/conf.d/default.conf

ENTRYPOINT ["nginx", "-g", "daemon off;"]

FROM node:14-alpine AS builder

ARG API_URL
ARG COGNITO_REGION
ARG COGNITO_USER_POOL_ID
ARG COGNITO_WEB_CLIENT_ID

# Add a work directory
WORKDIR /app

COPY package.json .

RUN yarn install

COPY . /app/

RUN yarn build

FROM nginx:alpine

# Set working directory to nginx asset directory
WORKDIR /usr/share/nginx/html

# Remove default nginx static assets
RUN rm -rf ./*

COPY --from=builder /app/dist .

COPY .nginx/nginx.conf /etc/nginx/conf.d/default.conf

ENTRYPOINT ["nginx", "-g", "daemon off;"]

Replace those ARG with your env variables and if you use npm replace where im using yarn STEP 2: Create .nginx/nginx.conf file at the root of your project and add the following code:

server {
   listen       80;
   server_name  localhost;

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

server {
   listen       80;
   server_name  localhost;

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

STEP 3: Add a .dockerignore file at the root of your project and add the following code:

node_modules

node_modules

then all you have to do is to push repo to master and trigger deploy on Railway and the builder will automatically detect you have a Dockerfile at the root of your project and will run the app with it. Make sure to remove from Railway UI any start command (leave it empty). NOTE: if you have setup a PORT env variable in Railway UI please change the value to 80 so it matches with your nginx config file. And it should work fine!

scatter•3y ago

Thank you!

Unknown User•3y ago

Message Not Public

Gaming

Programming

React + Vite + React Router - 404 on page reload.