@bafsllc/nx-serverless

---

What is Nx

🔎 Extensible Dev Tools for Monorepos.

What is @flowaccount/nx-serverless

🔎 Extensible Continous Delivery/Depolyment Tools on top of Nx workspace for Serverless Framework. Because on multiple lambda in one repository is an awesome thing!

Our Mission

Simplify any workflow that can be abstracted into one command using the same configuration structure as angular.json, workspace.json or nx.json. Make development life-cycle easier, more effective and having less rituals. Communication through configurations and not documentations.

Feature sets to support for Serverless Framework

Frameworks Schematics

Framework Name	AWS	Azure	GCP
Node-Typescript (Webpack)	✅	📆	📆
Angular Universal (Typescript-compiler)	✅	📆	📆
Express-js (Typescript-compiler)	✅	📆	📆

Serverless Framework Commands

Command Names	AWS	Azure	GCP
Deploy	✅	📆	📆
Destroy	✅	📆	📆
Sls Command	✅	📆	📆
Serverless-offline	✅	📆	📆

Supported Serverless Framework Versions

Versions	Status
1.0+	✅
2.0+	✅

Builders wrapped before packaging/deployment

Builder Names
Webpack compiler	✅
Typescript compiler	✅

Whats special about the plugin is that, you DO NOT need to use serverless-wepack or serverless-typescript plugins anymore! The library uses angular builders to build or typescript compilers to compile your code for you into javascript before packaging them into a zip file and deploy them to the serverless cloud.

Package.json dependency resolvers

Resolver Names
Webpack stats	✅
Depcheck	✅

The other special thing that the library does is, it uses webpack stats to build up your dependencies and write a package.json into your dist folder in the attempt to minimize the amount of dependencies in your node_modules needed to be uploaded to the cloud.

For typescript compilers it uses dep-checks to resolve the dependencies and write up a package.json file

Getting Started

To Deploy an Existing Angular Application adding Ng-Universal in the process

First you need to create an nx workspace to get started!

Using npx

npx create-nx-workspace # Then you got to use yarn/npm
// if start with angular presets
nx add @flowaccount/nx-serverless # or with these options --project=my-app --provider=aws --addUniversal=yes
// else
npm install @flowaccount/nx-serverless --save-dev

Using npm

npm init nx-workspace
// if start with angular presets
npm run nx add @flowaccount/nx-serverless # or with these options --project=my-app --provider=aws --addUniversal=yes
// else
npm install @flowaccount/nx-serverless --save-dev

Using yarn

yarn create nx-workspace
// if start with angular presets
yarn nx add @flowaccount/nx-serverless # or with these options --project=my-app --provider=aws --addUniversal=yes
// else
yarn add --dev @flowaccount/nx-serverless

Deploying/Compiling application (Assuming you have nx added globally, otherwise use npx/npm/yarn!)

nx run my-app:offline # to run the universal app offline checking serverless works locally
nx deploy my-app # to deploy the app
nx run my-app:destroy # to destroy the app
nx run my-app:compile # to compile only the serverless part of the app

Running custom sls commands application (Assuming you have nx added globally, otherwise use npx/npm/yarn!)

nx run my-app:sls # to run the custom sls commands as per what you need!

To Create and Deploy Node-Typescript Serverless Application

Using npx

npx create-nx-workspace # Then you got to use yarn/npm
nx g @flowaccount/nx-serverless:api-serverless --name=myapi --provider=aws

Using npm

npm init nx-workspace
nx g @flowaccount/nx-serverless:api-serverless --name=myapi --provider=aws

Using yarn

yarn create nx-workspace
nx g @flowaccount/nx-serverless:api-serverless --name=myapi --provider=aws

Deploying/Compiling application (Assuming you have nx added globally, otherwise use npx/npm/yarn!)

nx serve myapi --port=7777 # to serve the api locally on port 7777
nx deploy myapi --stage=dev# to deploy the api
nx build myapi # to build the api

To Debug your deployments Edit the env.json files generated by the schematics. change SLS_DEBUG to true

To ship your assets (html,css,js,img etc)

   "assets": [
              "apps/app/src/favicon.ico",
              "apps/app/src/robots.txt",
              "apps/app/src/manifest.webmanifest",
              {
                "glob": "**/*",
                "input": "libs/shared/ui-theme/assets",
                "output": "./assets"
              }
  ],

For Node-Typescript Api Application

the resulting file tree will look like this:

<workspace name>/
├── apps/
│   ├── myapi/
|   ├────────src/handler.ts
|   ├────────jest.config.js
|   ├────────tsconfig.json
|   ├────────serverless.yml
|   ├────────tsconfig.app.json
|   ├────────tsconfig.spec.json
|   ├────────tslint.json
├── libs/
├── tools/
├── nx.json
├── package.json
├── tsconfig.json
└── tslint.json

you workspace.json will be added with these

"build": {
  "builder": "@flowaccount/nx-serverless:build",
  "configurations": {
   ...
  },
  "options": {
    ...
  }
},
"deploy": {
  "builder": "@flowaccount/nx-serverless:deploy",
  "options": {
    "waitUntilTargets": ["myapi:some-other-builder"],
    "buildTarget": "myapi:build:production",
    "config": "apps/myapi/serverless.yml",
    "location": "dist/static/apps/myapi",
    "package": "dist/static/apps/myapi"
  },
    "configurations": {
    "staging": {
      "buildTarget": "myapi:build:staging",
      "waitUntilTargets": ["myapi:some-other-builder:staging"],
      "stage": "staging"
    },
    "production": {
      "buildTarget": "myapi:build:production",
      "waitUntilTargets": ["myapi:some-other-builder:production"],
      "stage": "production"
    }
  }
},
"destroy": {
  "builder": "@flowaccount/nx-serverless:destroy",
  "options": {
   ...
  }
},
"sls": {
  "builder": "@flowaccount/nx-serverless:sls",
  "options": {
    ...
  }
 }
}
"lint": {
  "builder": "@angular-devkit/build-angular:tslint",
  "options": {
   ...
  }
},
"serve": {
  "builder": "@flowaccount/nx-serverless:offline",
  "configurations": {
    ...
  },
  "options": {
    ...
  }
},
"test": {
  "builder": "@nrwl/jest:jest",
  "options": {
    ...
  }
 }
}

For Expressjs/Angular Universal Application

the resulting file tree will look like this:

<workspace name>/
├── apps/
│   ├── my-app/
|   ├───────────────handler.ts
|   ├───────────────serverless.yml
|   ├───────────────tsconfig.serverless.json
├── libs/
├── tools/
├── nx.json
├── package.json
├── tsconfig.json
└── tslint.json

The existing angular project in workspace.json/angular.json will be updated with these sections

"compile": {
  "builder": "@flowaccount/nx-serverless:compile",
  "configurations": {
   ...
  },
  "options": {
   ...
  }
},
"deploy": {
  "builder": "@flowaccount/nx-serverless:deploy",
  "options": {
    ...
  }
},
"destroy": {
  "builder": "@flowaccount/nx-serverless:destroy",
  "options": {
  ...
  }
},
"offline": {
  "builder": "@flowaccount/nx-serverless:offline",
  "configurations": {
   ...
  },
  "options": {
   ...
  }
 }
}
"sls": {
        "builder": "@flowaccount/nx-serverless:sls",
        "options": {
          "waitUntilTargets": [],
          "buildTarget": "my-app:build:production",
          "config": "apps/my-app/serverless.yml",
          "location": "dist/apps/my-app",
          "package": "dist/apps/my-app",
          "command": "package",
         },
        "configurations": {
          "deploy-dev": {
            "buildTarget": "my-app:build:dev",
            "command": "deploy",
            "stage": "dev"
          },
            "deploy-production": {
            "buildTarget": "my-app:build:production",
            "command": "deploy",
            "stage": "prod"
          }
        }
    }

Want to help?

You are most welcome to help! Please file a bug or submit a PR, read the guidelines for contributing and start right on!