React routes on Netlify in 2 steps
This week I just finished a very cool project (if you feel ๐). It's a mobile web app to check your daily music stats, all artists and tracks it's getting from Spotify API.
I had finished and it was doing well on my localhost. I decided to go with a manual deployment on Netlify (drag and drop), so I built the project and I deployed the application. At the moment was fine then I decided to try a non-authorized route to test <Redirect />
options, and I ran out with this error.
I didn't know what was going. I was reviewing again the code and it didn't seem to have any issue.
Then I found this support guide, and I understand what was going on. However I was doing a manual deploying, building, and uploading build
directory to Netlify, again search and I found this solution. It's basically we have to allow redirecting any unknown route to index.html
file.
Redirects file
Go to public
directory and create _resources
file
Add redirect routes
On _resources
file add
/* /index.html 200
Build again the project
npm run build
Deploy again
Drag and drop build
directory to Netlify deployed section
Conclusion
This approach scopes just for manually deployment, if you're deploying from GitHub reposit follow this tutorial
I'd be grateful if you could leave a comment if you found this post helpful or liked it. Also, let me know if you have another approach to deal with the same issue
Please follow @btandayamo on Twitter
Subscribe to my newsletter
Read articles from Bertil Alberto Tandayamo directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Bertil Alberto Tandayamo
Bertil Alberto Tandayamo
Developer Entrepreneur Music enthusiast Currently working as a freelance developer with Ruby on Rails and React Stack.