Blog | Sajeetharan Sinnathurai,From Code to Cloud

How to Build a Rocking Github Profile

July 10, 2020 · 2 min read

Since the acquisition by Microsoft, Github been so much better! They have added so many new features, made mobile app. GitHub recently made lot of improvements on the UI aspects including adding a twitter handle to your profile. Also introduced a special feature for developers, that allows you to showcase yourself by pinning a README.md containing information about you, your work, portfolio and anything else on your GitHub profile.

In this post, I'll show you how to create a rocking Github profile to showcase your skills when someone visits your profile

Prerequisites

A GitHub account
Basic markdown knowledge
Expertise on Making Gifs would be an added advantage

Step 1 :

Create a new ✨special✨ repository with your username. The special repository is case sensitive, ensure to use the same case as your account's username.

Step 2 :

Click on the checkbox: "Initialize this repository with a README". This will create a README.md file inside your <Username>/<Username> repository, where you will be adding the details.

If you are not sure what to add, you also get a free template out of the box, cool right?

Here's my own finished rocking profile page from the special repository:

This is definitely a great feature for developers to expose their skills and also to showcase to recruiters, followers etc. I would ask everyone to get creative and showcase everything about yourself to your frollowers

Done with your special repository ? Drop a link to your GitHub account in the comments and let's see how amazing yours look. ✌🏾 Cheers!

How to resolve : Cosmos DB x-ms-partitionkey Error

June 15, 2020 · One min read

One of the most repeated question that i came across on stackoverflow on the tag #Cosmosdb is that how to resolve the error "The partition key supplied in x-ms-partitionkey header has fewer components than defined in the the collection"

This error could occur when you are attempting to get a Document from Cosmosdb using the REST API or using SDK. If you are using using a partitioned Collection and therefore you need to add the "x-ms-documentdb-partitionkey" header. Even after adding the header if you get the error you can fix it by the following methods,

Partition key must be specified as an array (with a single element). For example:

in C#

  requestMessage.Headers.Add("x-ms-documentdb-partitionkey", " [ \"" + partitionKey + "\" ] ");

In Javascript

headers['x-ms-documentdb-partitionkey'] = JSON.stringify([pkey]);

Partition key for a partitioned collection is actually the path to a property in Cosmosdb. Thus you would need to specify it in the following format:/{path to property name} e.g. /abc

Hope this helps someone out there who is struggling to fix this issue!

Deploy Deno App on Azure with Github Actions

May 31, 2020 · 7 min read

Overview :

Before two weeks Ryan Dahl (Founder of Node.JS) announced the first version of [Deno](https://deno.land/). As the tagline says A secure runtime for JavaScript and TypeScript. Deno is a runtime for Javascript and Typescript that is based on the V8 JavaScript engine and the Rust programming language. I have been a Node developer for 2 years in the past, if you want to get started with Deno knowing Node.js would be an added advantage. Even though Deno has arrived as a competitor for NodeJS in the industry not so quick but people are sure that it'll take over.

I was reading lot of documentations and materials to understand the difference. So, here are the advantages that i see from Deno,

It is Secure by default. No file, network, or environment access, unless explicitly enabled.
Supports TypeScript out of the box.
Ships only a single executable file.
Has built-in utilities like a dependency inspector (deno info) and a code formatter (deno fmt).
Deno does not use npm
Deno does not use package.json in its module resolution algorithm.
All async actions in Deno return a promise. Thus Deno provides different APIs than Node.
Uses "ES Modules" and does not support require().
Deno has a built-in test runner that you can use for testing JavaScript or TypeScript code.
Deno always dies on uncaught errors.

I was very excited as other developers when Deno was announced. In this post i will demonstrate how to create a simple Web API with Deno and deploy to production on Web App with Azure.

PreRequisities:

You will need to have an Azure Subscription. If you do not have an Azure subscription you can simply create one with free trial.

Install Deno :

Using Shell (macOS, Linux):

curl -fsSL https://deno.land/x/install/install.sh | sh

Using PowerShell (Windows):

iwr https://deno.land/x/install/install.ps1 -useb | iex

Using Homebrew (macOS):

brew install deno

Using Chocolatey (Windows):

choco install deno

Using Scoop (Windows):

scoop install deno

Services used:

Azure Web App
Github Actions

Step 1 : Create Deno Rest API

I will not be going through each step on how to create the REST API, however if you are familiar with creating APIs with Node , it is the same way that you need to do. You need to have the main file server.ts which will have those routes defined. (server.ts)

import { Application } from "https://deno.land/x/oak/mod.ts";
import router from "./routes.ts";
const PORT = 8001;

const app = new Application();

app.use(router.routes());
app.use(router.allowedMethods());

console.log(`Server at ${PORT}`);
await app.listen({ port: PORT });

One feature that i personally liked in DENO is that it provides developers to code with TypeScript that addresses "design mistakes" in Node.js. In this case i am going to create an API to fetch/add/delete products and my interface would look like as below (types.ts),

export interface Product {
    id: String;
    name: String;
    description: String;
    price: Number;
    status: String;
}

Similar to how you would define routes in Node, you need to define the routes for different endpoints when user want to execute fetch/add/delete operations as follows(routes.ts),

import { Router } from "https://deno.land/x/oak/mod.ts";
import { delete_product, add_product, get_product, get_products } from "./Controllers/Products.ts";

const router = new Router();

router.get("/", ctx => {
    ctx.response.body = "Welcome to Deno!";
});

router.get("/get/:id", get_product);
router.post("/add", add_product);
router.get("/get_all_products", get_products);
router.get("/delete/:id", delete_product);

export default router;

The final step is to create the code for the logic of those each routes. You need to implement the methods which are defined in those routes. For example get_products would look like

import { Product } from "../Types.ts";

let products: Product[] = [
    {
        id: "1",
        name: "Iphone XI",
        description: "256GB",
        price: 799,
        status: "Active"
    }
];

const get_products = ({response}: {response: any}) => {
    response.status = 200;
    response.body = products;
};

You can access the whole code from this Repository.

Run the DENO app:

Once you are good with everything, you can run the app in local and check if the endpoints are working as expected.

deno run -A server.ts

And you would see the app running in port 8001 , and you can access the endpoints as follows ,

Step 2 : Create Azure Resources

Now we are good with the first step and you can see the app running successfully in local. As the next step let's go ahead and deploy the app to Azure. Inorder to deploy the app, you need to create a Resource Group first.

Create a ResourceGroup Named Deno-Demo

You can navigate to Azure Portal and search for Resource Group in the search bar and create a new one as defined here!

Next step is to create the Web App , as we are going to deploy this app to a Linux environment, you can set the configuration as follows,

Step 3 : Deploy to Azure with Github Actions

One of the recent inventions by Github team that was loved by all developers were Github Actions. Personally i am a big fan of Github actions and i have published few posts earlier explaining the same. To configure the Github Action to our application, first you need to push the code to your github repository.

Create a deno.yml

To deploy the app , we first need to create the workflow under the actions. you can create a new workflow by navigating to Actions tab and create new workflow

I am assuming that you are familiar with important terms of Github Actions, if you are new you can explore here. In this particular example i will be using one package created by Anthony Chu who is a Program Manager in Azure functions team. And my deno.yml looks like below,

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:

  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    
    - uses: actions/checkout@v2

    - uses: azure/[email protected]
      with:
        creds: ${{ secrets.AZURE_CREDENTIALS }}
    
    - name: Set up Deno
      uses: denolib/setup-deno@master
      with:
        deno-version: 1.0.2

    - name: Bundle and zip Deno app
      run: |
        deno bundle server.ts server.bundle.js
        zip app.zip server.bundle.js
    - name: Deploy to Azure Web Apps
      uses: anthonychu/azure-webapps-deno-deploy@master
      with:
        app-name: denodemo
        resource-group: deno-demo
        package: app.zip
        script-file: server.bundle.js
        deno-version: "1.0.2"

One important thing you need to verify is the resource-group and the app-name as you created on Azure.

Also you need to add secrets of your application under secrets in Github repository. You can generate a new Service Principal and obtain the secret as below,


az ad sp create-for-rbac --name "deno-demo" --role contributor  --scopes /subscriptions/{SubscriptionID}/resourceGroups/deno-demo  --sdk-auth

It will generate a JSON like below,

You can copy and paste the JSON under the secret named "AZURE_CREDENTIALS" ,

Now we are good with everything, you can update some file on the repository and see the workflow getting triggered. You can monitor the deployment by navigating to the workflow.

Once everything is successful you can navigate to Azure portal and open the Web App endpoint to see if the app is running successfully.

You can see the app running successfully on Azure.

Final words

I really enjoyed learning about the Deno project and created this simple app. I hope this article can be of value for anyone getting started with Deno with Azure. I see it Deno gaining in popularity, yes. However, I do not see it replacing NodeJS and npm based on several factors. If you found this article useful, or if you have any questions please reach out me on Twitter. Cheers!

Deploy Deno App to Azure with Github Actions

May 31, 2020 · 7 min read

Overview :

Before two weeks Ryan Dahl (Founder of Node.JS) announced the first version of [Deno](https://deno.land/). As the tagline says A secure runtime for JavaScript and TypeScript. Deno is a runtime for Javascript and Typescript that is based on the V8 JavaScript engine and the Rust programming language. I have been a Node developer for 2 years in the past, if you want to get started with Deno knowing Node.js would be an added advantage. Even though Deno has arrived as a competitor for NodeJS in the industry not so quick but people are sure that it'll take over.

I was reading lot of documentations and materials to understand the difference. So, here are the advantages that i see from Deno,

It is Secure by default. No file, network, or environment access, unless explicitly enabled.
Supports TypeScript out of the box.
Ships only a single executable file.
Has built-in utilities like a dependency inspector (deno info) and a code formatter (deno fmt).
Deno does not use npm
Deno does not use package.json in its module resolution algorithm.
All async actions in Deno return a promise. Thus Deno provides different APIs than Node.
Uses "ES Modules" and does not support require().
Deno has a built-in test runner that you can use for testing JavaScript or TypeScript code.
Deno always dies on uncaught errors.

I was very excited as other developers when Deno was announced. In this post i will demonstrate how to create a simple Web API with Deno and deploy to production on Web App with Azure.

PreRequisities:

You will need to have an Azure Subscription. If you do not have an Azure subscription you can simply create one with free trial.

Install Deno :

Using Shell (macOS, Linux):

curl -fsSL https://deno.land/x/install/install.sh | sh

Using PowerShell (Windows):

iwr https://deno.land/x/install/install.ps1 -useb | iex

Using Homebrew (macOS):

brew install deno

Using Chocolatey (Windows):

choco install deno

Using Scoop (Windows):

scoop install deno

Services used:

Azure Web App
Github Actions

Step 1 : Create Deno Rest API

I will not be going through each step on how to create the REST API, however if you are familiar with creating APIs with Node , it is the same way that you need to do. You need to have the main file server.ts which will have those routes defined. (server.ts)

import { Application } from "https://deno.land/x/oak/mod.ts";
import router from "./routes.ts";
const PORT = 8001;

const app = new Application();

app.use(router.routes());
app.use(router.allowedMethods());

console.log(`Server at ${PORT}`);
await app.listen({ port: PORT });

One feature that i personally liked in DENO is that it provides developers to code with TypeScript that addresses "design mistakes" in Node.js. In this case i am going to create an API to fetch/add/delete products and my interface would look like as below (types.ts),

export interface Product {
    id: String;
    name: String;
    description: String;
    price: Number;
    status: String;
}

Similar to how you would define routes in Node, you need to define the routes for different endpoints when user want to execute fetch/add/delete operations as follows(routes.ts),

import { Router } from "https://deno.land/x/oak/mod.ts";
import { delete_product, add_product, get_product, get_products } from "./Controllers/Products.ts";

const router = new Router();

router.get("/", ctx => {
    ctx.response.body = "Welcome to Deno!";
});

router.get("/get/:id", get_product);
router.post("/add", add_product);
router.get("/get_all_products", get_products);
router.get("/delete/:id", delete_product);

export default router;

The final step is to create the code for the logic of those each routes. You need to implement the methods which are defined in those routes. For example get_products would look like

import { Product } from "../Types.ts";

let products: Product[] = [
    {
        id: "1",
        name: "Iphone XI",
        description: "256GB",
        price: 799,
        status: "Active"
    }
];

const get_products = ({response}: {response: any}) => {
    response.status = 200;
    response.body = products;
};

You can access the whole code from this Repository.

Run the DENO app:

Once you are good with everything, you can run the app in local and check if the endpoints are working as expected.

deno run -A server.ts

And you would see the app running in port 8001 , and you can access the endpoints as follows ,

Step 2 : Create Azure Resources

Now we are good with the first step and you can see the app running successfully in local. As the next step let's go ahead and deploy the app to Azure. Inorder to deploy the app, you need to create a Resource Group first.

Create a ResourceGroup Named Deno-Demo

You can navigate to Azure Portal and search for Resource Group in the search bar and create a new one as defined here!

Next step is to create the Web App , as we are going to deploy this app to a Linux environment, you can set the configuration as follows,

Step 3 : Deploy to Azure with Github Actions

One of the recent inventions by Github team that was loved by all developers were Github Actions. Personally i am a big fan of Github actions and i have published few posts earlier explaining the same. To configure the Github Action to our application, first you need to push the code to your github repository.

Create a deno.yml

To deploy the app , we first need to create the workflow under the actions. you can create a new workflow by navigating to Actions tab and create new workflow

I am assuming that you are familiar with important terms of Github Actions, if you are new you can explore here. In this particular example i will be using one package created by Anthony Chu who is a Program Manager in Azure functions team. And my deno.yml looks like below,

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:

  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    
    - uses: actions/checkout@v2

    - uses: azure/[email protected]
      with:
        creds: ${{ secrets.AZURE_CREDENTIALS }}
    
    - name: Set up Deno
      uses: denolib/setup-deno@master
      with:
        deno-version: 1.0.2

    - name: Bundle and zip Deno app
      run: |
        deno bundle server.ts server.bundle.js
        zip app.zip server.bundle.js
    - name: Deploy to Azure Web Apps
      uses: anthonychu/azure-webapps-deno-deploy@master
      with:
        app-name: denodemo
        resource-group: deno-demo
        package: app.zip
        script-file: server.bundle.js
        deno-version: "1.0.2"

One important thing you need to verify is the resource-group and the app-name as you created on Azure.

Also you need to add secrets of your application under secrets in Github repository. You can generate a new Service Principal and obtain the secret as below,


az ad sp create-for-rbac --name "deno-demo" --role contributor  --scopes /subscriptions/{SubscriptionID}/resourceGroups/deno-demo  --sdk-auth

It will generate a JSON like below,

You can copy and paste the JSON under the secret named "AZURE_CREDENTIALS" ,

Now we are good with everything, you can update some file on the repository and see the workflow getting triggered. You can monitor the deployment by navigating to the workflow.

Once everything is successful you can navigate to Azure portal and open the Web App endpoint to see if the app is running successfully.

You can see the app running successfully on Azure.

Final words

I really enjoyed learning about the Deno project and created this simple app. I hope this article can be of value for anyone getting started with Deno with Azure. I see it Deno gaining in popularity, yes. However, I do not see it replacing NodeJS and npm based on several factors. If you found this article useful, or if you have any questions please reach out me on Twitter. Cheers!

Azure static web app is simply AWESOME : Deployed an Angular app in 10 seconds!

May 19, 2020 · 4 min read

One of the highlight among the announcements made at Microsoft Build 2020 was announcement of the new Azure service in the keynote which is Azure App Static Web Apps. Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a GitHub repository. This service allow web developers to publish websites to a production environment by building apps from a GitHub repository for free. Developers can use modular and extensible patterns to deploy apps in minutes while taking advantage of the built-in scaling and cost-savings offered by serverless technologies.

It provides the killer features for developers such as:

Free web hosting for static content like HTML, CSS, JavaScript, and images.
Integrated API support provided by Azure Functions as backend APIS
First-party GitHub integration where repository changes trigger builds and deployments with Github Actions
Globally distributed static content, putting content closer to your users.
Free SSL certificates, which are automatically renewed.
Custom domains* to provide branded customizations to your app.
Seamless security model with a reverse-proxy when calling APIs, which requires no CORS configuration.
Authentication provider integrations with Azure Active Directory, Facebook, Google, GitHub, and Twitter.
Customizable authorization role definition and assignments.
Back-end routing rules enabling full control over the content and routes you serve.
Generated staging versions powered by pull requests enabling preview versions of your site before publishing.

How i deployed Meme-Generator App:

I was building this meme generator app for an angular session today with Azure cognitive service to detect persons in the image and also to generate a meme by adding a text as the user wanted. As soon as Azure static web apps was announced I wanted to check it out with this application on how easy it is to deploy. Experience was seamless and easy to deploy and generate a url in few seconds.

Let me explain, how i achieved this in quick time.

Step 1. Sign-in to the Azure Portal, Search for “Static Web Apps”, and click the Create button

Visit https://portal.azure.com, sign-in, and use the search box at the top to locate the Static Web Apps service (note that it’s currently in “preview”). click the Create button to get started.

In this step you’ll fill out the Static Web Apps form and sign-in to your Github account to select your repository.

Select your Azure subscription.
Create a Resource Group
Name your app , in my case its meme4fun
Select a region (as of now its not available in all regions)
Sign-in to Github and select your org, repo, and branch.

Once you’re done filling out the form click the Next: Build > button.

Step 2: Define Angular App location, API, and Build Output

The next step is to define the path where my app is located in the repository, and i did not have any azure function integrated and i will keep it as empty, and the directory where my build artifacts (your bundles) are located(i.e dist/meme-4-fun). After entering that information click the Review + create button.

Step 3: Click the Create and Look for the Magic !

Once you are good with everything you can go ahead and click the create button and you will see the application successfully gets deployed and end point generated to access it public.

Once the deployment is done, if you go the resource and click on overview you will see a configuration as follows,

It has the urls of the Github Actions and as well as Github source code and also the url of the application deployed. If you’d like to see the build in action on Github, click the Workflow file above.

You can access the meme generator application and create your own memes from https://lively-forest-0fd67f010.azurestaticapps.net/

Here are some great links you can visit to learn more.

Static Web Apps docs:
https://aka.ms/swadocs
Static Web Apps Learn modules (Angular, React, Svelte, or Vue JavaScript app and API):
https://aka.ms/swaframeworks
Static web app with the Gatsby static site generator:
https://aka.ms/staticsitegen
Blog post:
https://aka.ms/swapreview

The above app is also available in the Microsoft's sample static web app Gallery.

If you're a web developer you definitely need to check out this cool service for sure. Cheers!

Prerequisites​

Overview :​

PreRequisities:​

Install Deno :​

Services used:​

Step 1 : Create Deno Rest API​

Run the DENO app:​

Step 2 : Create Azure Resources​

Step 3 : Deploy to Azure with Github Actions​

Final words​

Overview :​

PreRequisities:​

Install Deno :​

Services used:​

Step 1 : Create Deno Rest API​

Run the DENO app:​

Step 2 : Create Azure Resources​

Step 3 : Deploy to Azure with Github Actions​

Final words​

How i deployed Meme-Generator App:​

Step 2: Define Angular App location, API, and Build Output​

Step 3: Click the Create and Look for the Magic !​

Prerequisites

Overview :

PreRequisities:

Install Deno :

Services used:

Step 1 : Create Deno Rest API

Run the DENO app:

Step 2 : Create Azure Resources

Step 3 : Deploy to Azure with Github Actions

Final words

Overview :

PreRequisities:

Install Deno :

Services used:

Step 1 : Create Deno Rest API

Run the DENO app:

Step 2 : Create Azure Resources

Step 3 : Deploy to Azure with Github Actions

Final words

How i deployed Meme-Generator App:

Step 2: Define Angular App location, API, and Build Output

Step 3: Click the Create and Look for the Magic !