Building a Weather App on Vercel: A Step-by-Step Guide to Deployment

Building a weather app can be an exciting project, especially when you're able to deploy it on a platform like Vercel. Vercel is a popular choice for hosting web applications due to its ease of use, scalability, and performance. In this article, we'll walk you through a step-by-step guide on how to build and deploy a weather app on Vercel.

To get started, you'll need to have a basic understanding of JavaScript, React, and API integration. Our weather app will use the OpenWeatherMap API to fetch current weather data and forecasts. We'll also be using Vercel's serverless functions to handle API requests.

Setting Up the Project

First, create a new React project using Create React App by running the following command:

npx create-react-app weather-app

Next, install the required dependencies:

npm install axios

Axios is a popular library for making HTTP requests in JavaScript.

Creating the Weather API

To fetch weather data, we'll be using the OpenWeatherMap API. Sign up for a free API key on the OpenWeatherMap website.

Create a new file called `api/weather.js` and add the following code:

import axios from 'axios';

const apiKey = 'YOUR_OPENWEATHERMAP_API_KEY';

export default async function handler(req, res) {
  const { lat, lon } = req.query;
  const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&units=metric&appid=${apiKey}`);
  const data = response.data;
  res.status(200).json(data);
}

Replace `YOUR_OPENWEATHERMAP_API_KEY` with your actual API key.

Building the Weather App

Create a new file called `components/WeatherCard.js` and add the following code:

import React from 'react';

function WeatherCard({ weatherData }) {
  return (
    <div>
      <h2>{weatherData.name}</h2>
      <p>Temperature: {weatherData.main.temp}°C</p>
      <p>Humidity: {weatherData.main.humidity}%</p>
    </div>
  );
}

export default WeatherCard;

This component will display the current weather data.

Integrating the Weather API

Update the `pages/index.js` file to include the following code:

import Head from 'next/head';
import WeatherCard from '../components/WeatherCard';
import useSWR from 'swr';

function Home() {
  const { data, error } = useSWR('/api/weather?lat=37.7749&lon=-122.4194');

  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <Head>
        <title>Weather App</title>
      </Head>
      <WeatherCard weatherData={data} />
    </div>
  );
}

export default Home;

This code uses the `useSWR` hook to fetch data from our weather API.

Key Points

Create a new React project using Create React App.
Install the required dependencies, including Axios.
Set up the OpenWeatherMap API and create a new API route.
Build the weather app component and integrate the weather API.
Deploy the app on Vercel.

Deploying on Vercel

To deploy our app on Vercel, we'll need to create a new Vercel project. Run the following command:

vercel login
vercel build
vercel deploy

Follow the prompts to create a new Vercel project and deploy your app.

Deployment Status	Description
Success	The app has been successfully deployed on Vercel.
Error	An error occurred during deployment. Check the logs for more information.

💡 Make sure to update your `vercel.json` file to include the correct configuration for your app.

Conclusion

In this article, we built a weather app using React and deployed it on Vercel. We covered setting up the project, creating the weather API, building the weather app, and deploying it on Vercel.

By following these steps, you can create your own weather app and deploy it on Vercel.

What is the OpenWeatherMap API?

The OpenWeatherMap API is a popular API for fetching weather data.

How do I deploy my app on Vercel?

Run the command vercel deploy to deploy your app on Vercel.

What is serverless functions?

Serverless functions are small code snippets that run on demand without the need for server management.