0

I'm having problems trying to access my website, it returns 404 status code.

I'm using React with Vite and Heroku.

I'm using this buildpack as it says in Vite docs:

Vite Heroku Deploy Doc: https://vitejs.dev/guide/static-deploy.html#heroku

Heroku Buildpack for static file: https://github.com/heroku/heroku-buildpack-static

Website page:

enter image description here

Folder Structure:

enter image description here

Static.json file:

enter image description here

Package.json file:

enter image description here

Vite.config.ts file

enter image description here

Henrique
  • 123
  • 1
  • 9

2 Answers2

1

if you are having deployment issues with ANY single page application, use the following buildpack and make sure you are specifying the root folder of your bundled application

https://github.com/heroku/heroku-buildpack-static

yanir midler
  • 2,153
  • 1
  • 4
  • 16
0

This error can occur when:

1 - You don't specify in static.json file the index route. To solve it, just add this few lines:

"routes": {
    "/**": "index.html"
}

Now you are saying that all routes redirects to index.html file.

If, for some reason, you want to add more routes for different html files, just do this:

"routes": {
    "/": "index.html",
    "*": "404.html"
}

In above example, when request reaches "/" route, it redirects to index.html, but if request uses any different route, it redirects to 404.html file.

2 - It also can happen when you don't have heroku/nodejs buildpack installed in your Heroku app.

If you are using Vite, you have to install both heroku/nodejs and heroku/heroku-buildpack-static

To install it you can access your app in heroku website, then go to settings, finally click on add buildpack button, place this url,save it and redeploy:

https://github.com/heroku/heroku-buildpack-static

Henrique
  • 123
  • 1
  • 9
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 07 '22 at 19:36
  • This didn't work for my heroku deployment. so i deployed to vercel and got the same problem I know the question is for heroku but still if you are looking for vercel [this](https://stackoverflow.com/a/66686684/15721021) worked for me – Circuit Planet Sep 30 '22 at 21:41
  • This will solve the 404 error, however it led me to another error, a Heroku one. Logs from the command `heroku logs --tail` show `npm ERR! Missing script: "start"` which is weird because it was supposed to run the index.html in the dist folder. – AndyLee Feb 22 '23 at 18:08