TypeScript Node/Express 👉TypeScript Serverless ➕Angular
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
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.
heroes
and another named villains
. Give each a partition key of /id
. You can add data through the app later.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-azure-cosmos-db-api-key-goes-here"
CORE_API_URL="https://papa-cosmos-api-db.documents.azure.com/?WT.mc_id=heroesangularserverless-github-jopapa"
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/"
}
}
Clone this repository
git clone https://github.com/johnpapa/heroes-angular-serverless.git heroes
cd heroes
Install the npm packages
npm install
Build the Node Express and the Angular code
npm run node-ng:build
Run the app
npm run node:start
Open proxy.conf.json
and change the port to 7070
Open the VS Code Command Palette F1
Type View: Show Debug
and press ENTER
Select Debug Express and Angular
Press F5
Open the browser to http://localhost:7070
You may now set break points in the Express and Angular code.
Open proxy.conf.json
and change the port to 7071
Open the VS Code Command Palette F1
Type View: Show Debug
and press ENTER
Select Debug Functions and Angular
Press F5
Open the browser to http://localhost:7071
You may now set break points in the Functions and Angular code.