How to use external APIs in Replit

Start by creating a new Repl using the Node.js template. Once the workspace loads, open the Shell from the Tools dock and install axios, a popular HTTP client that simplifies API requests. While Node.js 18+ includes a built-in fetch API, axios provides cleaner error handling and automatic JSON parsing, which makes it a better choice for beginners working with APIs.

1npm install axios express

Never hardcode API keys in your source code. In Replit, open the Tools dock on the left sidebar and click Secrets. In the App Secrets tab, add a new secret with the key OPENWEATHER_API_KEY and paste your API key as the value. This stores the key using AES-256 encryption. In your code, access it with process.env.OPENWEATHER_API_KEY. Secrets are available at runtime but not during the build phase.

Create a file called api.js in your project root. Import axios and use it to fetch current weather data from the OpenWeatherMap API. The request uses your stored API key from the Secrets panel. Axios automatically parses the JSON response, so you can access data properties directly from response.data. Wrap the call in a try-catch block to handle network errors, invalid API keys, and rate limiting gracefully.

1const axios = require('axios');
2
3async function getWeather(city) {
4  const apiKey = process.env.OPENWEATHER_API_KEY;
5  const url = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&appid=${apiKey}&units=metric`;
6
7  try {
8    const response = await axios.get(url);
9    const data = response.data;
10    return {
11      city: data.name,
12      temperature: data.main.temp,
13      description: data.weather[0].description,
14      humidity: data.main.humidity
15    };
16  } catch (error) {
17    if (error.response) {
18      console.error(`API error: ${error.response.status} - ${error.response.data.message}`);
19    } else {
20      console.error(`Network error: ${error.message}`);
21    }
22    return null;
23  }
24}
25
26module.exports = { getWeather };

Create an index.js file that imports your API function and serves the results through a simple Express web server. The server listens on port 3000 and responds to requests at the /weather/:city endpoint. Make sure the server binds to 0.0.0.0 so Replit can detect the open port for the preview pane. This is a common gotcha: binding to localhost or 127.0.0.1 causes the preview and deployments to fail.

1const express = require('express');
2const { getWeather } = require('./api');
3
4const app = express();
5const PORT = 3000;
6
7app.get('/', (req, res) => {
8  res.send('<h1>Weather API</h1><p>Try /weather/London</p>');
9});
10
11app.get('/weather/:city', async (req, res) => {
12  const weather = await getWeather(req.params.city);
13  if (weather) {
14    res.json(weather);
15  } else {
16    res.status(500).json({ error: 'Failed to fetch weather data' });
17  }
18});
19
20app.listen(PORT, '0.0.0.0', () => {
21  console.log(`Server running on port ${PORT}`);
22});

Once your server is running, the Replit preview pane opens automatically showing your app. Navigate to /weather/London in the preview URL bar to test the API integration. You should see a JSON response with the city name, temperature, weather description, and humidity. Try different city names to verify the API handles various inputs. If you see an error, check that your OPENWEATHER_API_KEY secret is set correctly and that the API key is active (new keys can take a few minutes to activate).

If you prefer not to use axios, Node.js 18+ in Replit includes a built-in fetch function. The syntax is slightly different: fetch returns a Response object, and you must call response.json() to parse the body. The fetch approach has no external dependencies but requires more manual error checking since it does not throw on HTTP error status codes like axios does. For projects with complex API integrations that require professional guidance, RapidDev can help architect robust API communication layers.

1async function getWeatherWithFetch(city) {
2  const apiKey = process.env.OPENWEATHER_API_KEY;
3  const url = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&appid=${apiKey}&units=metric`;
4
5  try {
6    const response = await fetch(url);
7    if (!response.ok) {
8      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
9    }
10    const data = await response.json();
11    return {
12      city: data.name,
13      temperature: data.main.temp,
14      description: data.weather[0].description,
15      humidity: data.main.humidity
16    };
17  } catch (error) {
18    console.error(`Fetch error: ${error.message}`);
19    return null;
20  }
21}