Question

Problem with vite app

Posted on November 22, 2023
DigitalOcean App Platform
Asked by Pim Delivery

Hey, guys!

I created an App with intagration with my github repository. I have a backend in NestJs and a frontend in React and Vite.

I have no problem to access my backend, but in frontend, apparently it’s run with no problem but when I tried to access, the page shows nothing and the console shows the erros:

client:1 Failed to load resource: the server responded with a status of 404 ()

main.tsx:1 Failed to load resource: the server responded with a status of 404 ()

@react-refresh:1 Failed to load resource: the server responded with a status of 404 ()

logo.png:1 Failed to load resource: the server responded with a status of 404 ()

Anyone here had this problem? Can you help me?

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

KFSys

Site Moderator

• November 23, 2023

Heya

Here are some steps and considerations to help you troubleshoot and resolve this issue, they are a bit too broad but can help to further pinpoint the source.

Check the Build Configuration:
- Ensure that your package.json has the correct build script for Vite and React.
- Verify that the build process completes successfully in the DigitalOcean App Platform.
Verify the Output Directory:
- Check if the output directory specified in your Vite configuration matches the directory being served by DigitalOcean. By default, Vite uses the dist directory, but this can be customized.
Inspect Base URL and Public Path Settings:
- In Vite, the base config option in vite.config.js determines the base path for the project. If your app is not served from the root URL, you need to set this appropriately.
- Ensure that any references to static assets (like logo.png) are correctly pointing to the paths where these assets are served.
Review Static Files and Routing:
- Double-check that all static files (images, CSS, JS) are included in the build output and are accessible in the correct paths.
- If you’re using React Router or a similar library, ensure that the server is correctly configured to support client-side routing (usually by redirecting all requests to the index.html file).
Examine Logs and Deployment Details:
- Look at the deployment logs in DigitalOcean’s App Platform to identify any errors during the build or deployment process.
- Sometimes, the issue may be related to how DigitalOcean caches builds or serves files, so consider redeploying with a clear cache if possible.
Test Locally:
- If possible, build and run the production build of your frontend locally to see if the issue replicates. This can help you determine if the problem is with the build process or the deployment environment.