Skip to content
TypeScript Node/Express 👉TypeScript Serverless Angular
TypeScript HTML CSS JavaScript
Branch: master
Clone or download
Latest commit 794d9e0 Sep 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode TYPESCRIPT Sep 12, 2019
e2e init Apr 25, 2019
functions updated to cosmos v3's API Sep 12, 2019
server fix express routes Sep 12, 2019
src readme fixes Sep 12, 2019
.env.example port Sep 12, 2019
.eslintignore TYPESCRIPT Sep 12, 2019
.eslintrc i like req and res Sep 12, 2019
.gitignore TYPESCRIPT Sep 12, 2019
README.md port Sep 12, 2019
angular.json init Apr 25, 2019
browserslist ng update to v8 Sep 11, 2019
package-lock.json updated to cosmos v3's API Sep 12, 2019
package.json updated to cosmos v3's API Sep 12, 2019
proxy.conf.json config now uses port 7070 for node and 7071 for functions. Sep 11, 2019
tsconfig.json ng update to v8 Sep 11, 2019
tslint.json ng update to v8 Sep 11, 2019

README.md

Heroes Angular Serverless

TypeScript Node/Express 👉TypeScript Serverless Angular

This project was created to help represent a fundamental app written with Node Express APIs and TypeScript that can be shifted to Serverless Functions with TypeScript.

The client app is Angular, however it could just as easily be Vue or React. The heroes and villains theme is used throughout the app.

by John Papa

Comparative client apps written with Vue and React can be found at at github.com/johnpapa/heroes-vue and github.com/johnpapa/heroes-react

Why

I love Node and Express for creating APIs! These require a server and paying for that server in the cloud. Shifting to serverless alleviates the cost, the server upkeep, helps scale up and down easily, and reduces the surface area of the middleware required for a robust Express app. Is it perfect? No, of course not! But this is a solid option if these factors affect you.

Prerequisites

  1. We need a database. You can use the free Azure Cosmos DB trial. Or try the Azure Free Trial.
  2. Create an Azure Cosmos DB database.
  3. Create a container named heroes and another named villains. Give each a partition key of /id. You can add data through the app later.
  4. Make a copy of the env.example file named .env, in the root of the project. It should contain the following code. Replace the CORE_API_KEY and CORE_API_URL variables with your Azure Cosmos DB information.

.env

NODE_ENV=development
PORT=7070
WWW=./
CORE_API_KEY=your-core-api-key-goes-here
CORE_API_URL=https://papa-cosmos-api-db.documents.azure.com:443/

Open the /functions/local.settings.json file and add the CORE_API_KEY and CORE_API_URL variables as shown below. Fill those values in with your database information.

/functions/local.settings.json

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "CORE_API_KEY": "your-azure-cosmos-db-api-key-goes-here",
    "CORE_API_URL": "https://your-azure-cosmos-db-url-goes-here:443/"
  }
}

Getting Started

  1. Clone this repository

    git clone https://github.com/johnpapa/heroes-angular-serverless.git heroes
    cd heroes
  2. Install the npm packages

    npm install
  3. Build the Node Express and the Angular code

    npm run node-ng:build
  4. Run the app

    npm run node:start

Debug Node Express and Angular

  1. Open proxy.conf.json and change the port to 7070

  2. Open the VS Code Command Palette F1

  3. Type View: Show Debug and press ENTER

  4. Select Debug Express and Angular

  5. Press F5

  6. Open the browser to http://localhost:7070

You may now set break points in the Express and Angular code.

Debug Functions and Angular

  1. Open proxy.conf.json and change the port to 7071

  2. Open the VS Code Command Palette F1

  3. Type View: Show Debug and press ENTER

  4. Select Debug Functions and Angular

  5. Press F5

  6. Open the browser to http://localhost:7071

You may now set break points in the Functions and Angular code.

Problems or Suggestions

Open an issue here

Resources

Debugging Resources

You can’t perform that action at this time.