How to deploy a React website via Vercel or heroku?

Question

I am developing a React project for studies and would like to publish. I tried some ways, but the site is blank, there is no data from the NEWS-API I am using. It seems to make no mistake. It is a front application, only react with the API.

If it helps, here's the repository link. https://github.com/carlos-souza-dev/apinews

Answer 1

I visited your deployment in vercel from your github repo and noticed this issue.

You're requesting data from the API over http which is insecure, while your page hosted by vercel uses https.

Modern browsers donot allow for a page served over https to request http data.

It might just be a fixed by changing your urls to use https, or if the API didn't have https you might have to do other workarounds.(Although it's better to use an API with https support)

I noticed this by opening the console after visiting your page to see these Mixed content requests blocked error.

The reason for the blank page after loading is that the Promise to get the data from the API get rejected but never handled causing the JavaScript execution to stop

[EDIT 1] I read through some of the code in your repository and noticed a link pointing to localhost. It looks like you tried to setup a nodejs server to proxy data through https

The API you're using does seem to have HTTPS support

Conclusion:

• Try changing the links to the API to https instead of http in your react code and see if it works. If it does, there's no need for a backend server of you're own
• If the API doesn't have HTTPS support however, do either one of
  • Migrate to a different API with HTTPS support
  • Try serving your static react app through the backend and pointing your react app to /path/to/api/route without an absolute url and use the proxy setting in package.json as said here for development
  • Point to a full path to your backend server on the internet (i.e remove localhost links)

Also note that you cannot deploy a backend to vercel but it does support serverless functions