Deploying React App with Vercel CLI and debugging error:

“Requests from referer \u003cempty\u003e are blocked.”

While there are a multitude of options for deploying a React application, I decided to use Vercel. Vercel is a deployment and collaboration platform that makes it easy for frontend developers to deploy applications without any configuration. I couldn’t believe how easy the process was, and did I mention it’s free?

Step 1: Create an account at vercel.com

When you create an account or login, you will need to authenticate with either GitHub, GitLab, Bitbucket, or email.

Step 2: Install Vercel CLI

After completing the signup process, install Vercel globally.

npm install -g vercel

Step 3: Login to Vercel from the Command Line

vercel login

Step 4: Set Up, Link, and Deploy Your Project (make sure you are in the project directory)

vercel login

After running this command, you will be prompted to answer a few questions about your project’s scope, name, and directory. If you are already in the project directory, you can simply press enter and use the default values.

If you generated your application with create-react-app, you will see an additional question about overriding create-react-app settings (the default is N). Do not override the existing settings.

After completing this step, navigate to the production link given in the terminal (https://videos-hooks-wheat-eta.vercel.app).

The application I deployed was from Stephen Grider’s Udemy tutorial which uses the YouTube Data API to display videos based on a search term. If you are interested in creating an app like this for yourself, I highly recommend his course!

When I navigated to the link, I expected to see ‘loading’ on the screen followed by a list of default videos.

After a few moments and no videos, I opened the DevTools and saw the following error.

After doing a little googling, I discovered it had to do with my referrer restrictions on my API key. I went to Google Cloud Console and realized I had HTTP referrers selected as a restriction, with a website restriction of ‘*.example.com*’.

An application restriction allows you to limit what websites are allowed to use your key. After learning this, it made sense why my current application was not able to successfully make a request to the API. To fix the issue, I just added the link to the list of specified websites.

And just like that, a working web application!