Question

Problem with vite app

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!

Sign In or Sign Up to Answer

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
Site Moderator badge
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.

  1. 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.
  2. 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.
  3. 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.
  4. 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).
  5. 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.
  6. 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.

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel