How to Deploy an Express.js App to Netlify: A Step-by-Step Guide

Last update: 08-09-2024

Introduction: Understanding Netlify Functions

Before we dive into the deployment process, let's discuss what Netlify Functions are and how they compare to traditional server setups.

Netlify Functions are serverless functions that allow you to run server-side code without managing a full server infrastructure. They're built on AWS Lambda and offer a way to add dynamic functionality to static sites or create lightweight APIs.

Pros of Netlify Functions:

1. Easy deployment and scaling
2. Low maintenance overhead
3. Pay-per-execution pricing model
4. Seamless integration with Netlify's other services

Cons and Limitations:

1. Cold starts can lead to slight delays in response times
2. Limited execution time (currently max 10 seconds for free tier)
3. Stateless nature requires external services for persistent data

How Netlify Functions Differ from Traditional Servers:

Unlike a "normal" server that runs continuously, Netlify Functions are event-driven and spin up on demand. This means they're great for handling sporadic traffic but may not be ideal for applications requiring long-running processes or constant background tasks.

Best Use Cases:

1. API endpoints for static sites
2. Handling form submissions
3. Serverless CRUD operations
4. Integrating with third-party services

Considerations for Full Node.js Websites:

While it's possible to host an entire Node.js website using Netlify Functions, it may not always be the best choice. Consider the following:

1. Architecture: Your app needs to be designed with a serverless architecture in mind. For example, you can't use WebSockets or maintain persistent connections.
2. Performance: For high-traffic sites, you might face issues with cold starts and execution limits.
3. Costs: Although cost-effective for low to medium traffic, high-volume requests could become expensive.
4. No built-in persistency solution: Netlify doesn't offer any built-in database, so if you need one you'll probably have to use some external tool (e.g., MongoDB Atlas, Firebase)

Prerequisites

• Node.js and npm installed on your machine
• Basic knowledge of Express.js
• A Netlify account

Step 1: Set Up Your Project

1. Create a new, empty folder for your project.
2. Open a terminal in this folder and run:

   npm init -y

3. Install the necessary dependencies:

   npm i express netlify-cli serverless-http

Step 2: Create Your Express App

1. Create a src folder in your project directory:

   mkdir src

2. Create a file named app.js inside the src folder:

   code src/app.js

   And paste in the following content:

   const express = require("express");
   const app = express();
   
   app.get("/", (req, res) => {
     res.status(200).set("Content-Type", "text/plain").send("Hello, World!");
   });
   
   const port = 3000;
   app.listen(port, () => {
     console.log(`[server]: Server is running on port ${port}`);
   });

Let's break down this code:

• We import the Express framework and create an instance of it.
• We define a route for the root path ("/") that sends a plain text response.
• We set up the server to listen on port 3000 and log a message when it starts.

3. Test your app locally:

   node src/app.js

   You should see the message "[server]: Server is running on port 3000" in your terminal. You can now visit http://localhost:3000 in your browser to see the "Hello, World!" message.

4. After testing, modify app.js to prepare it for Netlify deployment:

   const express = require("express");
   const app = express();
   
   app.get("/", (req, res) => {
     res.status(200).set("Content-Type", "text/plain").send("Hello, World!");
   });
   
   module.exports = { app };
   
   // The following lines are commented out for Netlify deployment
   // const port = 3000;
   // app.listen(port, () => {
   //   console.log(`[server]: Server is running on port ${port}`);
   // });

Here's what changed:

• We comment out the app.listen() part because Netlify will handle the server setup.
• We export the app object so it can be used by our Netlify function.

Step 3: Prepare for Serverless Deployment

1. Create a netlify/functions folder:

   mkdir -p netlify/functions

2. Create a file named index.js inside the netlify/functions folder:

   code netlify/functions/index.js

   And paste in the following content:

   const serverless = require("serverless-http");
   const { app } = require("../../src/app");
   
   module.exports.handler = serverless(app);

Step 4: Configure Netlify

1. Create a dist folder (this will be empty for now):

   mkdir dist

2. Create a netlify.toml file in your project root:

   code netlify.toml

   With the following content:

   [build]
     publish = "dist"
     functions = "netlify/functions"
   [functions]
     external_node_modules = ["express"]
   [[redirects]]
     force = true
     status = 200
     from = "/*"
     to = "/.netlify/functions/index"

Let's break down this TOML file:

• [build]: Specifies build settings.
  • publish: Tells Netlify which directory to publish (in this case, our empty dist folder).
  • functions: Specifies where our serverless functions are located.
• [functions]: Configuration for serverless functions.
  • external_node_modules: Lists Node modules that should be included with the function.
• [[redirects]]: Sets up a redirect rule.
  • This rule sends all requests to our serverless function, allowing it to handle routing.

Step 5: Deploy to Netlify

1. Log in to your Netlify account:

   npx netlify login

   This will open a browser window. Click "Authorize" to complete the login process.

2. Deploy your app:

   npx netlify deploy --prod

3. The following message will be displayed:

   This folder isn't linked to a site yet ? What would you like to do? (Use arrow keys)

   To create a new Netlify website, highlight and choose the second option:

   Create & configure a new site

Congratulations! Your Express.js app is now deployed as a serverless function on Netlify. You can access it using the URL provided by Netlify after the deployment is complete.

Conclusion

Netlify Functions are not a panacea for all server-side needs. If your goal is to host a simple Node.js (or Express.js) app, there are many excellent alternatives available. Platforms such as Render, Fly.io, and Railway offer robust solutions, and they all include generous free tiers that might better suit your specific requirements.

However, Netlify Functions shine as an excellent option, particularly if you're already leveraging Netlify's JAMstack tools in your development ecosystem. Once you've established the process of deploying your Express app as a function, subsequent updates become remarkably straightforward.

The key advantage of this approach lies in offloading server-side maintenance, security concerns, and update management. This significantly reduces the operational burden on developers, allowing you to focus more on your application's core functionality. As such, Netlify Functions represent a powerful tool that should definitely be in your development toolkit, ready to be employed when the right project comes along.