Building AWS Serverless applications with NX Dev Tools on a monorepo

Hiep Dinh
Hiep Dinh
Nov 19, 2019 · 4 min read

A monorepo can be described as a repository that contains more than one logical project. These projects can be unrelated, loosely coupled or connected by dependency management tools, they are usually large in size, branches, commits, and working developers.

Serverless computing such as AWS Serverless offers a number of advantages over traditional cloud-based or server-centric infrastructure. For many developers, serverless architectures offer greater scalability, more flexibility, and quicker time to release, all at a reduced cost. With serverless architectures, developers do not need to worry about purchasing, provisioning, and managing backend servers.

This article will guide how to build AWS Serverless Application using Nx Dev Tool Extension and Serverless Framework.

Creating Workspace and Library with Nx

Run this command to create a workspace.

npm init nx-workspace myworkspace

In this example, I use the empty workspace and Angular CLI (If you use VSCode, you can use Angular Console plugin to generate apps, libs,…).

With an empty Nx workspace, there are no applications to build, serve, and test. Command adds node application capabilities to the workspace.

cd myworkspace && npm install --save-dev @nrwl/node

After the capability is added, I create two applications.

ng g @nrwl/node:application hello-app ng g @nrwl/node:application greeting-app

And a library.

ng g @nrwl/workspace:lib common-util

Applying the Serverless framework to the workspace

To build AWS Serverless Application with Serverless Framework, the application needs a serverless.yml file.

In hello-app directory, Adding serverless.yml file with the content.

service: hello-app
provider:
name: aws
runtime: nodejs10.x
stage: dev
region: us-east-1
webpack:
webpackConfig: 'webpack.config.js'
includeModules: true
packager: 'npm'
packExternalModulesMaxBuffer: 204800
functions:
hello: ${file(apps/hello-app/src/functions/hello/hello.yml)}
plugins:
- serverless-webpack

Similarly, add serverless.yml to greeting-app directory.

// Update service: greeting-app ... functions: greeting: ${file(apps/greeting-app/src/functions/greeting/greeting.yml)}

Add libraries for AWS and Serverless.

npm install --save aws-lambda npm install --save-dev serverless serverless-webpack tsconfig-paths-webpack-plugin

You can see more detail about serverless plugin here. Then add a webpack.config.js file at workspace root directory.

const path = require('path');
const slsw = require('serverless-webpack');
const nodeExternals = require('webpack-node-externals');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
externals: [nodeExternals()],
devtool: 'source-map',
entry: slsw.lib.entries,
resolve: {
extensions: ['.js', '.json', '.ts', '.tsx'],
plugins: [
new TsconfigPathsPlugin()
]
},
target: 'node',
module: {
rules: [
{
test: /\.ts(x?)$/,
use: [
{
loader: 'ts-loader'
}
]
}
]
},
plugins: [],
mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
stats: 'minimal', // errors-only, minimal, none, normal, verbose
output: {
libraryTarget: 'commonjs',
path: path.resolve(__dirname, '.webpack'),
filename: '[name].js'
}
};

See serverless-webpack for more detail.

The workspace structure.

To illustrate how useful libraries can be. Updating common-util.ts file in the common-util library.

export const getMessage = () => { return 'This is a message from workspace library'; };

Add hello.handler.ts, hello.yml, and index.ts file to functions/hello directory and also refer to the common-util library, see below code snippet:

//hello.handler.ts
import { Handler, Context } from 'aws-lambda';
import { getMessage } from '@myworkspace/common-util';

export const handler: Handler = async (event: any, context: Context) => {
return {
statusCode: 200,
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ message: getMessage() })
};
};

//hello.yml
handler: apps/hello-app/src/functions/hello/index.handler
description: A function for Hello Application
events:
- http:
path: /hello
method: get

//index.ts
export * from './hello.handler';

Similarly, Add greeting.handler.ts, greeting.yml, and index.ts file to functions/greeting directory with content as hello.handler.ts, hello.yml.

Deploying

To deploy AWS Serverless Application with Serverless Framework you need to install AWS CLI and config AWS Credential. Because every application is separated, so I can deploy separately for every application.

sls deploy --config apps/hello-app/serverless.yml 
sls deploy --config apps/greeting-app/serverless.yml

Result:

Conclusion

In this guide, AWS Serverless Application is built with awesome tools and patterns that will make our life as developers pretty enjoyable.


Originally published at https://blog.innomizetech.com.

Hiep Dinh

Written by

Hiep Dinh

InnomizeTech

We are an offshore software development and IT consulting company based in Vietnam. Our aim is to create awesome products that will make your everyday life easier. As a start-up company, we always put humans on first priority and welcome young people to join our team

More on Serverless from InnomizeTech

More on JavaScript from InnomizeTech

More on JavaScript from InnomizeTech

A brief summary of JavaScript Learning Path

More on Serverless from InnomizeTech

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade