Deploying basic Tanstack Start app to Netlify gives 404 - 'dist' folder not found
I went to https://tanstack.com/start/latest/docs/framework/react/examples/start-basic and clicked 'Deploy to Netlify' without editing a single letter of code.
It creates a repo on my gitlab account and goes through deployment on Netlify, so far so good.
Deployment fails however with the following error message:
Configuration error
1:26:47 PM: ──────────────────────────────────────────────────────────────── 1:26:47 PM: 1:26:47 PM: Error message 1:26:47 PM: Deploy did not succeed: Deploy directory 'dist' does not exist 1:26:47 PM: 1:26:47 PM: Resolved config 1:26:47 PM: build: 1:26:47 PM: command: npm run build 1:26:47 PM: commandOrigin: ui 1:26:47 PM: publish: /opt/build/repo/dist 1:26:47 PM: publishOrigin: ui When I run the build command locally, it does in fact NOT create a 'dist' folder, instead a .output and .vinxi folder is created. Changing the deployment settings in Netlify to either one of these folders results in a successful deployment, but when I then go to the site Netlify gives me a 404 error: "Site not found Looks like you followed a broken link or entered a URL that doesn’t exist on Netlify. If this is your site, and you weren’t expecting a 404 for this path, please visit Netlify’s “page not found” support guide for troubleshooting tips." That support guide has not proven very helpful, it just basically says the 'dist' folder must be set as publish directory. Again, that is not created at buildtime. WHo can shed some light on this? thanks in advance!
1:26:47 PM: ──────────────────────────────────────────────────────────────── 1:26:47 PM: 1:26:47 PM: Error message 1:26:47 PM: Deploy did not succeed: Deploy directory 'dist' does not exist 1:26:47 PM: 1:26:47 PM: Resolved config 1:26:47 PM: build: 1:26:47 PM: command: npm run build 1:26:47 PM: commandOrigin: ui 1:26:47 PM: publish: /opt/build/repo/dist 1:26:47 PM: publishOrigin: ui When I run the build command locally, it does in fact NOT create a 'dist' folder, instead a .output and .vinxi folder is created. Changing the deployment settings in Netlify to either one of these folders results in a successful deployment, but when I then go to the site Netlify gives me a 404 error: "Site not found Looks like you followed a broken link or entered a URL that doesn’t exist on Netlify. If this is your site, and you weren’t expecting a 404 for this path, please visit Netlify’s “page not found” support guide for troubleshooting tips." That support guide has not proven very helpful, it just basically says the 'dist' folder must be set as publish directory. Again, that is not created at buildtime. WHo can shed some light on this? thanks in advance!
React TanStack Start Start Basic Example | TanStack Start Docs
An example showing how to implement Start Basic in React using TanStack Start.
2 Replies
stormy-goldOP•6mo ago
Okay, I figured it out. Apparently, in app.config.ts it needs the following:
server: {
preset: "netlify",
},
and then it will spawn a 'dist' folder when build succeeds. That was not in the code by default though, and when I click a shiny 'Deploy to Netlify' button and I get manoeuvred through the gitlab and netlify steps almost seamlessly, I kinda expect it to work and not trip and fall over a thing like this. (not trying to be a d*ck)
Another thing I noticed: the example code with the Count button that writes to a count.txt file using a server func does not work in the Netlify Deploy. Is that because file writes are prohibited? Or do we need a different 'fs' package than 'node:fs' when on Netlify?
fair-rose•6mo ago
it should autodetect the deployment target
can you please create a GitHub issue for this?
on netlify I think you can't write to that dir where the code is stored
maybe also worth a GitHub issue