Project has black screen even tho run preview works fine in vs code

[adamgamer11119999-23 (Adamgamer11119999 2341)]

when i use f12 i get this error btw :
failed to load resource: the server responded with a status of 404 ()
index.js:1 Failed to load resource: the server responded with a status of 404 ()
(index):102 Uncaught ReferenceError: Engine is not defined
at (index):102:16

also engine is defined in index.js which isn’t able to load

edit: i also posted a screenshot showing the source , and index.js is there but doesn’t work somehow

I have a public folder with index.js and other pngs needed to run web build , index.html file is in root , the public folder stuff get cloned to dist folder when running npm run build and should work normally but they don’t work , here’s my index.html script :

two can stick html, body, #canvas { margin: 0; padding: 0; border: 0; } body { color: white; background-color: black; overflow: hidden; touch-action: none; } #canvas { display: block; } #canvas:focus { outline: none; } #status, #status-splash, #status-progress { position: absolute; left: 0; right: 0;

}
#status, #status-splash {
top: 0;
bottom: 0;
}
#status {
background-color: #242424;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
visibility: hidden;
}
#status-splash {
max-height: 100%;
max-width: 100%;
margin: auto;
}
#status-progress, #status-notice {
display: none;
}
#status-progress {
bottom: 10%;
width: 50%;
margin: 0 auto;
}
#status-notice {
background-color: #5b3943;
border-radius: 0.5rem;
border: 1px solid #9b3943;
color: #e0e0e0;
font-family: ‘Noto Sans’, ‘Droid Sans’, Arial, sans-serif;
line-height: 1.3;
margin: 0 2rem;
overflow: hidden;
padding: 1rem;
text-align: center;
z-index: 1;
}

Your browser does not support the canvas tag. Your browser does not support JavaScript.

[system]

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are many possible causes, and the absence of something can be tricky debug if you don’t know where to look. Here are some things you can do to find the cause and fix it. Debugging Tips Check the error code If you see a mostly white screen with 404: NOT_FOUND along with a Code and and ID then you can click the blue info box below the error deta…

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

[jacobparis]

Did you ever have this working in v0 or was this code you wrote locally and uploaded? v0 uses a custom Next runtime and is not fully compatible with all possible codebases, so there is no guarantee that externally uploaded code will work

[adamgamer11119999-23 (Adamgamer11119999 2341)]

I made it locally in vs code , it works in npm run preview and should work here as well but it doesn’t , i don’t think i used v0 ( i don’t even know what’s that ) , but i figured that for some reason while viewing the output here that only my index.html is there and not index.js or other pngs needed or stuff

[jacobparis]

Oh my bad, I thought we were in the v0 Help category

Your Public folder is not being included in the deployment. If you switch tabs from Source to Output you’ll see what gets deployed, when this works you’ll see it under Output too.

Vite by default looks for a lowercase public directory, which you can configure with the publicDir: path.resolve(__dirname, 'public'), option in your vite.config.js

If you are developing locally on Windows, this might work because Windows is not case sensitive, so it doesn’t distinguish between Public and public, but on Linux based systems and MacOS they are considered to be distinct

[adamgamer11119999-23 (Adamgamer11119999 2341)]

So do i rename or just paste this code in vite.config.js ,
also do you know why that happens with the new build afterwards when deploying
failed to load config from /vercel/path0/vite.config.js

error during build:

ReferenceError: path is not defined

at file:///vercel/path0/vite.config.js.timestamp-1757443305480-a6046ad7fcb2b.mjs:5:14

at ModuleJob.run (node:internal/modules/esm/module_job:343:25)

at async onImport.tracePromise.\__proto_\_ (node:internal/modules/esm/loader:647:26)

at async loadConfigFromBundledFile (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-D_zLpgQd.js:66974:15)

at async loadConfigFromFile (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-D_zLpgQd.js:66815:24)

at async resolveConfig (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-D_zLpgQd.js:66415:24)

at async build (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-D_zLpgQd.js:65502:18)

at async CAC.<anonymous> (file:///vercel/path0/node_modules/vite/dist/node/cli.js:829:5)

Error: Command “npm run build” exited with 1

[jacobparis]

You can remove that change and just rename your Public folder to public, then all the default should work

[adamgamer11119999-23 (Adamgamer11119999 2341)]

It works now thank you so much , but final thing , how do i make the final vercel link public ?

[jacobparis]

The deployed “production” environment is always public, while the “preview” deployments are only accessible to you (we check to make sure you’re logged into Vercel first)