How can I deploy a website with a hidden API key that fetches real-time weather data?

Other Questions RapidAPI
1

I’ve built a site that pulls weather info from a RapidAPI service. I’ve kept the API key secret, but now I’m stuck on how to get it online for free.

I checked out GitHub Pages, Vercel, and Netlify. But when I tried Vercel and GitHub Pages, the API calls didn’t work. Am I doing something wrong? Is there a free way to host sites that use live data like this?

My files are set up like this:

project/
  ├── index.html
  ├── style.css
  ├── script.js
  └── config.js (hidden)

In my main JavaScript file, I’m grabbing the data like this:

async function fetchWeather() {
  const response = await fetch(apiUrl, {
    headers: {
      'X-RapidAPI-Key': mySecretKey,
      'X-RapidAPI-Host': apiHost
    }
  });
  const weatherData = await response.json();
  // Process weatherData
}

How can I get this working on platforms like Vercel? What steps should I follow to ensure the API functions correctly when deployed?

2

Deploying a site with a hidden API key can be challenging, but I managed to solve it by rethinking how the key is handled. Instead of storing the API key on the client side, I created a small Node.js server using Express that acts as a secure intermediary. I moved the API request logic to this server, set the API key as an environment variable in my Heroku deployment, and then had the client code query my server instead of the external API directly. I also ensured that the CORS settings were correctly configured for my frontend domain. This method keeps the API key secure and allows the application to scale.

3

I’ve encountered this issue before. The solution lies in server-side environment variables. For Vercel, navigate to your project settings and add your API key as an environment variable. Then, modify your code to fetch the key from the environment:

const apiKey = process.env.RAPIDAPI_KEY;

This approach keeps your key secure while allowing the API calls to function correctly. Remember to update your build settings to include the necessary environment variables. If you’re using a static site generator, you might need to implement a small serverless function to handle the API requests securely. This method should work across most hosting platforms, ensuring your weather data fetches properly when deployed.

4

hey bob, have u tried using environment variables? most hosting platforms support em. u can store ur API key there and access it in ur code. for vercel, u can set em in the project settings. then use process.env.API_KEY in ur code. that way ur key stays hidden but still works when deployed. hope this helps!