Build a Node.js Interactive Web-Based Simple Weather App

Written by

javascriptdebugged

in

Ever wondered how weather apps fetch real-time data and display it in a user-friendly way? In this tutorial, we’ll dive into building a simple, yet functional, web-based weather application using Node.js. This project is perfect for beginners and intermediate developers looking to expand their skills in backend development, API integration, and front-end interaction. We’ll cover everything from setting up the project to fetching weather data from a public API and displaying it on a webpage. By the end of this guide, you’ll have a solid understanding of how to create dynamic web applications with Node.js.

Why Build a Weather App?

Building a weather app offers several learning opportunities:

  • API Integration: You’ll learn how to interact with external APIs to retrieve data.
  • Asynchronous Programming: Node.js excels at handling asynchronous operations, which are crucial for API calls.
  • Front-End Interaction: You’ll learn how to display data on a webpage and make it interactive.
  • Project-Based Learning: Building a complete project reinforces concepts and provides a tangible result.

This project is also a great starting point for more complex applications. You can expand on it by adding features like historical data, location-based services, and more sophisticated user interfaces.

Prerequisites

Before we begin, make sure you have the following installed on your system:

  • Node.js and npm (Node Package Manager): Used for running JavaScript code and managing project dependencies. You can download it from https://nodejs.org/.
  • A Text Editor or IDE: Such as Visual Studio Code, Sublime Text, or Atom.
  • Basic HTML, CSS, and JavaScript knowledge: Familiarity with these languages will be helpful for understanding the front-end part of the application.

Setting Up the Project

Let’s start by setting up our project directory and installing the necessary packages. Open your terminal or command prompt and follow these steps:

  1. Create a Project Directory: 
    mkdir weather-app
 cd weather-app
  2. Initialize npm: 
    npm init -y

    This command creates a package.json file, which will manage our project dependencies.

  3. Install Dependencies:

    We’ll use two main dependencies: express for creating our server and node-fetch for making API requests. Run the following command:

    npm install express node-fetch

Your project directory should now look something like this:

weather-app/
 ├── node_modules/
 ├── package.json
 └── package-lock.json

Creating the Server with Express

Now, let’s create our server using Express. Create a file named index.js in your project directory. This file will contain the server-side logic.

Here’s the basic structure:

// index.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello, Weather App!');
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

Let’s break down the code:

  • const express = require('express');: Imports the Express module.
  • const app = express();: Creates an Express application.
  • const port = 3000;: Defines the port number the server will listen on.
  • app.get('/', (req, res) => { ... });: Creates a route handler for the root path (/). When a user visits the root, it sends the message “Hello, Weather App!”.
  • app.listen(port, () => { ... });: Starts the server and listens for incoming requests.

To run the server, open your terminal, navigate to your project directory, and run:

node index.js

You should see “Server listening at http://localhost:3000” in your terminal. Open your web browser and go to http://localhost:3000. You should see “Hello, Weather App!”.

Fetching Weather Data from an API

Next, we’ll integrate with a weather API. For this tutorial, we’ll use the OpenWeatherMap API. You’ll need to sign up for a free API key at https://openweathermap.org/api. Once you have your API key, keep it safe; we’ll use it in our code.

Let’s modify index.js to fetch weather data. Add the following code inside the app.get('/', ...) route handler:

const fetch = require('node-fetch');

// Replace with your API key
const apiKey = 'YOUR_API_KEY';

app.get('/', async (req, res) => {
  const city = 'London'; // You can change the city here
  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

  try {
    const response = await fetch(apiUrl);
    const data = await response.json();

    // Check for errors from the API
    if (data.cod !== 200) {
      return res.status(400).send('Error fetching weather data');
    }

    // Extract relevant data
    const { main, weather, name } = data;
    const temperature = main.temp;
    const description = weather[0].description;

    res.send(`
      <h1>Weather in ${name}</h1>
      <p>Temperature: ${temperature}°C</p>
      <p>Description: ${description}</p>
    `);

  } catch (error) {
    console.error(error);
    res.status(500).send('Error fetching weather data');
  }
});

Here’s what the code does:

  • Imports node-fetch for making API requests.
  • Defines your API key.
  • Sets the city (you can modify this to test different cities).
  • Constructs the API URL.
  • Uses fetch to make a GET request to the OpenWeatherMap API.
  • Parses the response as JSON.
  • Extracts the temperature and description from the API response.
  • Sends an HTML response with the weather data.
  • Includes error handling for API errors and network issues.

Replace 'YOUR_API_KEY' with your actual API key. Restart your server (Ctrl+C to stop it, then run node index.js). Now, when you visit http://localhost:3000, you should see the weather data for London (or the city you specified).

Creating a Simple Front-End

While the current output works, it’s not very user-friendly. Let’s create a basic HTML page to display the weather information. We’ll serve this HTML from our Express server.

First, create a new folder named public in your project directory. Inside the public folder, create a file named index.html. Add the following HTML code:

<!DOCTYPE html>
<html>
<head>
  <title>Weather App</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
    }
    #weather-container {
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <div id="weather-container">
    <h1>Weather in <span id="city"></span></h1>
    <p>Temperature: <span id="temperature"></span></p>
    <p>Description: <span id="description"></span></p>
  </div>
  <script>
    // JavaScript will go here
  </script>
</body>
</html>

This HTML provides the basic structure for our weather app, including headings and placeholders for the weather data. Now, modify index.js to serve this HTML and fetch the weather data using JavaScript. Replace the existing app.get('/', ...) route handler with the following:

const fetch = require('node-fetch');
const path = require('path');

// Replace with your API key
const apiKey = 'YOUR_API_KEY';

// Serve static files from the 'public' directory
app.use(express.static('public'));

app.get('/', async (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.get('/weather', async (req, res) => {
  const city = req.query.city || 'London'; // Get city from query parameter, default to London
  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

  try {
    const response = await fetch(apiUrl);
    const data = await response.json();

    if (data.cod !== 200) {
      return res.status(400).json({ error: 'Error fetching weather data' });
    }

    const { main, weather, name } = data;
    const temperature = main.temp;
    const description = weather[0].description;

    res.json({ city: name, temperature, description });

  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Error fetching weather data' });
  }
});

Here’s what changed:

  • We import the path module, which is used to construct file paths.
  • app.use(express.static('public'));: This line serves static files (like our HTML, CSS, and JavaScript) from the public directory.
  • The root route (/) now sends the index.html file.
  • We created a new route /weather to handle the API request separately. It takes a city parameter from the query string (e.g., /weather?city=New York).
  • The /weather route fetches the weather data and returns it as JSON.

Now, let’s add JavaScript to index.html to fetch and display the weather data. Add the following JavaScript code inside the <script> tags in index.html:

async function getWeatherData(city) {
  try {
    const response = await fetch(`/weather?city=${city}`);
    const data = await response.json();

    if (data.error) {
      document.getElementById('city').textContent = 'Error';
      document.getElementById('temperature').textContent = '';
      document.getElementById('description').textContent = data.error;
      return;
    }

    document.getElementById('city').textContent = data.city;
    document.getElementById('temperature').textContent = `${data.temperature}°C`;
    document.getElementById('description').textContent = data.description;
  } catch (error) {
    console.error('Error fetching weather data:', error);
    document.getElementById('city').textContent = 'Error';
    document.getElementById('temperature').textContent = '';
    document.getElementById('description').textContent = 'Failed to fetch weather data';
  }
}

// Default city
getWeatherData('London');

This JavaScript code does the following:

  • Defines a function getWeatherData that takes a city name as input.
  • Uses fetch to make a request to the /weather endpoint, passing the city as a query parameter.
  • Parses the JSON response.
  • Updates the HTML elements with the weather data.
  • Includes error handling to display error messages if the API request fails.
  • Calls getWeatherData('London') to initially display the weather for London.

Restart your server. When you visit http://localhost:3000, you should see the weather data for London displayed in the HTML page. You can change the default city in the JavaScript code to test different locations.

Adding User Input

To make the weather app more interactive, let’s add an input field and a button so users can search for weather in different cities. Modify index.html to include an input field and a button:

<!DOCTYPE html>
<html>
<head>
  <title>Weather App</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
    }
    #weather-container {
      margin-top: 50px;
    }
    input[type="text"] {
      padding: 8px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    button {
      padding: 8px 16px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="weather-container">
    <h1>Weather in <span id="city"></span></h1>
    <p>Temperature: <span id="temperature"></span></p>
    <p>Description: <span id="description"></span></p>
  </div>
  <div>
    <input type="text" id="cityInput" placeholder="Enter city">
    <button onclick="searchWeather()">Search</button>
  </div>
  <script>
    async function getWeatherData(city) {
      try {
        const response = await fetch(`/weather?city=${city}`);
        const data = await response.json();

        if (data.error) {
          document.getElementById('city').textContent = 'Error';
          document.getElementById('temperature').textContent = '';
          document.getElementById('description').textContent = data.error;
          return;
        }

        document.getElementById('city').textContent = data.city;
        document.getElementById('temperature').textContent = `${data.temperature}°C`;
        document.getElementById('description').textContent = data.description;
      } catch (error) {
        console.error('Error fetching weather data:', error);
        document.getElementById('city').textContent = 'Error';
        document.getElementById('temperature').textContent = '';
        document.getElementById('description').textContent = 'Failed to fetch weather data';
      }
    }

    function searchWeather() {
      const city = document.getElementById('cityInput').value;
      if (city) {
        getWeatherData(city);
      }
    }
  </script>
</body>
</html>

Here’s what we added:

  • An input field with the id cityInput.
  • A button that calls the searchWeather() function when clicked.

Now, let’s add the searchWeather() function in the JavaScript part. This function will get the city name from the input field and call getWeatherData().

The updated JavaScript code in index.html is as follows:

<script>
    async function getWeatherData(city) {
      try {
        const response = await fetch(`/weather?city=${city}`);
        const data = await response.json();

        if (data.error) {
          document.getElementById('city').textContent = 'Error';
          document.getElementById('temperature').textContent = '';
          document.getElementById('description').textContent = data.error;
          return;
        }

        document.getElementById('city').textContent = data.city;
        document.getElementById('temperature').textContent = `${data.temperature}°C`;
        document.getElementById('description').textContent = data.description;
      } catch (error) {
        console.error('Error fetching weather data:', error);
        document.getElementById('city').textContent = 'Error';
        document.getElementById('temperature').textContent = '';
        document.getElementById('description').textContent = 'Failed to fetch weather data';
      }
    }

    function searchWeather() {
      const city = document.getElementById('cityInput').value;
      if (city) {
        getWeatherData(city);
      }
    }
  </script>

Now, when you visit http://localhost:3000, you can enter a city name in the input field and click the “Search” button to see the weather for that city.

Handling Common Mistakes

When working on this project, you might encounter a few common issues. Here’s how to address them:

  • API Key Errors:
    • Problem: You forgot to replace 'YOUR_API_KEY' with your actual API key, or your API key is invalid.
    • Solution: Double-check your API key and ensure it’s correctly placed in your code. Also, make sure you have an active API key from OpenWeatherMap.
  • CORS Errors (Cross-Origin Resource Sharing):
    • Problem: Your browser might block requests to the OpenWeatherMap API due to CORS restrictions. This usually happens when the API server and your application are on different domains.
    • Solution: For development, you can disable CORS restrictions in your browser (not recommended for production). Or, you can use a proxy server (like cors-anywhere) to bypass CORS. For production, the best approach is to configure your server to handle the API requests and act as a proxy.
  • Incorrect File Paths:
    • Problem: Your HTML, CSS, or JavaScript files might not be loading correctly because of incorrect file paths.
    • Solution: Double-check your file paths, especially when serving static files using express.static(). Make sure the paths in your HTML are relative to the public directory.
  • Network Errors:
    • Problem: The API request might fail due to network issues or the API server being down.
    • Solution: Check your internet connection and the OpenWeatherMap API status. Implement error handling (as we did in the code) to gracefully handle network errors and display appropriate messages to the user.
  • Typos:
    • Problem: Typos in variable names, function names, or API endpoints can cause unexpected behavior.
    • Solution: Carefully review your code for typos. Use a code editor with syntax highlighting and auto-completion to catch errors early.

Key Takeaways

  • Project Structure: We created a basic project structure with a server file (index.js) and a public directory for static files (HTML, CSS, JavaScript).
  • Express.js: We utilized Express.js to create a web server and handle HTTP requests and responses.
  • API Integration: We successfully integrated the OpenWeatherMap API to fetch weather data.
  • Asynchronous Operations: We used async/await to handle asynchronous API calls.
  • Front-End Interaction: We created a simple HTML page and used JavaScript to display the weather data.
  • User Input: We added an input field and a button to allow users to search for weather data for different cities.

FAQ

  1. Can I use a different weather API?

    Yes, you can. Just replace the API endpoint and adjust the code to parse the data from the new API’s response. Be sure to check the API’s documentation for details on how to use it and the required parameters.

  2. How can I deploy this application?

    You can deploy this application to platforms like Heroku, Netlify, or AWS. You’ll need to package your application (including all dependencies) and configure the deployment platform to run your Node.js server.

  3. How do I add styling to the app?

    You can add CSS styles to the index.html file. You can either include the CSS directly in the <style> tags or link to an external CSS file.

  4. How can I improve the user experience?

    You can add features like:

    • Location-based weather using the browser’s geolocation API.
    • More detailed weather information (e.g., wind speed, humidity).
    • A more visually appealing user interface.
    • Error handling for invalid city names.

This simple weather app serves as a building block for more complex web applications. By understanding the fundamentals of Node.js, API integration, and front-end interaction, you’re well-equipped to create more sophisticated projects. Remember to experiment, explore different APIs, and continuously improve your skills. From here, you can explore adding features like unit conversions, displaying weather forecasts, or integrating with other services. The possibilities are endless, and your journey into web development has just begun.

More posts