Developing Web Applications with Netlify Serverless Functions with MongoDB Atlas

Serverless computing has gained significant popularity in recent years due to its scalability, flexibility, and cost-effectiveness. One of the leading platforms enabling developers to create serverless applications seamlessly is Netlify. This article delves into how to develop a web application using Netlify serverless functions with a practical example of fetching movie data from MongoDB's sample_mflix dataset.

What Are Netlify Serverless Functions?

Netlify serverless functions allow you to execute backend code without managing a dedicated server. They run in response to HTTP requests and are powered by AWS Lambda. You can use serverless functions to handle tasks like API requests, form submissions, authentication, and data fetching.

Prerequisites

To follow along, ensure you have:

• Basic knowledge of JavaScript
• A Netlify account
• A MongoDB Atlas account with access to the sample_mflix dataset
• Node.js and npm installed on your system
• A code editor (e.g., WebStorm or Visual Studio Code)

Setting Up the Project

Set Up Netlify CLI: Install Netlify CLI globally if not already installed:

npm install -g netlify-cli        

Login to your Netlify account:

netlify sites:create
Site name (leave blank for a random name; you can change it later): netlify-example-web-app        

Install Dependencies: Install the required packages for MongoDB and environment variable management:

Install mongoDB

npm install mongodb        

Optional dependency:

npm install dotenv        

Advantages of using serverless functions along with a database (Ex: MongoDB)

Using serverless functions in conjunction with a database like MongoDB offers several advantages, enabling developers to build scalable, efficient, and cost-effective applications. Here are the key benefits:

1. Scalability

• Serverless Auto-Scaling: Serverless functions scale automatically with the demand. When combined with MongoDB's built-in scalability features, it ensures your application can handle traffic spikes without manual intervention.
• No Infrastructure Management: You don’t need to provision or maintain servers, making it easier to handle variable loads.

2. Cost Efficiency

• Pay-as-You-Go: Serverless functions only incur costs when executed, making them cost-effective for applications with sporadic or unpredictable usage patterns.
• MongoDB Atlas (Cloud): If you're using a managed database service like MongoDB Atlas, you pay only for the resources you use, aligning well with serverless pricing.

3. Simplified Development

• Separation of Concerns: Serverless functions can encapsulate specific tasks (e.g., CRUD operations for a MongoDB collection), leading to modular and maintainable code.
• No Boilerplate: With serverless platforms, much of the backend setup (like HTTP listeners or scaling logic) is handled automatically.
• Quick Prototyping: Developers can rapidly implement and test database-driven features without worrying about setting up a full backend infrastructure.

4. Global Accessibility

• Distributed Deployment: Serverless functions can be deployed closer to users globally. When combined with MongoDB Atlas’s multi-region clusters, this reduces latency for database operations.
• Improved User Experience: Faster response times from nearby servers create a smoother user experience.

5. Security

• Isolated Execution: Serverless functions run in isolated containers, reducing the attack surface for each request.
• Environment Variables: Securely manage sensitive database credentials using environment variables, minimizing risks.
• Built-in Authentication: MongoDB offers robust authentication and authorization (e.g., user roles, IP whitelisting), enhancing security when accessed by serverless functions.

6. Flexibility

• Database Agnostic: Serverless functions can interact with MongoDB or other databases, enabling easy switching or integration of multiple databases if needed.
• APIs for Frontend: Serverless functions act as a backend API layer, providing a clean interface for your frontend to interact with the database.

7. Event-Driven Workflows

• Triggers and Automation: Serverless functions can respond to database triggers (e.g., changes in a MongoDB collection), enabling automation workflows such as sending notifications or logging.
• Real-Time Updates: MongoDB Change Streams combined with serverless functions enable real-time features like live dashboards or collaborative tools.

8. Cross-Platform Integration

• Third-Party Services: Serverless functions can easily integrate MongoDB with other services (e.g., sending emails via AWS SES or Stripe payments).
• Microservices Architecture: They enable a lightweight microservices-based architecture where each function handles specific database-related tasks.

Load the sample data on MongoDB cluster before starting the database integration process.

MongoDB Atlas sample_mflix.movies collection screen.

Get started with Netlify CLI

Netlify’s command line interface (CLI) lets you configure continuous deployment straight from the command line. You can use Netlify CLI to run a local development server that you can share with others, run a local build and plugins, and deploy your site.

The command netlify functions:create --name get_movies is used to create a new serverless function named get_movies in a Netlify project. Here's what it does:

• netlify: This refers to the Netlify CLI, a tool for managing and deploying projects hosted on Netlify.
• functions:create: This subcommand initializes the creation of a new serverless function.
• --name get_movies: Specifies the name of the function to be created, in this case, get_movies.

Netlify dashboard:

Create an .env File: Add MongoDB configuration variables on it:

MONGODB_URI=mongodb+srv://<user_name>:<password>@mdbcluster.5hhuz.mongodb.net/?retryWrites=true&w=majority
MONGODB_DATABASE=sample_mflix
MONGODB_COLLECTION=movies        

Secure Environment Variables: Ensure the .env file is added to .gitignore:

We can configure Netlify environment variables for the project either through the Netlify CLI or via the Netlify dashboard.

netlify env:set MONGODB_URI "mongodb+srv://<user_name>:<password>@mdbcluster.5hhuz.mongodb.net/?retryWrites=true&w=majority"
netlify env:set MONGODB_DATABASE sample_mflix   
netlify env:set MONGODB_COLLECTION movies            

Update codebase on the get_movies.js file (Located at functions/get_movies)

const { MongoClient } = require("mongodb")
require('dotenv').config()

const mongoClient = new MongoClient(process.env.MONGODB_URI);
const clientPromise = mongoClient.connect();
const handler = async (event, context) => {
    try {
        const database = (await clientPromise).db(process.env.MONGODB_DATABASE);
        const collection = database.collection(process.env.MONGODB_COLLECTION);
        const results = await collection.find({}).limit(5).toArray();
        return {
            statusCode: 200,
            body: JSON.stringify(results),
        };
    } catch (error) {
        return { statusCode: 500, body: error.toString() };
    }
};

module.exports = { handler };        

Create a files, inex.html on the root directory for displaying the movies.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Netlify Web Application Deployment</title>
</head>
<body>
    <h2>Netlify Web Application Deployment</h2>
    <ul id="movies">

    </ul>
<script>
    (async ()=> {
        try {
            let results = await fetch('/.netlify/functions/get_movies').then(res => res.json());
            results.forEach(result => {
                const listItem = document.createElement('li');
                listItem.innerText = result.title;
                document.getElementById('movies').appendChild(listItem);
            });
        } catch (e) {
            console.error(e);
        }
    })();
</script>
</body>
</html>        

For testing the app, run

netlify dev         

It runs the netlify application on the local environment. We can access it on : https://localhost:8888/

Deploying the application to the Netlify platform.

Run the command on CLI:

netlify deploy        

Follow the prompts to configure your site.

Access the draft URL:

By leveraging Netlify serverless functions, you can quickly build scalable web applications without managing server infrastructure. This example showcases how to use JavaScript, Netlify, and MongoDB to fetch and display data dynamically. With these tools, you can create robust applications that are efficient, easy to maintain, and deploy.

#NetlifyFunctions

#ServerlessComputing

#WebDevelopment

#MongoDB

#JavaScript

#ServerlessApps

#CloudDevelopment

#FullStackDev

#APIDevelopment

#BackendDevelopment

#NetlifyDev

#WebApps

#MongoDBAtlas

#WebDevelopmentTips

#FrontendBackend

#DatabaseIntegration

#CodingLife

#DeveloperTools

#ModernWebDev

#BuildAndDeploy

#ScalableApps

#ProgrammingTips

#Programming

#Coding

#SoftwareDevelopment

#TechCommunity

#WebDevelopment

#CodeNewbie

#FullStackDeveloper

#DeveloperLife

#CodeChallenges

#OpenSource

#TechInnovation

#DataScience

#MachineLearning

#AIProgramming

#CloudComputing

#DevOps

#LearnToCode

#CodingLife

#TechCareers

#ProgrammingLife

#WomenInTech

#JavaScriptDeveloper

#PythonDeveloper

#CodeWithMe

#TechSkills