Demo App for Vikings - 2018
by John Papa
Angular, Node, Docker, Azure, Cosmos DB/Mongo DB!
Try using 1 of these variations of databases and Node SDKs:
- Nodejs -> Express -> Mongoose -> Mongo DB
- Nodejs -> Express -> Mongoose -> Cosmos DB (using Mongo API)
- Nodejs -> Express -> Cosmos SQL SDK -> Cosmos DB (using SQL API)
You can also try them in Docker containers or running the Node.js app locally.
Here are all of the slides/code from my presentation at ngVikings event this week!
- Code: https://github.com/johnpapa/vikings
- Angular extensions: https://aka.ms/ng-essentials
- Node extensions: https://aka.ms/vsc-node
- Free Azure Trial: https://aka.ms/jp-free
-
Install the Angular CLI
Only required when running local, without docker.
npm install -g @angular/cli
-
Clone this repository
git clone https://github.com/johnpapa/vikings.git cd vikings
-
Install the npm packages
npm install
-
Configure environment settings
Create a file with the following name and location .env
and copy the contents from
.env.example
into it. Replace the values with your specific configuration. Don't worry, this
file is in the .gitignore
so it won't get pushed to github.
Take care not to include extra spaces or quotes. These values are taken verbatum.
NODE_ENV=development
PORT=8626
WWW=./
# Toggle which one of these you want to use
#DATA_OPTION=local_mongo
#DATA_OPTION=cloud_cosmos
DATA_OPTION=cloud_cosmos_sdk
CORE_API_KEY=your-core-api-key-goes-here
CORE_API_URL=https://vikings-core.documents.azure.com:443/
USE_LIVE_DATA=yes
MONGO_API_ACCOUNT=vikings
MONGO_API_DB=vikings-db
MONGO_API_KEY=your-mongo-api-key-goes-here
MONGO_API_PORT=10255
# use localhost or your linked docker container (e.g. mongocontainer)
LOCAL_MONGO=localhost
This option requires Mongo running locally or in a container via localhost
-
Set the appropriate
.env
file settings# e.g. for mongo accessible on localhost DATA_OPTION=local_mongo LOCAL_MONGO=localhost
-
Build the Angular app and launch the node server
ng build npm dev-proxy
-
Open the browser to http://localhost:8626
- Set the appropriate
.env
file settings
This option requires Mongo running locally or in a container via localhost
# e.g. for mongo accessible on localhost
DATA_OPTION=local_mongo
LOCAL_MONGO=localhost
-
Build the Angular app and launch the node server
ng build npm run local
-
Open the browser to http://localhost:8626
- Install and run Docker
There are various flavors of the app we can build. See the appropriate sections below.
This contains:
- Mongoose SDK
- Mongo DB in a container with mounted data volume
This image expects environment variables to be set to point to the database provider (e.g. Mongo DB or Cosmos DB)
```bash
# e.g. Mongo DB in a container
DATA_OPTION=local_mongo
USE_LIVE_DATA=yes
MONGO_API_DB=vikings-db
# use localhost or your linked docker container (mongocontainer)
LOCAL_MONGO=mongocontainer
```
- CMD+SHIFT+P
docker: compose up
- Select
docker-compose.debug.mongodb.yml
- Browse to http://localhost:7626
This contains:
- Mongoose SDK
- Cosmos DB (Mongo API)
This image expects environment variables to be set to point to the database provider (e.g. Mongo DB or Cosmos DB)
```bash
# e.g. Mongo DB in a container
DATA_OPTION=cloud_cosmos
USE_LIVE_DATA=yes
MONGO_API_ACCOUNT=vikings
MONGO_API_DB=vikings-db
MONGO_API_KEY=your-key
MONGO_API_PORT=10255
```
- CMD+SHIFT+P
docker: compose up
- Select
docker-compose.debug.yml
- Browse to http://localhost:7626
This contains:
- Cosmos SQL SDK
- Cosmos DB (SQL API)
This image expects environment variables to be set to point to the database provider (e.g. Mongo DB or Cosmos DB)
```bash
# e.g. Mongo DB in a container
DATA_OPTION=cloud_cosmos_sdk
CORE_API_KEY=your-key
CORE_API_URL=https://vikings-core.documents.azure.com:443/
```
- CMD+SHIFT+P
docker: compose up
- Select
docker-compose.debug.yml
- Browse to http://localhost:7626
- Azure account
Free Azure Trial - https://aka.ms/jp-free
- Install the Azure CLI
- Azure/Node/Docker extensions for VS Code
- CMD+SHIFT+P
docker: compose up
- Select
docker-compose.yml
- Go to the Docker extension in the sidebar and expand
Images
- Right click the image and select
tag
- Prefix the tag with your container registry name
e.g Azure container registry
papacr.azurecr.io/johnpapa/vikings:latest
- Right click the image and select
push
- Expand
Registries / Azure
in the Docker extension in the sidebar - Right click the image you pushed and select
deploy to azure app service
- Follow the instructions when prompted to choose your server
-
Azure Container Registry Login command may be needed
az acr login --name your-azure-container-registry-name # e.g. az acr login --name papacr
If you get errors with
az acr login
try runningaz account clear
. Then runaz login
again and follow the prompts. Then try again withaz acr login
-
Create a CosmosDB instance
-
Configure Cosmos DB server settings
In the
.env
, set theDATA_OPTION
to the appropraite database kind. Then adjust theMONGO_API
settings shown below, but for your specific configuration.DATA_OPTION = cloud_cosmos; USE_LIVE_DATA = yes; MONGO_API_ACCOUNT = your_cosmos_account; MONGO_API_DB = your_cosmos_db_name; MONGO_API_KEY = your_cosmos_db_key; MONGO_API_PORT = 10255;
-
Create a CosmosDB instance
-
Configure Cosmos DB server settings
In the
.env
, set theDATA_OPTION
to the appropraite database kind. Then adjust theCORE_API
settings shown below, but for your specific configuration.DATA_OPTION = cloud_cosmos_sdk; USE_LIVE_DATA = yes; CORE_API_KEY = your_cosmos_db_key; CORE_API_URL = your_cosmos_db_url;
e.g. The url should follow the format https://yourdatabasename.documents.azure.com:443/
There are scripts in the /meta
folder that will help you clean and repopulate the various databases uing different APIs.
Learn various ways to debug the node and angular app in the DEBUGGING guide.
Create the Docker image that you can docker push
to a registry. This command uses docker-compose
to build the image and run the container.