How can I deploy a website using a concealed API key for accessing weather data?

Other Questions RapidAPI
1

I’ve built a website that retrieves weather information via a RapidAPI service, and the API key is stored securely. I tried out free hosting providers like Github Pages, Vercel, and Netlify since I needed a free solution. However, when using Vercel or Github Pages, the API call doesn’t fetch any data and I’m wondering if it’s due to my configuration or if those platforms don’t support realtime API calls in free plans.

Below is my project’s folder structure:

my-weather-app/
  ├── index.html
  ├── styles.css
  ├── script.js
  └── config.js (hidden)

And here’s an example of how I retrieve the weather data using a different code approach:

const fetchWeather = async (location) => {
  const requestUrl = 'https://different-weather-api.com/forecast';
  const requestOptions = {
    method: 'GET',
    headers: {
      'X-API-Token': secretConfig.API_TOKEN,
      'X-API-Endpoint': secretConfig.API_ENDPOINT
    }
  };
  try {
    const apiResponse = await fetch(requestUrl, requestOptions);
    const data = await apiResponse.json();
    showWeather(data);
  } catch (err) {
    console.error(err);
  }
}

Can anyone suggest a way to host this on any free service like Vercel with working API calls? I’m looking for any advice or workarounds.

2

Having deployed numerous sites with API integrations, I can offer some insights. Your issue likely stems from how you’re handling the API key on the client side. Free hosting platforms often block direct API calls for security reasons.

A robust solution is to set up a small server-side application. You could use Node.js with Express to create a simple API that acts as a middleman. This server would store your API key securely and make the weather API calls on behalf of your client-side code.

For hosting, consider Heroku’s free tier. It supports server-side applications and securely manages environment variables for your API keys. Your client-side code would then make requests to your Heroku app instead of directly to the weather API.

This approach not only solves your hosting issue but also adds an extra layer of security by keeping your API key off the client entirely.

3

I’ve faced similar challenges deploying sites with API keys. From my experience, the issue likely stems from how you’re handling environment variables. Free hosting platforms often require specific setups for secure API usage.

For Vercel, try using their Environment Variables feature. In your project dashboard, navigate to Settings > Environment Variables. Add your API key there, then reference it in your code like ‘process.env.API_KEY’.

Another approach I’ve used is setting up a small backend service (like Express.js) to handle API calls. This keeps your key server-side. You could deploy this on a platform like Heroku’s free tier.

Alternatively, consider using a service like Cloudflare Workers. They offer a generous free tier and can act as a proxy for your API calls, keeping your key secure.

Remember, client-side API calls can expose your key. Always prioritize server-side solutions when possible for better security.

4

hey man, i had the same problem. try using netlify functions. they let u make serverless api calls without exposing ur key. just create a new function, move ur api logic there, and call it from ur frontend. works like a charm for me. good luck!