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. image 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

0
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.