Vite SPA 404 when page refresh

[ercnshngit]

When i follow the documentation, i choose build type nixpacks and public directory ./dist
But in this case it will spin up a nginx but it didn't insert try_files $uri /index.html =404;
So when you refresh the page it shows 404.

[qrver]

Hello! How u set up your domain ports? It should be 80. Also install v0.21.5 now.

Can u show docker ps -a command if all actions didn't help? Also u have errors in build?

[ercnshngit]

My domain port is 80.

I installed v0.21.5.
Also my build has no errors.
When i open domain.com there is no problem, i can navigate between pages.
But if i hit refresh in any page other than " / ". In example domain.com/auth/login. I see a 404 error.

I can solve this with editing /etc/nginx/conf.d/default.conf

 location / {
       root   /usr/share/nginx/html;
       index  index.html index.htm;
       try_files \$uri \$uri/ /index.html;  // adding this line
   }

Application Information:
Vite React spa

Provider: Github App

Build Settings:

Build log:

Initializing deployment
Clonning Repo github.com/Belediye-Panel/belediye-frontend.git to /etc/dokploy/applications/belediye-frontend-05zoym/code: ✅
Cloning into '/etc/dokploy/applications/belediye-frontend-05zoym/code'...
remote: Enumerating objects: 458, done.
remote: Total 458 (delta 92), reused 194 (delta 22), pack-reused 0 (from 0)
Cloned github.com/Belediye-Panel/belediye-frontend.git: ✅
Build nixpacks: ✅
Source Type: github: ✅
╔═══════════════════════ Nixpacks v1.29.1 ═══════════════════════╗
║ setup      │ nodejs_18, npm-9_x                                ║
║────────────────────────────────────────────────────────────────║
║ install    │ npm install -g [email protected] && corepack enable ║
║            │ npm ci                                            ║
║────────────────────────────────────────────────────────────────║
║ build      │ npm run build                                     ║
║────────────────────────────────────────────────────────────────║
║ start      │ npm run start                                     ║
╚════════════════════════════════════════════════════════════════╝
#0 building with "default" instance using docker driver
#1 [internal] load build definition from Dockerfile
#1 transferring dockerfile: 1.20kB done
#1 DONE 0.0s
#2 [internal] load metadata for ghcr.io/railwayapp/nixpacks:ubuntu-1731369831
#2 DONE 0.4s
#3 [internal] load .dockerignore
#3 transferring context: 2B done
#3 DONE 0.0s
#4 [stage-0  1/11] FROM ghcr.io/railwayapp/nixpacks:ubuntu-1731369831@sha256:248c718af9f76e602170a3cdbf69658edf55c910023104e1f277e517b77977a0
#4 DONE 0.0s
#5 [internal] load build context
#5 transferring context: 2.60MB 0.1s done
#5 DONE 0.1s
#6 [stage-0  2/11] WORKDIR /app/
#6 CACHED
#7 [stage-0  3/11] COPY .nixpacks/nixpkgs-e05605ec414618eab4a7a6aea8b38f6fbbcc8f08.nix .nixpacks/nixpkgs-e05605ec414618eab4a7a6aea8b38f6fbbcc8f08.nix
#7 CACHED
#8 [stage-0  4/11] RUN nix-env -if .nixpacks/nixpkgs-e05605ec414618eab4a7a6aea8b38f6fbbcc8f08.nix && nix-collect-garbage -d
#8 CACHED
#9 [stage-0  5/11] COPY . /app/.
#9 DONE 0.1s
#10 [stage-0  6/11] RUN --mount=type=cache,id=kh0z0qYQrfU-/root/npm,target=/root/.npm npm install -g [email protected] && corepack enable
#10 1.157 npm WARN config production Use `--omit=dev` instead.
#10 2.070
#10 2.070 changed 1 package in 1s
#10 DONE 2.4s
#11 [stage-0  7/11] RUN --mount=type=cache,id=kh0z0qYQrfU-/root/npm,target=/root/.npm npm ci
#11 0.494 npm WARN config production Use `--omit=dev` instead.
#11 175.2
#11 175.2 added 1005 packages, and audited 1006 packages in 3m
#11 175.2
#11 175.2 237 packages are looking for funding
#11 175.2   run `npm fund` for details
#11 175.2
#11 175.2 5 moderate severity vulnerabilities
#11 175.2
#11 175.2 To address all issues, run:
#11 175.2   npm audit fix
#11 175.2
#11 175.2 Run `npm audit` for details.
#11 DONE 175.6s
#12 [stage-0  8/11] COPY . /app/.
#12 DONE 0.2s
#13 [stage-0  9/11] RUN --mount=type=cache,id=kh0z0qYQrfU-node_modules/cache,target=/app/node_modules/.cache npm run build
#13 0.684 npm WARN config production Use `--omit=dev` instead.
#13 0.736
#13 0.736 > [email protected] build
#13 0.736 > vite build
#13 0.736
#13 1.338
#13 1.338 ️  Generating routes...
#13 1.881  Processed routes in 542ms
#13 1.882 vite v5.4.14 building for production...
#13 2.280 transforming...
#13 17.16 ✓ 3904 modules transformed.
#13 18.71 rendering chunks...
#13 18.80 computing gzip size...
#13 18.91 dist/index.html                     0.40 kB │ gzip:   0.27 kB
#13 18.91 dist/assets/index-bTpDpOTg.css    154.78 kB │ gzip:  25.11 kB
#13 18.91 dist/assets/index-D-EwBst5.js   3,064.13 kB │ gzip: 861.57 kB
#13 18.91 
#13 18.91 (!) Some chunks are larger than 500 kB after minification. Consider:
#13 18.91 - Using dynamic import() to code-split the application
#13 18.91 - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
#13 18.91 - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
#13 18.91 ✓ built in 16.66s
#13 DONE 19.1s
#14 [stage-0 10/11] RUN printf '\nPATH=/app/node_modules/.bin:$PATH' >> /root/.profile
#14 DONE 0.2s
#15 [stage-0 11/11] COPY . /app
#15 DONE 0.2s
#16 exporting to image
#16 exporting layers
#16 exporting layers 9.3s done
#16 writing image sha256:b26e8577f96ee4fe68b0bb7c7755c6559d6a2a1f3fad03f6028de9cb775bb221 done
#16 naming to docker.io/library/belediye-frontend-05zoym done
#16 DONE 9.3s
1 warning found (use docker --debug to expand):
 - UndefinedVar: Usage of undefined variable '$NIXPACKS_PATH' (line 18)
=== Successfully Built! ===
Run:
docker run -it belediye-frontend-05zoym
64f93bccbef563c21fc9d90ce794f54c797f23e9a76e4d9f8a0da839b6bea3ca
belediye-frontend-05zoym-A6MCWLn66x
#0 building with "default" instance using docker driver
#1 [internal] load build definition from Dockerfile
#1 transferring dockerfile: 99B done
#1 DONE 0.0s
#2 [internal] load metadata for docker.io/library/nginx:alpine
#2 DONE 0.8s
#3 [internal] load .dockerignore
#3 transferring context: 2B done
#3 DONE 0.0s
#4 [1/3] FROM docker.io/library/nginx:alpine@sha256:4ff102c5d78d254a6f0da062b3cf39eaf07f01eec0927fd21e219d0af8bc0591
#4 DONE 0.0s
#5 [internal] load build context
#5 transferring context: 3.27MB 0.0s done
#5 DONE 0.0s
#6 [2/3] WORKDIR /usr/share/nginx/html/
#6 CACHED
#7 [3/3] COPY ./dist .
#7 DONE 0.0s
#8 exporting to image
#8 exporting layers 0.0s done
#8 writing image sha256:0b000aa30ef628028f77c222b35b88a431b5fc27484ccde8de46905175984a2a done
#8 naming to docker.io/library/belediye-frontend-05zoym done
#8 DONE 0.0s
Docker Deployed: ✅

[gsporto]

same problem as @ercnshngit simple vite spa not being redirect inside nginx, anything config missing on our side ? or should we open an issue ?

[ercnshngit]

I tried a basic fix for problem
#1679

[nktnet1]

One workaround for the time being is to just use Dockerfile deployment and configure this in nginx config, e.g. here's what I use for one of my projects:

• nginx.conf
• Dockerfile

Note that it's a turborepo - if you're working with a regular repository or have a different file structure, modify the COPY instructions in your Dockerfile to contain the appropriate path mapping.