In this section we are going to use Serverless Framework to build our serverless app. It’s very similar to the notes app that we built using SST. With a couple of key differences:

  • We are only building the backend in Serverless Framework.
  • The backend is defined using CloudFormation in Serverless Framework. While we use AWS CDK in SST.

Demo Repo

Before we get started, here’s a link to the GitHub repo of the app that we will be building. Make sure to hang on to it for reference.

We also have the React.js frontend that connects to this —

Now let’s get started with building our app!

Install Serverless

In this chapter, we are going to set up the Serverless Framework on our local development environment.

Change indicator Install Serverless globally.

$ npm install serverless -g

The above command needs NPM, a package manager for JavaScript. Follow this if you need help installing NPM.

Change indicator In your working directory; create a project using a Node.js starter. We’ll go over some of the details of this starter project in the next chapter.

$ serverless install --url --name notes-api

Change indicator Go into the directory for our backend api project.

$ cd notes-api

Now the directory should contain a few files including, the handler.js and serverless.yml.

  • handler.js file contains actual code for the services/functions that will be deployed to AWS Lambda.
  • serverless.yml file contains the configuration on what AWS services Serverless Framework will provision and how to configure them.

We also have a tests/ directory where we can add our unit tests.

Install Node.js packages

The starter project relies on a few dependencies that are listed in the package.json.

Change indicator At the root of the project, run.

$ npm install

Change indicator Next, we’ll install a couple of other packages specifically for our backend.

$ npm install aws-sdk --save-dev
$ npm install uuid@7.0.3 --save
  • aws-sdk allows us to talk to the various AWS services.
  • uuid generates unique ids. We need this for storing things to DynamoDB.

Update Service Name

Let’s change the name of our service from the one in the starter.

Change indicator Open serverless.yml and replace the default with the following.

service: notes-api

# Create an optimized package for our functions
  individually: true

  - serverless-bundle # Package our functions with Webpack
  - serverless-offline
  - serverless-dotenv-plugin # Load .env as environment variables

  name: aws
  runtime: nodejs12.x
  stage: prod
  region: us-east-1

    handler: handler.hello
      - http:
          path: hello
          method: get

The service name is pretty important. We are calling our service the notes-api. Serverless Framework creates your stack on AWS using this as the name. This means that if you change the name and deploy your project, it will create a completely new project!

We are also defining one Lambda function called hello. It has a handler called handler.hello. It follows the format:

handler: {filename}-{export}

So in this case the handler for our hello Lambda function is the hello function that is exported in the handler.js file.

Our Lambda function also responds to an HTTP GET event with the path /hello. This will make more sense once we deploy our API.

You’ll notice the plugins that we’ve included — serverless-bundle, serverless-offline, and serverless-dotenv-plugin. The serverless-offline plugin is helpful for local development. While the serverless-dotenv-plugin will be used later to load the .env files as Lambda environment variables.

On the other hand, we use the serverless-bundle plugin to allow us to write our Lambda functions using a flavor of JavaScript that’s similar to the one we’ll be using in our frontend React app.

Let’s look at this in detail.