A countdown timer is a simple way to measure the time until an event happens. It counts down that time in reverse – like 5, 4, 3, 2, 1. It helps you manage the time leading up to upcoming events, product launches, or offers, and allows you to inform users about that timeline.

Table of Contents

• 1. Set Up Your React App

• 2. Create the Count Down Component

• 3. Implement Time State Management and Functionality

• 4. Create a Countdown Form

• 5. Handle the Countdown Start, Stop, and Reset Functionality

• 6. Format the Event Date and Time

• 7. Display the CountDown Timer

• 8. Styling the Countdown Timer Component

• Conclusion

Prerequisites

You should have decent knowledge of HTML, CSS, and JavaScript to get the most out of this article.

Let's get started.

1. Set Up Your React App

First, you’ll need to create a React application if you don’t already have one ready to use. In this tutorial, I’m using Vite. Then change into the new project directory by running the following commands in your code editor:

npm create vite countdown-timer

cd countdown-timer

Run this command to start the app on the local server:

npm run dev

Now, you should see the project in your browser on https://localhost/3000.

2. Create the Count Down Component

In the src folder of your React app, create a components directory, and inside it, create a CountDown.jsx file.

/* components/CountDown.jsx */

import React from "react";

const CountdownTImer = () => {

  return (
    <div className="countdown-timer-container">
    </div>
  );
};

export default CountdownTimer;

3. Implement Time State Management and Functionality

Define the state variables using the useState hook. Update the CountDown.jsx file with the following code:

/* components/CountDown.jsx */

import React, { useState, useEffect } from "react";

const CountdownTimer = () => {
  const [eventName, setEventName] = useState("");
  const [eventDate, setEventDate] = useState("");
  const [countdownStarted, setCountdownStarted] = useState(false);
  const [timeRemaining, setTimeRemaining] = useState(0);

 return (
    <div className="countdown-timer-container">
    </div>
  );
};

export default CountdownTimer;

Here's a brief breakdown of the useState:

• eventName: stores the name of the event for the countdown timer.

• eventDate: stores the date of the event for the countdown timer.

• countdownStarted: tracks whether the countdown timer has started.

• timeRemaining: stores the remaining time in milliseconds for the countdown.

Now, we’ll implement the functionality of the countdown timer using the useEffect hook:

/* components/CountDown.jsx */

import React, { useState, useEffect } from "react";

const CountdownTimer = () => {

    // ...

  useEffect(() => {
    if (countdownStarted && eventDate) {
      const countdownInterval = setInterval(() => {
        const currentTime = new Date().getTime();
        const eventTime = new Date(eventDate).getTime();
        let remainingTime = eventTime - currentTime;

        if (remainingTime <= 0) {
          remainingTime = 0;
          clearInterval(countdownInterval);
          alert("Countdown complete!");
        }

        setTimeRemaining(remainingTime);
      }, 1000);

      return () => clearInterval(countdownInterval);
    }
  }, [countdownStarted, eventDate, timeRemaining]);

 return (
    <div className="countdown-timer-container">
    </div>
  );
};

export default CountdownTimer;

The useEffect hook runs whenever countdownStarted or eventDate changes. It sets up an interval that updates timeRemaining every second based on the current time and event time. If the remaining time becomes less than or equal to 0, it stops the interval and triggers the notification "Countdown complete!"

/* components/CountDown.jsx */

import React, { useState, useEffect } from "react";

const CountdownTimer = () => {

  // ...

  useEffect(() => {
    if (countdownStarted) {
      document.title = eventName;
    }
  }, [countdownStarted, eventName]);

 return (
    <div className="countdown-timer-container">
    </div>
  );
};

export default CountdownTimer;

Here, the useEffect hook runs whenever countdownStarted or eventName changes. It updates the countdown timer title to display the eventName when the countdown timer is started.

4. Create a Countdown Form

To have control over the countdown timer, you’ll need to create a form with two inputs for the name and date of the event. Then, add the following code:

/* components/CountDown.jsx */

import React from "react";

 // ...

   const handleSetCountdown = () => {
    setCountdownStarted(true);
  };

 return (
 <div className="countdown-timer-container">
      <h2 className="countdown-name">
        {countdownStarted ? eventName : "Countdown Timer"}
      </h2>

      {!countdownStarted ? (
        <form className="countdown-form">
          <label htmlFor="title">Event Name</label>
          <input
            name="title"
            type="text"
            placeholder="Enter event name"
            value={eventName}
            onChange={(e) => setEventName(e.target.value)}
          />

          <label htmlFor="date-picker">Event Date</label>
          <input
            name="date-picker"
            type="date"
            value={eventDate}
            onChange={(e) => setEventDate(e.target.value)}
            onClick={(e) => (e.target.type = "date")}
          />
          <button onClick={handleSetCountdown}>Start Countdown</button>
        </form>
      }
    </div>
  );
};

export default CountdownTimer;

Here's a brief breakdown of the useState:

• eventName: stores the name of the event for the countdown timer.

• countdown-name: displays the "Countdown Timer" by default or updates to the eventName entered once the countdown has started.

The form includes:

• The input field with the name title and label Event Name update the eventName state value.

• The input field with the name date-picker allow users to select a date and control the eventDate state value.

• The button Start Countdown triggers the handleSetCountdown function when clicked to initiate the countdown.

5. Handle the Countdown Start, Stop, and Reset Functionality

Next, update the handleSetCountdown function to store the event name and date in the local storage using localStorage.setItem. localStorage is a web API that enables users to store data as key-value pairs persistently, even when the browser is closed or refreshed.

The code is as follows:

/* components/CountDown.jsx */

import React from "react";

 // ...

    const handleSetCountdown = () => {
    setCountdownStarted(true);
    localStorage.setItem("eventDate", eventDate);
    localStorage.setItem("eventName", eventName);
  };

 return (
 <div className="countdown-timer-container">
       // ...
 </div>
  );
};

export default CountdownTimer;

Now, create the handleStopCountdown and handleResetCountdown functions to stop the countdown timer by updating the countdownStarted state to false.

/* components/CountDown.jsx */

import React from "react";

 // ...

  const handleStopCountdown = () => {
    setCountdownStarted(false);
    setTimeRemaining(0);
  };

  const handleResetCountdown = () => {
    setCountdownStarted(false);
    setEventDate("");
    setEventName("");
    setTimeRemaining(0);
    localStorage.removeItem("eventDate");
    localStorage.removeItem("eventName");
  };

 return (
 <div className="countdown-timer-container">
       // ...
       <div className="control-buttons">
            <button onClick={handleStopCountdown}>Stop</button>
            <button onClick={handleResetCountdown}>Reset</button>
        </div>
 </div>
  );
};

export default CountdownTimer;

Here:

• handleStopCountdown: resets the timeRemaining state to zero.

• handleResetCountdown: resets the countdown timer to its initial state. It clears the remaining time states and removes the event date and event name from local storage using localStorage.removeItem().

6. Format the Event Date and Time

Let's convert date and time data into a readable format.

/* components/CountDown.jsx */

import React from "react";

 // ...

  const formatDate = (date) => {
    const options = { month: "long", day: "numeric", year: "numeric" };
    return new Date(date).toLocaleDateString("en-US", options);
  };

  const formatTime = (time) => {
    const seconds = Math.floor((time / 1000) % 60);
    const minutes = Math.floor((time / (1000 * 60)) % 60);
    const hours = Math.floor((time / (1000 * 60 * 60)) % 24);
    const days = Math.floor(time / (1000 * 60 * 60 * 24));

    return (
      <div className="countdown-display">
        <div className="countdown-value">
          {days.toString().padStart(2, "0")} <span>days</span>
        </div>
        <div className="countdown-value">
          {hours.toString().padStart(2, "0")} <span> hours</span>
        </div>
        <div className="countdown-value">
          {minutes.toString().padStart(2, "0")} <span>minutes</span>
        </div>
        <div className="countdown-value">
          {seconds.toString().padStart(2, "0")} <span>seconds</span>
        </div>
      </div>
    );
  };

 return (
 <div className="countdown-timer-container">
       // ...
 </div>
  );
};

export default CountdownTimer;

Here's a brief breakdown of the functions:

• formatDate: formats the date input into a human-readable date string.

• formatTime: takes a time in milliseconds as input and calculates the days, hours, minutes, and seconds of the timer. The .toString().padStart(2, "0") returns the formatted time as two characters by appending 0 at the beginning of the time only if the length of the number is less than 2.

Here are the complete contents of the CountDown.jsx file:

 /* components/CountDown.jsx */

import React, { useState, useEffect } from "react";

const CountdownTimer = () => {
  const [eventName, setEventName] = useState("");
  const [eventDate, setEventDate] = useState("");
  const [countdownStarted, setCountdownStarted] = useState(false);
  const [timeRemaining, setTimeRemaining] = useState(0);

  useEffect(() => {
    if (countdownStarted && eventDate) {
      const countdownInterval = setInterval(() => {
        const currentTime = new Date().getTime();
        const eventTime = new Date(eventDate).getTime();
        let remainingTime = eventTime - currentTime;

        if (remainingTime <= 0) {
          remainingTime = 0;
          clearInterval(countdownInterval);
          alert("Countdown complete!");
        }

        setTimeRemaining(remainingTime);
      }, 1000);

      return () => clearInterval(countdownInterval);
    }
  }, [countdownStarted, eventDate, timeRemaining]);

  useEffect(() => {
    if (countdownStarted) {
      document.title = eventName;
    }
  }, [countdownStarted, eventName]);

  const handleSetCountdown = () => {
    setCountdownStarted(true);
    localStorage.setItem("eventDate", eventDate);
    localStorage.setItem("eventName", eventName);
  };

  const handleStopCountdown = () => {
    setCountdownStarted(false);
    setTimeRemaining(0);
  };

  const handleResetCountdown = () => {
    setCountdownStarted(false);
    setEventDate("");
    setEventName("");
    setTimeRemaining(0);
    localStorage.removeItem("eventDate");
    localStorage.removeItem("eventName");
  };

  const formatDate = (date) => {
    const options = { month: "long", day: "numeric", year: "numeric" };
    return new Date(date).toLocaleDateString("en-US", options);
  };

  const formatTime = (time) => {
    const seconds = Math.floor((time / 1000) % 60);
    const minutes = Math.floor((time / (1000 * 60)) % 60);
    const hours = Math.floor((time / (1000 * 60 * 60)) % 24);
    const days = Math.floor(time / (1000 * 60 * 60 * 24));

    return (
      <div className="countdown-display">
        <div className="countdown-value">
          {days.toString().padStart(2, "0")} <span>days</span>
        </div>
        <div className="countdown-value">
          {hours.toString().padStart(2, "0")} <span> hours</span>
        </div>
        <div className="countdown-value">
          {minutes.toString().padStart(2, "0")} <span>minutes</span>
        </div>
        <div className="countdown-value">
          {seconds.toString().padStart(2, "0")} <span>seconds</span>
        </div>
      </div>
    );
  };

  return (
    <div className="countdown-timer-container">
      <h2 className="countdown-name">
        {countdownStarted ? eventName : "Countdown Timer"}
      </h2>
      <p className="countdown-date">
        {countdownStarted && formatDate(eventDate)}
      </p>

      {!countdownStarted ? (
        <form className="countdown-form">
          <label htmlFor="title">Event Name</label>
          <input
            name="title"
            type="text"
            placeholder="Enter event name"
            value={eventName}
            onChange={(e) => setEventName(e.target.value)}
          />

          <label htmlFor="date-picker">Event Date</label>
          <input
            name="date-picker"
            type="date"
            value={eventDate}
            onChange={(e) => setEventDate(e.target.value)}
            onClick={(e) => (e.target.type = "date")}
          />
          <button onClick={handleSetCountdown}>Start Countdown</button>
        </form>
      ) : (
        <>
          {formatTime(timeRemaining)}
          <div className="control-buttons">
            <button onClick={handleStopCountdown}>Stop</button>
            <button onClick={handleResetCountdown}>Reset</button>
          </div>
        </>
      )}
    </div>
  );
};

export default CountdownTimer;

7. Display the CountDown Timer

Import CountDownTimer in the App.jsx, replacing the default code with this:

 /* App.jsx */

import React from "react";
import CountdownTimer from "./components/CountDown";

function App() {
  return (
    <div className="App">
      <CountdownTimer />
    </div>
  );
}

export default App;

And that's it! Your countdown timer app should be rendered on localhost:3000 in the browser.

8. Styling the Countdown Timer Component

Lastly, update the index.css file in the same directory of your project by adding the following styles:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Open+Sans:wght@400;500;700&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: url("./img/bg-img.jpg") top center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1rem;
}

.countdown-form {
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

input {
  background-color: #d1f1ee;
  border: 1px solid #dfdfdf;
  border-radius: 6px;
  outline: none;
  margin-bottom: 1rem;
  padding: 0.75rem;
  width: 100%;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

input:focus {
  border-color: #038a7f;
}

button {
  background-color: #038a7f;
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  outline: none;
  margin-top: 1rem;
  text-transform: uppercase;
  width: 100%;
  height: 2.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: #005a53;
}

.countdown-message {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  margin: 1rem 0;
}

.countdown-name {
  color: #fff;
  font-size: clamp(1.5rem, 5vw, 2rem);
  margin-bottom: 1rem;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.countdown-date {
  color: #eafbfa;
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: clamp(1rem, 3vw, 1.25rem);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.countdown-display {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 1rem;
  justify-content: center;
  padding: 0.5rem;
  max-width: 600px;
  margin: 0 auto;
}

.countdown-value {
  background-color: #2f5d6f;
  border-radius: 50%;
  color: #03d5c0;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 700;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.countdown-value:hover {
  transform: scale(1.05);
}

.countdown-value > span {
  color: #fff;
  font-size: clamp(0.75rem, 2vw, 0.875rem);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 0.2rem;
  font-weight: 500;
}

.control-buttons {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.control-buttons > button {
  background-color: #03b4a2;
  border-radius: 50%;
  width: clamp(45px, 8vw, 50px);
  height: clamp(45px, 8vw, 50px);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.65rem, 2vw, 0.775rem);
}

.control-buttons button:hover {
  background-color: #0b7c71;
  transform: scale(1.1);
}

@media (max-width: 480px) {
  .countdown-display {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .countdown-value {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
  }

  .countdown-value > span {
    font-size: 0.75rem;
  }

  .control-buttons {
    margin-top: 1.5rem;
  }
}

@media (max-width: 360px) {
  body {
    padding: 0.75rem;
  }

  .countdown-form {
    padding: 1rem;
  }

  .countdown-name {
    font-size: 1.25rem;
  }

  .countdown-date {
    font-size: 1rem;
  }

  .control-buttons > button {
    width: 40px;
    height: 40px;
  }
}

Congratulations, you’ve finished building your Countdown timer app!

Conclusion

In this article, you've learned how to build a basic React countdown timer app and how to work with the browser's local storage.

The code implemented in this article is accessible in this GitHub repository. To learn more about web development and technology, check out my blog or connect with me on X(Twitter) and LinkedIn.

Thank you for reading.

You can use Netlify to host websites, and it helps you update and release new changes. It also provides additional features such as security, user authentication and authorization services, and more.

This guide focuses on showing you how to set up a Netlify serverless function to hide Application Programming Interface (API) keys in a client-side application.

For this lesson, you will create a stock photo search engine web application, deploy it on Netlify, and make an API call to the Pixabay API using Netlify serverless functions.

This is the same process for front-end applications built with ReactJS, NextJS, VueJS, Angular, or other JavaScript frameworks.

Prerequisites

To follow along with this tutorial, you should have the following:

• Netlify account (you can sign up here)

• Basic understanding of RESTful APIs, Lambda functions, and async/await concepts.

The final demo app lives in the main branch on GitHub: https://netlify-func-demo.netlify.app

What is a Netlify function?

Netlify functions are serverless or lambda functions provided by Netlify. You use them to deploy server-side code or backend logic without the need for a dedicated server.

The purpose of this Netlify function is to manage serverless event-driven code and send HTTP requests that return a JSON response.

"Serverless functions, branded as Netlify Functions when running on Netlify, are a way to deploy server-side code as API endpoints" - Netlify Docs

It securely accesses environment variables behind the scenes via the Amazon Web Services (AWS) lambda function.

Secret credentials such as access tokens or API keys, hidden solely using environment variables, are less secure. This is because they can be easily retrieved from the Developer Tools through the API fetch request in the browser.

The API keys, if hijacked, can be misused by malicious actors, which might affect your app build threshold or cost you more if it's a paid API service.

Other serverless functions used for running code without having to manage servers include AWS Lambda functions, Azure functions, and Google cloud functions.

How to Set Up a Client-side Application

How to Clone the Demo App

To get started with this tutorial, you can clone the stock photo search engine app GitHub repository. See the live preview on Netlify at https://netlify-func-demo.netlify.app.

The first step is to clone the repository:

git clone https://github.com/frankiefab100/netlify-serverless-functions-demo.git

Next, change to the netlify-serverless-functions-demo directory.

 cd netlify-serverless-functions-demo

Then you'll need to install dependencies.

npm install
#OR 
yarn add

Now run the development server. Run the following command to start the app on the server:

netlify dev

The app will be ready on https://localhost:8888.

Alternatively, you can skip the above steps if you wish to follow along by building the app from scratch. In the next step, you will build a stock photo search engine JavaScript application.

How to Build the Demo App using JavaScript

The first step is to set up a front-end app. Open your favorite code editor, such as VS Code.

Then, create a dist directory and inside it create an index.html file. Populate it with the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Stock Photos Search Engine</title>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>Search For Stock Photos</h1>
        <div class="search-section">
          <input
            type="text"
            name="search"
            class="search"
            placeholder="Enter a keyword"
          />
          <input
            id="searchBtn"
            class="search-btn"
            type="submit"
            value="Search"
          />
        </div>
      </header>

      <div class="photo-wrapper">
        <img src="" alt="" class="photo" />
      </div>
    </div>

    <script src="./script.js" type="module"></script>
  </body>
</html>

In the same dist directory, add the following styling to style.css:

/* dist/style.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  color: #222;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  min-width: 100vw;
  width: 100%;
  height: 100%;
}

h1 {
  padding-bottom: 20px;
}

.search-section {
  display: inline;
  text-align: center;
  min-width: 310px;
}

.search,
.search-btn {
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  padding: 15px;
  height: 50px;
}

.search {
  background-color: #d1f3bf;
  color: #222;
  min-width: 225px;
}

.search-btn {
  background-color: #04ab04;
  color: #f6f6f6;
  cursor: pointer;
  margin-left: 5px;
  min-width: 80px;
  transition: all 0.3s ease-in-out;
}

.search-btn:hover {
  background-color: #2dc22d;
}

.photo-wrapper {
  display: flex;
  gap: 15px;
  margin: 30px;
}

.photo-wrapper img {
  width: 200px;
}

Sign Up for a Free Account on Pixabay

The first step to using the Pixabay API is to sign up for an account with your email.

Pixabay API key section

As shown in the image above, your API key can be found below the parameters section in the Pixabay API Docs website.

Create an environment variable

Environment variables (commonly known as "env") are combinations of key/value pairs that can affect the behavior and processes of an operating system or application.

Using environment variables is recommended to configure third-party services and their credentials during development.

Install dotenv

Once you complete the account creation on Pixabay, open your terminal and install dotenv as a package. This will enable your app to read environment variables saved in the .env file.

npm install dotenv
#OR
yarn add -D dotenv

In the next step, you will save the API key in a .env file.

Create the .env file

In the root directory of your app, create a .env file and store the API keys copied from your Pixabay Profile.

PIXABAY_API_KEY=123456-7890

Where PIXABAY_API_KEY=123456-7890 represents the API key value.

Note: Replace this key/value pair with the appropriate value.

Create a .gitignore file

To avoid committing sensitive files and values such as node_modules and secret keys to a public repository, create a .gitignore file in the same project root directory and add the following to it:

node_modules
.env
.netlify

The .netlify folder which contains compiled serverless functions together with other files listed will be excluded when the project is pushed to GitHub or any other version control system.

Create a get request function

Now, you should add the fetch request logic in the script.js. You will adjust the API logic later using Netlify functions.

/* dist/script.js */
const dotenv = require("dotenv").config();

const searchbar = document.querySelector(".search");
const submitBtn = document.querySelector(".search-btn");
const photoWrapper = document.querySelector(".photo-wrapper");

submitBtn.addEventListener("click", () => {
  getPhoto(searchbar.value);
  searchbar.value = "";
});

window.addEventListener("keydown", (e) => {
  if (e.keyCode === 13) {
    getPhoto(searchbar.value);
    searchbar.value = "";
  }
});

async function getPhoto(keyword) {
  const apiKey = PIXABAY_API_KEY;
  let apiURL = `https://pixabay.com/api/?key=${apiKey}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`;

  try {
    const response = await fetch(apiURL, {
      method: "GET",
      headers: { accept: "application/json" },
    });
    const data = await response.json();

    let imageURL = data.hits;

    imageURL.forEach((result) => {
      let imageElement = document.createElement("img");
      imageElement.setAttribute("src", `${result.webformatURL}`);
      photoWrapper.appendChild(imageElement);
    });
  } catch (error) {
    alert(error);
  }
}

Note: As mentioned earlier, if the codebase of this app is published on GitHub. The API key will still be accessible from the client side on a browser, although the .env file that contains the secret key was excluded.

To illustrate this, select the testing branch of this app repository. The Live site preview will display the following Reference Errors in your browser console:

Uncaught ReferenceError: require is not defined
Uncaught ReferenceError: require is not defined at getPhotos
Uncaught ReferenceError: process is not defined at getPhotos

This is because there is no way to reference the environment variables specified in the .env file, since they weren't committed to the public repository on GitHub.

In the next step, select and clone the [testing](https://github.com/frankiefab100/netlify-serverless-functions-demo/tree/testing) branch on your local machine with the following commands:

git clone https://github.com/frankiefab100/netlify-serverless-functions-demo.git
cd netlify-serveless-functions-demo
npm install
netlify dev

The app should launch on your browser via localhost:8888.

Now, go to the Developer tools, right-click and select Inspect. Alternatively, press the F12 key. Then, navigate to Network tab and tab on the getPhotos.js request URL.

API key displayed in the Network tab in Developer tools

You should see the API key publicly exposed in the Network tab's Headers section and return as a response data in your browser.

This is a security issue since the Network tab in the Developer tools is typically responsible to display informations such as the request URL, response status, and response data.

API key returned as a response data and exposed in the URL of the request

In the next section, you will find a way to secure the API key using Netlify functions.

How to Get Started with Netlify Functions

First, you'll need to go into your terminal and install Netlify CLI and Lambda as Devdependencies. You can do that by running this command:

npm install -g netlify-cli netlify-lambda
#OR 
yarn add -D netlify-cli netlify-lambda --save-dev

Add custom build and development commands in package.json

These commands build and start the app in the server and also launch the app on your web browser. Here's an example of how you might add these script commands in the package.json file:

"scripts": {
   "build": "npm run-script",
   "dev": "netlify dev"
 }

Install Axios

You will use the axios.get method, because it is a node function unlike the fetch method that is intended for browser runtime.

To install Axios, open your terminal and enter the command:

npm install axios
#OR
yarn add -D axios

In this case, you are working with a vanilla JavaScript app, so you should import Axios in the getPhotos.js file as:

const axios = require("axios");

For JavaScript libraries, like React, import it as follows:

import axios from "axios";

Create a serverless function

In the root of the project, create a folder named netlify,and inside it create another folder functions. In this functions directory, create a file named getPhotos.js.

You will create a serverless function in the getPhotos. This will completely hide the API keys while fetching images from the Pixabay API.

//netlify/functions/getPhotos.js 
require("dotenv").config();

const axios = require("axios");

exports.handler = async (event, context) => {
  try {
    const { keyword } = event.queryStringParameters;
    let response = await axios.get(
      `https://pixabay.com/api/?key=${process.env.PIXABAY_API_KEY}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`,
      {
        headers: { Accept: "application/json", "Accept-Encoding": "identity" },
        params: { trophies: true },
      }
    );

    let imageURL = response.data.hits;

    return {
      statusCode: 200,
      body: JSON.stringify({ imageURL }),
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error }),
    };
  }
};

Here, the process.env.PIXABAY_API_KEY references API key environment configuration specified in the .env file for development mode.

The keyword parameter accepts a string accessible in the queryStringParameters property and returns a response data stored in the variable imageURL. This will get passed to the script.js as request response (we'll discuss this later).

If the GET request is successful, it returns a response of statusCode 200 with the corresponding response as a JSON object. For errors, we will get an alert with the error message and status code.

Due to changes in version, Axios might return Buffer as a response in your terminal window, that looks like this:

Buffer response from Axios in Terminal

To prevent this, you should attach the following to the GET request:

 let response = await axios.get(
      `https://pixabay.com/api/?key=${process.env.PIXABAY_API_KEY}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`,
      {
        headers: { Accept: "application/json", "Accept-Encoding": "identity" },
        params: { trophies: true },
      }
    );

Create a Netlify configuration file

In the project root directory, create a netlify.toml file. This file specifies how Netlify builds and deploys your app.

Now, add the following build configurations in netlify.toml:

[build]
  command = "npm run build"
  functions = "netlify/functions"
  publish = "dist"

Note:

• command = "npm run build" triggers the Netlify CLI to build the app from the functions.

• functions = "netlify/functions" indicates that the getPhotos functions exist in the netlify/functions directory.

• publish = "dist" identifies dist as the directory where the file will be served from.

Update the script.js file with the Netlify functions request URL

Next, update the apiURL from this:

let apiURL = `https://pixabay.com/api/?key=${apiKey}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`;

to the functions HTTP request endpoint:

  let apiURL = `/.netlify/functions/getPhotos?keyword=${keyword}`;

This serverless function will get queried to the client-side of your app through the endpoint: /.netlify/functions/getPhotos. Once a fetch request is sent, the getphotos function will be invoked and accessed in the script.js.

The getPhotos Netlify functions' response imageURL will be passed and the data accessed as the value of the keyword parameter in the query string of function. It will get loop through to return three images from the Pixabay API to the client-side.

The script.js file should look like this:

/* dist/script.js */
const searchbar = document.querySelector(".search");
const submitBtn = document.querySelector(".search-btn");
const photoWrapper = document.querySelector(".photo-wrapper");

submitBtn.addEventListener("click", () => {
  getPhoto(searchbar.value);
  searchbar.value = "";
  photoWrapper.innerHTML = "";
});

window.addEventListener("keydown", (e) => {
  if (e.keyCode === 13) {
    getPhoto(searchbar.value);
    searchbar.value = "";
    photoWrapper.innerHTML = "";
  }
});

async function getPhoto(keyword) {
  let apiURL = `/.netlify/functions/getPhotos?keyword=${keyword}`;

  try {
    const response = await fetch(apiURL, {
      method: "GET",
      headers: { accept: "application/json" },
    });
    const data = await response.json();

    for (let i = 0; i < data.imageURL.length; i++) {
      let imageElement = document.createElement("img");
      imageElement.setAttribute("src", `${data.imageURL[i].webformatURL}`);
      photoWrapper.appendChild(imageElement);
    }
  } catch (error) {
    alert(error);
  }
}

Note: From the codebase above, your environment variable is secure since it is accessed from the serverless function.

Run the development server

Now, execute your app by running the command:

netlify dev

This will load the getPhotos function via https://localhost:8888/.netlify/functions/getPhotos.

netlify build terminal output

Then, start the development server and launch the application in your default web browser on localhost:8888.

netlify function ready on https://localhost:8888

At this point, the Netlify function is fully setup, and you can now proceed to make GET HTTP requests.

How to Send Fetch Requests

Now that you already have the web app served, go ahead and send a fetch request. Enter some text in the search input field and hit Enter or click the button to fetch images from the Pixabay API.

flower images fetched from Pixabay API

For more information about the Pixabay API, see the Pixabay documentation.

The preceding command will send a request to the serverless function and then return six responses. Here's what the response looks like in your terminal windows:

Request from ::1: GET /.netlify/functions/getPhotos?keyword=flower
Response with status 200 in 4895 ms.

You can also use Developer tools through the Network tab to validate the request.

serverless function API response data

The fetch request returns our app URL, the getPhotos Netlify function, script.js and the images from Pixabay.

Netlify function fetch response from Network tab's header section in the browser

How to Host the App on the Remote Repository

Now, you should push your project to GitHub version control.

git add .
git commit -m"initial commit"
git push origin -u main

How to Deploy the App and Serverless Function on Netlify

Once you have published the project on GitHub, log in to Netlify and connect your GitHub account by granting authorization.

Import project for deployment on Netlify

As shown in the image above, click the Add A New Project and then search for the app repository from the list. Next, click on Build Your Site. This will take a few minutes to complete.

You just deployed the app from the Netlify UI. Your app is now ready at: https://netlify-func-demo.netlify.app..

The fetch request URL should look like this: https://netlify-func-demo.netlify.app/.netlify/functions/getPhotos.

Optional - How to Configure the Netlify App from the Dashboard

Alternatively, you can configure the Netlify command from the Netlify Dashboard. If these settings are already specified in netlify.toml, it will override any corresponding configuration.

First, select the project directory's Site settings.

Site settings for project directory on Netlify

Set the Build command and Publish directory

Navigate to Site settings > Deploy > Build & deploy and edit the following commands and then save the changes:

• Build command: npm run build

• Publish directory: dist

Build and deploy section on Netlify

Set the Functions directory

By default, Netlify uses netlify/functions as the directory to find the functions to deploy them. In our case, our serverless function getPhotos can be found in the netlify/functions directory.

Now we'll set a custom functions directory so Netlify can find your compiled functions. Go to Site settings > Functions and enter the directory path where the functions are stored in your repository.

Functions directory section on Netlify

How to Set Environment Variables for Production

In the Netlify Dashboard, click on Site settings > Build & deploy > Environment > Environment variables and then configure KEY/VALUE pairs as follows:

PIXABAY_API_KEY=your-api-key-here

Environment variables section on Netlify

Click on Save, and then redeploy your app so the changes can be added.

To redeploy the app on Netlify, navigate to Deploys > Trigger deploy. Next, select Clear cache and redeploy site.

Trigger redeployment tab on Netlify

Note: The environment variable (PIXABAY_API_KEY) name should match the one mentioned in the getPhotos codebase.

For a React application, prepend the API environment variable with the prefix REACT_APP so they can be read from the .env file.

 REACT_APP_PIXABAY_API_KEY=your-api-key-here

How to Initialize the Serverless Function to the Remote App

To connect your project directory to the existing web app deployed on Netlify, login to your Netlify account from the terminal:

netlify login

Next, initialize the app on Netlify by running the command in your terminal:

netlify init

Your app is now configured for continuous deployment via Netlify.

How to Build the Netlify Serverless Function

You need to link your app to site ID on Netlify before running the build command on your terminal. To connect your local project folder to its site ID on Netlify, enter the command in your terminal:

netlify link

This will prompt you to link the folder to a site through any of the following options:

• Search by full or partial site name

• Choose from a list of your recently updated sites

• Enter a site ID

Once you select your preferred option, it will connect the project folder to the hosted site on Netlify. This allows you run Netlify CLI commands and also automatically deploy the project repository once there are any changes in the codebase.

In the next step, you will build a serverless function while it is running on the server. To activate the build command defined in netlify.toml file, run the following command:

netlify build

This runs the npm run-script command under the hood as specified in the package.json. Now, your serverless function in netlify/functions directory is packaged and bundled successfully!

How to Test the Application

To test and confirm that the Netlify function is working fine, run this command on your terminal:

netlify functions:serve

This injects your project environment variables from the .env file and runs the serverless function.

How to Confirm API Keys Security

To inspect your app and confirm that the API keys are hidden from the public, follow the steps below:

Click on your hosted app URL, and navigate to Developer tools by pressing the F12 key or right-clicking and selecting Inspect. Navigate to Network tab, where you should see the fetched data from the Pixabay API.

API key hidden from the public and unauthorized parties after inspection through the Developer tools

Now you've confirmed that you've successfully configured a serverless function and have it deployed on Netlify.

Conclusion

This tutorial introduced serverless functions, asynchronous JavaScript, and Restful API concepts.

Hopefully you now know how to create a serverless/lambda function and secure any sensitive value such as API keys in your frontend JavaScript application.

If you got stuck with anything, you can access the complete source code in this GitHub repository.

Thank you for reading! If you have any questions, feel free to reach out to me via Twitter.

Relevant Links

• Netlify Functions

• Netlify Intro to Serverless Functions

• Netlify Functions Example