<h1>Note</h1>
<p>After deploying my side project, YourTrack, on Vercel, at first, it seemed to be working fine because it successfully loaded the authentication page to connect with Spotify.</p>
<p><img src="/images/2402080946/yourtrack-auth.webp" alt="YourTrack Auth"></p>
<p>However, once I agreed to connect and the page reloaded to return to the preview flow, I encountered a 404 NOT FOUND error.</p>
<p><img src="/images/2402080946/vercel-404-error.webp" alt="Vercel 404 Error"></p>
<p>Initially, I thought it was a configuration error with Vite and React, but it turns out that it wasn't. It was actually quite simple.</p>
<p>I had to add a configuration file for Vercel so that when my page reloads or goes to a different route, it doesn't show a 404 page.</p>
<p>Add the following to the <code>vercel.json</code> file:</p>
<pre><code>{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}
</code></pre>
<p>Re-deploy your app, and it should work fine.</p>
<h1>References</h1>
<ul>
<li>https://stackoverflow.com/questions/76379501/how-to-solve-react-vite-404-error-on-vercel</li>
</ul>


How to resolve 404 error on Vercel (React + Vite)

Note

References