Github Actions - CI/CD for React.js

 1. Install gh-pages npm package

Command: npm install gh-pages --save-dev

2. In package.json, add the homepage url

"homepage": "https://skyairwater.github.io/react-google-sheet-cms"

3. In package.json, under "scripts" section, add below line

"deploy": "gh-pages -d build"

4. Go to your repository in github and select "Actions"

5. Search for the workflow "node.js" and click configure button

6. In the editor, change the node-version to your value, eg:21.x

7. Click on "Commit changes" and it will add the node.js.yml file under .github folder in your branch

8. Pull changes to your local

9. Go to gh-pages npm package website https://www.npmjs.com/package/gh-pages and scroll all the way down

copy the below code to node.js.yml and align it properly

- name: Deploy with gh-pages
  run: |
    git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
    npx gh-pages -d build -u "github-actions-bot <support+actions@github.com>"
   env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

10. Go to github repository settings => actions => general and under Workflow Permissions, select "Read and Write Permissions" radio button

11. Go to github repository settings => pages

Under Build and Deployment section, select the source as "Deploy from a branch"

Select the branch as "gh-pages" and /root and click save button

AZ-104

• Microsoft Azure is huge and it has hundreds of services underneath its umbrella
• It's actually going to be quite difficult to comprehend every offering
• It's very hard to imagine somebody as being an absolute expert in all of the areas of Azure

• Most Azure services depend on one or more of the below core services    
• Core Services
• Virtual Machines
• Virtual Networking
• Storage
• Azure CLI vs Powershell - to install on local machine, download them
• Powershell commands are not case sensitive
• If you have "windows powershell", it is old version
• The latest one is "Powershell 7.4.1"

• Open windows powershell and run the below command which will install powershell 7

• winget install --id Microsoft.Powershell --source winget

• Check if any Az modules are installed
• Get-InstalledModule -Name Az -AllVersions | Select-Object -Property Name, Version
• Install Az module
•  Install-Module -Name Az -AllowClobber -Force

• Azure cloud shell (available in web browser portal - no need to install anything on local machine)
• Azure Cloud Shell requires an Azure file share to persist files

Seeing Apache2 page in your website?

 I host one of the non-profit website on Linode Ubuntu VM using nginx server. All of a sudden, I started seeing Apache2 Default page when I visit my website. Seems like the hosting provider installed Apache on my virtual machine by default during fresh install.

To fix this issue

• Stop apache service - sudo /etc/init.d/apache2 stop
• Restart nginx - sudo systemctl restart nginx

To check the status of nginx, use the command - systemctl status nginx.service

Azure Cosmos DB

When to use NoSQL Database?

"If your transactional volumes are reaching extreme levels, such as many thousands of transactions per second, you should consider a distributed NoSQL database" - Microsoft, Cosmos DB documentation

Relational Database

Fixed Schema

Table based structure

Vertical scaling

Provides ACID guarantees (atomicity, consistency, isolation, durability)

Data normalization

NoSQL Databases

Fluid schema

Multiple structures (key-value, graph, document, wide-column)

Horizontal scaling and data partitioning for scalability

Provides BASE (basically available, soft state, eventual consistency) semantics

Non-normalized data

Cosmos DB Benefits

Provides extremely low latency

Provides SLA for throughput, latency, availability and consistency

Support replication

High availability

Enables elastic scalability

Supports multiple consistency options

Integrated Analytics

Region Support

Schema-agnostic

Automatic Indexing

Supports multiple SDKs

Supported Cosmos DB API's

SQL (store data as json data) (container entity - Table)

Cassandra (CQL) (container entity - Table)

MongoDB (container entity - Collection)

Gremlin (Graph database - commonly used in product recommendation and social networks to denote the relationship between items) (container entity - Graph)

Azure Table (container entity - Table)

Throughput and Scaling

Vertical scaling - increase more resource, CPU, memory etc

Horizontal scaling - add more servers

Azure Functions

• Needs storage account for creating Azure function
• Runtime stack can be .net, java, node.js etc

Azure Functions can be hosted as 

• Consumption plan (serverless - auto scale, has time limit of 5 minutes for each method invocation, pay per use)
• Azure app service (no time limit, monthly plan service)
• Premium plan (faster performance, reserved instances, enhanced security)
• Docker container (on premises or any cloud provider)

Azure Function types

• HTTP Function Triggers (web hooks, use for APIs invocation)
• Timer Trigger (scheduled tasks, CRON expression)
• Blob Storage Trigger (data operation, run when a new file is uploaded to Blob storage)
• Queue Trigger (run in response to a message on a queue)
• Cosmos DB Trigger (run when a document is created or updated)
• Event Trigger
• Graph Trigger
• SendGrid Trigger (3rd party - send email)
• Twilio Trigger (3rd party - send text)

Every Azure function has exactly one trigger

HTTP Request Trigger

Security considerations:

Anonymous (no key required)

Security key per function

Admin: key per function app

Input and Output Bindings

Example for Input Bindings:

Blob storage binding - read all contents of a file in Blob storage

Cosmos DB binding - look up a document in a cosmos DB database

Queue storage binding - read a message from queue

Microsoft Graph binding - access OneDrive

To develop locally, 

Azure Functions VS Code extension

we can use Azure storage emulator, Azure Cosmos DB Emulator

Command to run the function: func start

Call the endpoint using postman or powershell command "Invoke-WebRequest <endpoint>"

When a message is posted to a queue, we can use a free tool "Azure storage explorer" to view the queue and actual message

Azure Durable Functions (for workflows)

Create stateful, serverless workflows / orchestration

Orchestration Patters: 

Function Chaining

Fan-out Fan-in

Asynchronous HTTP APIs

Monitor pattern (Poll and sleep)

Human Interaction (Process approval / escalate)

Install Microsoft.Azure.WebJobs.Extensions.DurableTask nuget package

Azure Service Bus

Azure Messaging Paradigms

• Event Grid - Best suited for reactive programming (something happened here and somebody wants to know it)

• Event Hubs - Telemetry and distributed data streaming

• Storage Queues - just a queue. Once the messages are read, they will be removed from queue.

• Service Bus

• Multi tenant cloud message service that sends information between applications and services
• Queue, Topics and Subscriptions
• Publishers and Subscribers
• Queues
• Messages in the queue are ordered and timestamped on arrival. After that messages are saved safely in a redundant strategy so that it's not lost
• The receiver has to ASK for message

• Topics and Subscriptions
• Pub/Sub pattern
• Storage queue can grow more than 80 GB
• Service Bus can grow only upto 80 GB
• Service Bus guarantees FIFO, duplicate detection
• 
  
• Create Service Bus Namespace
• eg: Mycompany.servicebus.windows.net
• Pricing tier
• Subscription
• Resource group
• Location
• Primary Connection string (to connect to the bus)
• Create queue
• Queue Name
• Size

• Topics and Subscriptions
• Subscribers are invoked or notified when a message of interest appears

Angular - Constructor vs. ngOnInit

Constructor is called when the class is instantiated. It is a good place to initialize class properties and inject dependencies.

ngOnInit is a lifecycle hook and is called after the constructor is called and all the variables are initialized. 

Order of Events