Forem: Kevin Le

Create an Azure Pipelines to deploy Docker image for Azure App Service

Kevin Le — Fri, 06 Aug 2021 20:16:00 +0000

This article details how to containerize an app, create an App Service in Azure and configure it to pull the Docker image from the Azure Container Registry (ACR). How the Docker image gets deployed from our code to ACR is a result of us creating a deployment pipeline using Azure Pipelines.

The benefit is instead of manually pushing the locally-built Docker image to ACR after some code changes, we now have an automated Continuous Integration/Continuous Deployment (CI/CD) process.

The workflow can be described as follow: We write the code on our Dev computer, build and run the Docker image locally. Once we do a git push of the code to a git repo, Azure Pipelines performs the build on some agent machine and deploys the Docker image to ACR. Since the App Service has also already been configured for Continuous Deployment, it will pull the image from the ACR automatically. Essentially we have a pipeline from code to repo to Docker image to ACR to App Service.

1) We start with writing an app. What app to write is not the focal point of this article. But to have something to start with, we will create an out-of-the-box NextJS app using npx create-next-app. We could have done with an ASP.Net core app and everything will be just the same. So let's start:



npx create-next-app mysample
cd mysample
npm run build

2) We will create a Docker image for this and run in a local Docker container. To do so, we will create a Dockerfile and a docker-compose.yml file.

Here's the Dockerfile



FROM node:14 as BUILD_IMAGE
WORKDIR /var/www/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN yarn build

# remove dev dependencies
RUN npm prune --production

FROM node:14
WORKDIR /var/www/app
COPY --from=BUILD_IMAGE /var/www/app/package.json ./package.json
COPY --from=BUILD_IMAGE /var/www/app/node_modules ./node_modules
COPY --from=BUILD_IMAGE /var/www/app/.next ./.next
COPY --from=BUILD_IMAGE /var/www/app/public ./public

EXPOSE 3000
CMD ["yarn", "start"]

And docker-compose.yml file



version: '3.4'

services:
  app:
    build:
      context: .
      dockerfile: ./Dockerfile
    ports:
      - 80:3000
    env_file: .env
    command:
      sh -c 'yarn start'

3) Now we can run the Docker locally with the command


 up --build

It should work if you point the browser to http://localhost (that's port 80 not 3000)

4) All the next steps that we're about to do can be done with the UI in Azure Portal, but we will use Azure CLI as much as possible. Also, I will name my Resource Group and App Service Plan as MyResourceGroup and MyLinuxPlan respectively. If you already have a Resource Group and App Service plan, you can continue using them. Or you can follow next step and substitute with names of your own choosing.

Let's create a Resource Group called MyResourceGroup



az group create -l westus -n MyResourceGroup

Now we create a Linux App Service Plan called MyLinuxPlan with 2 workers



az appservice plan create -g MyResourceGroup -n MyLinuxPlan \
    --is-linux --number-of-workers 2 --sku S1

To create a Resource Group, refer to this link.
To create an App Service Plan refer to this link

5) Now we create an Azure Container Registry called mysampleacr



az acr create --name mysampleacr --resource-group \
    MyResourceGroup --sku Basic --admin-enabled true

At this point, we now have an ACR but no image has been pushed to it and no App Service has been created. This is where my approach starts to differ from that in Azure documentation.

This is OK because we don't want to push the Docker image to ACR manually. Instead we will set up the Azure Pipeline now.

6) Let's go to https://dev.azure.com, navigate to the Pipeline page and create a new Pipeline as shown in the next picture:

7) Then specify Where is you code? when prompted.

8) At the page Configure your pipeline, scroll down and click on "Show more". Then select Docker Build and push an image to Azure Container Registry

9) Select your Subscription and Continue. You might be prompted to login again.

10) Now select your Container Registry. If you follow this example, earlier we name it mysampleacr. For image name, let's name it mysampleimg. Then click on Validate and configure

11) We should get a generated azure-pipelines.yml file with contents similar to the one below



# Docker
# Build and push an image to Azure Container Registry
# https://docs.microsoft.com/azure/devops/pipelines/languages/docker

trigger:
- main

resources:
- repo: self

variables:
  # Container registry service connection established during pipeline creation
  dockerRegistryServiceConnection: 'b0...a4'
  imageRepository: 'mysampleimg'
  containerRegistry: 'mysampleacr.azurecr.io'
  dockerfilePath: '**/Dockerfile'
  tag: '$(Build.BuildId)'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build and push stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)
    steps:
    - task: Docker@2
      displayName: Build and push an image to container registry
      inputs:
        command: buildAndPush
        repository: $(imageRepository)
        dockerfile: $(dockerfilePath)
        containerRegistry: $(dockerRegistryServiceConnection)
        tags: |
          $(tag)

We need to make a couple of changes and then we can Save and run.

In the above file, look for the line tag: '$(Build.BuildId)' and add a line below it. It will now show



tag: '$(Build.BuildId)'
latestTag: 'latest'

In the last 2 lines of the file, change from



tags: |
  $(tag)



tags: |
  $(latestTag)

The resulting/modified azure-pipelines.yml file should now look something like



# Docker
# Build and push an image to Azure Container Registry
# https://docs.microsoft.com/azure/devops/pipelines/languages/docker

trigger:
- main

resources:
- repo: self

variables:
  # Container registry service connection established during pipeline creation
  dockerRegistryServiceConnection: 'b0...a4'
  imageRepository: 'mysampleimg'
  containerRegistry: 'mysampleacr.azurecr.io'
  dockerfilePath: '**/Dockerfile'
  tag: '$(Build.BuildId)'
  latestTag: 'latest'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build and push stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)
    steps:
    - task: Docker@2
      displayName: Build and push an image to container registry
      inputs:
        command: buildAndPush
        repository: $(imageRepository)
        dockerfile: $(dockerfilePath)
        containerRegistry: $(dockerRegistryServiceConnection)
        tags: |
          $(latestTag)

Now we can Save and run

12) When the run finishes, we can verify there is an image in the ACR by running the following commands (one by one)



az acr repository list -n mysampleacr

az acr repository show -n mysampleacr \
  --repository mysampleimg

az acr repository show -n mysampleacr  \
  --repository mysampleimg:latest

For more help on az acr repository commands, please refer to https://docs.microsoft.com/en-us/cli/azure/acr/repository?view=azure-cli-latest#az_acr_repository_list

13) Now we can create an App Service and tell it to pull from the latest image mysampleimg:latest from the ACR mysampleacr.



az webapp create --resource-group MyResourceGroup --plan MyLinuxPlan --name mysample --deployment-container-image-name mysampleacr.azurecr.io/mysampleimg:latest

14) To ensure when a new image is pushed to the ACR, the App Service will automatically pull the latest image, go to Azure Portal, navigate to the App Service blade and make sure Continuous Deployment is on.

References (A little difficult to read for me, but that's just my opinion):
https://docs.microsoft.com/en-us/azure/app-service/quickstart-nodejs?pivots=platform-linux

https://docs.microsoft.com/en-us/azure/architecture/example-scenario/apps/devops-dotnet-webapp

https://docs.microsoft.com/en-us/azure/developer/javascript/tutorial/deploy-nodejs-azure-app-service-with-visual-studio-code?tabs=bash

https://docs.microsoft.com/en-us/azure/app-service/quickstart-custom-container?tabs=node&pivots=container-linux

A Docker container to serve directory with upload capability

Kevin Le — Mon, 19 Jul 2021 15:49:45 +0000

Sometime we just need a simple solution to serve some directory but also allow upload capability. I just created one and the source code is here.

The heavy lifting is done by vercel/serve-handler.

The use case for me is I use it to share books, PDFs, and other documents among all of the computers in my local network. I can retrieve and upload from any of my computers.

Store and share passwords among Linux, Mac and Windows in a local network

Kevin Le — Sun, 18 Jul 2021 14:12:45 +0000

There are many cloud-based Password Manager solutions, free and paid. One of the free ones I like the most is BitWarden. Then there's also KeePass which I think is only a desktop application. Those are battlefield-tested solutions. Before I go on, I'd recommend you would consider those solutions as well.

But those solutions do not meet the requirements for my use case. I use all 3 kind of computers Linux, Mac and Windows. The motivation for me is at any given time, when I'm prompted for a password, I want to have a quick and convenient way to retrieve it, regardless of which computer and OS I happen to be on. For me that would be using a CLI. Secondly, I do not want my passwords to leave my local network. Finally, if I create a new password on one computer, I want to be able to replicate it to all of my computers.

The core of my solution is a simple Password Manager called pash.

Installation

Linux

There's no installation. On Linux, simply create an executable file at /usr/local/bin called pash and copy the content from https://github.com/dylanaraps/pash/blob/master/pash

Make it executable by calling chmod:

chmod +x pash

Using pash is easy. Just type pash and it will show how to use it.

$ pash
pash 2.3.0 - simple password manager.

=> [a]dd  [name] - Create a new password entry.
=> [c]opy [name] - Copy entry to the clipboard.
=> [d]el  [name] - Delete a password entry.
=> [l]ist        - List all entries.
=> [s]how [name] - Show password for an entry.
=> [t]ree        - List all entries in a tree.

Using a key pair:  export PASH_KEYID=XXXXXXXX
Password length:   export PASH_LENGTH=50
Password pattern:  export PASH_PATTERN=_A-Z-a-z-0-9
Store location:    export PASH_DIR=~/.local/share/pash
Clipboard tool:    export PASH_CLIP='xclip -sel c'
Clipboard timeout: export PASH_TIMEOUT=15 ('off' to disable)

Mac

On a Mac, GnuPG is not installed by default, so we must first install it:

brew install gnupg gnupg2

Then carry out the rest just like in the Linux section above.

Windows

On Windows, we need Windows 10 Pro edition. Then install WSL2.

Again, carry out the rest just like in the Linux section above.

Replication

Now I can create a password on any one of the computers, be it Linux, Mac or Windows. Next I want to replicate it easily to the rest of the computers in my local network. In that way, the passwords are always available. Since I do not want the passwords to leave my local network, I don't want to copy to Google Drive or OneDrive or something like that. And since I want the replication process to be easy, I don't want to copy to a USB drive, eject, carry around, plug back in, etc.

What I will do is install OpenSSH server on my Linux computer, which seems like the most sensible approach.

sudo apt install openssh-server

Then on my Mac and Windows/WSL2, I just create a couple of executable files called pashpush and pashpull in \usr\local\bin directory.

#!/bin/sh
#
# pashpush
scp ~/.local/share/pash/$1.gpg kevin@linux-host:~/.local/share/pash/

and

#!/bin/sh
#
# pashpull
scp kevin@linux-host:~/.local/share/pash/$1.gpg ~/.local/share/pash/

Then run chmod +x as before with the program pash.

Run pashpush and pashpull is easy

pashpush some-password
pashpull another-password

Alternatively if you don't like CLI, there are GUI options such as WinSCP on Windows and Transmit by Panic on Mac and Filezilla on both.

Type-safely parsing JSON to a TypeScript Interface

Kevin Le — Sat, 17 Apr 2021 12:48:47 +0000

Let's say we're working with a REST API that returns a JSON string representing a user. The JSON API agrees to a contract that it returns a string firstName, a string lastName and a number accountBalance. We model the user as an Interface in TypeScript as follow:


 ts
interface User {
    firstName: string;
    lastName: string;
    accountBalance: number;
}

The following code is sufficient if we always have the happy path:


 ts
const json = '{"firstName": "Kevin", "lastName": "Le", "accountBalance": 100}'
const user: User = JSON.parse(json)

But things can go wrong on the API side. The json string returned could be:


 ts
const json  '{"firstName": "Kevin", "lastName": "Le", "accountBalance": "100"}'
const user: User = JSON.parse(json)
console.log(user)

The code does not blow up because accountBalance is now being treated as an any instead of a number. But this "forgiving" behavior leads to other problem downstream:


 ts
const balanceAfterInterest = user.accountBalance + user.accountBalance * 0.05
console.log(balanceAfterInterest) //1005

The balanceAfterInterest is only supposed to be 105. A better approach is to catch this problem early and handle it immediately and appropriately.

Head over to https://app.quicktype.io.

Paste the string {"firstName": "Kevin", "lastName": "Le", "accountBalance": 100} to the left pane. Type User as the Name, and select JSON as the Source type.

In the box on the right, select TypeScript as the Language and make sure Verify JSON.parse results at runtime is turned-on. Quicktype will generate the resulting code with instruction on how to use it in the middle.

Now the following code can be much safer:


 ts
import { Convert, User } from "./user";

const json =
  '{"firstName": "Kevin", "lastName": "Le", "accountBalance": "100"}';

try {
  const user = Convert.toUser(json);
  console.log(user);
} catch (e) {
  console.log("Handle error", e);
}

The exception is now caught and handled early:

The generated code by quicktype for user.js is:

Answer: What are express.json() and express.urlencoded()?

Kevin Le — Wed, 03 Feb 2021 14:16:57 +0000

Good explanation

Aug 14 '18

400

Here is the explanation that should clear doubts on express.json() and express.urlencoded() and the use of body-parser. It took me some time to figure this out.

What is Middleware? It is those methods/functions/operations that are called BETWEEN processing the Request and sending the Response in your application method.
When talking…

Open Full Answer

Learn Xamarin.Forms Control Template by making a Button with built-in Loading Indicator in 4 steps

Kevin Le — Tue, 03 Nov 2020 13:56:59 +0000

In Xamarin.Forms, Control Template offers a powerful way to build a template. The template is built by composing smaller parts. But building a template is not the end goal. The end goal is to use a so-built template to make UI controls and use them anywhere without having to duplicate common codes.

I’m going to show how to implement a button for a Xamarin.Forms app that has the following special features: (a) Upon being tapped-on, the button will show a loading indicator (Activity Indicator) indicating the app is doing some work asynchronously. (b) This button can be re-used every where in the application without any code duplication.

As an example, the button, in normal state looks like:

Upon being tapped-on, the button will show a loading indicator and looks like:

Side note: I came up with the prefix AsyncButton to be used in the naming which might or might not be the best choice. But for the rest of this post, we’re stuck with it.

Step 0. Read the official docs (optional)

Read about Xamarin.Forms Control Templates and Relative Binding. If it’s a little vague, hopefully, the docs are more valuable after the following 4 steps.

Step 1. Create Bindable Properties in a View file

Create a new file named AsyncButtonView.cs(just a plain old .cs file, no accompanying .xaml file):

Point of interest: This class AsyncButtonView subclasses from ContentView and is really simple. It just lists all the bindable properties. Glancing at the variables names such ButtonCornerRadius, ButtonBackgroundColor, ButtonTextColor, ButtonText, etc, we can quickly tell that these properties are used later on to customize the look and feel of a button. But this class does not “blueprint” how to construct the button. That’s for step 2.

Step 2. Build a Control Template for the Button

A Control Template “blueprints” how to build the UI for the control. Create a new file named AsyncButtonControlTemplateResourceDictionary.xaml and put it in the same folder with App.xml(Every Xamarin.Forms app should already have an App.xml file):

Point of interest: The Control Template above instructs to build the button by composing smaller parts. It instructs to layout a Xamarin.Forms Button next to a Xamarin.Forms ActivityIndicator horizontally (line 9 through 15). Then it instructs to put this layout inside a Xamarin.Forms Frame (line 5 through 16). This Frame class allows for the Button’s rounded corners. Finally, we have a Button ControlTemplate out this construction by wrapping it inside a Xamarin.Forms ControlTemplate (line 4 through 17).

But if you look more closely at this file, this Button ControlTemplate is not connected to AsyncButtonView in step 1 in any way. The connection will be made when this Button ControlTemplate is actually used to make a button. All the bindings however are already specified by now as illustrated by the following line.

BackgroundColor="{Binding Source={RelativeSource TemplatedParent},Path=ButtonBackgroundColor}"

Step 3: Consume the Button ControlTemplate to make a button

Finally we are ready to use the Button ControlTemplate to make an Async Button. As an example, the following file shows how to put together everything that we have created so far:

Point of interest: The file in step 2 AsyncButtonControlTemplateResourceDictionary.xaml is referenced in the ResourceDictionary on line 14. On line 20, the AsyncButtonView and the Button ControlTemplate work together along with the supplied values for the rest of the properties. These 2 lines (line 14 and line 20) “connects” the bindable properties in step 1 with the UI Control Template in step 2. Line 9 references the ViewModel which we will do in step 4.

Step 4: Add a ViewModel

khle / AsyncButtonApp

Cross posted on medium

Taking the Unhappy Path with Result, Option, unwrap and ? operator in Rust

Kevin Le — Fri, 05 Jun 2020 21:52:29 +0000

As I'm learning Rust, I noticed that these 4 concepts Result, Option, unwrap, ? are often discussed in conjunction with each other. In this post, I'd like to document and share the thought process I have been going through. This thought process has helped me understanding and how to be more idiomatic in Rust.

Option

Although Rust has a concept of null, using null is not a common pattern in Rust. So let's say we have to write a function that, given the name of an mobile OS, the function will return the name of the store. If the string literal iOS is passed as input to the function, it will return App Store. If android, then Play Store. Any other input is considered invalid. In most other languages, we can choose to return null or a string literal invalid or something like that. But doing so is not the Rust way.

One idiomatic way in Rust to implement such function is to return an Option. An Option or to be exact an Option<T> is a generic and can be either Some<T> or None (From here on, I will mostly drop the generic type parameter T so the sentences do not get so cluttered). Rust refers to 'Some' and 'None' as variants (which does not have any equivalent in other languages, so I just don't get so hanged up on trying to define what a variant is). In our example, in the happy paths, the function returns the string literal "App Store" or "Play Store" wrapped in a Some variant. In the unhappy path, the function returns None.

fn find_store(mobile_os: &str) -> Option<&str> {
    match mobile_os {
        "iOS" => Some("App Store"),
        "android" => Some("Play Store"),
        _ => None
    }
}

To consume find_store(), we can call it as follow:

fn main() {
    println!("{}", match find_store("windows") {
        Some(s) => s,
        None => "Not a valid mobile OS"
    });
}

You can try to run the above example in the playground

Result

Result is related to Option in Rust in that Result or to be exact Result<T, E> is a richer version of Option.

Result<T, E> could have one of two outcomes:

Ok(T): An element T was found
Err(E): An error was found with element E

as opposed to Option<T> previously seen that can contains Some<T> or None. Result has information about the error which is absent in Option.

Let's look at an example of a function that returns a Result. This function is from the serde_json crate which is used to parse JSON. The signature of this function is

pub fn from_str<'a, T>(s: &'a str) -> Result<T, Error> 
where
    T: Deserialize<'a>,

Assume we want to parse the following String

let json_string = r#"
        {
            "name": "John Doe",
            "age": 43,
            "phones": [
                "+44 1234567",
                "+44 2345678"
            ]
        }"#;

to a person object of this struct

#[derive(Serialize, Deserialize)]
struct Person {
    name: String,
    age: u8,
    phones: Vec<String>,
}

the code that parses the json_string to the Person object is as follow:

let p:Person = match serde_json::from_str(json_string) {
    Ok(p) => p,
    Err(e) => ... //we will discuss what goes here next 
};

The happy path is obvious. But let's say there's a typo in the input json_string, match will send the program flow to the Err(e) clause.

When the Err is encountered, there are 2 actions that we can take:

panic! (more about panic) here and here
return the Err

Back to our example, here's the full code if we decide to panic!

Playground

or if we want to return Err

Playground

unwrap

In the above example, let's consider at the case where we decide to panic!. The lines of code above

let p: Person = match serde_json::from_str(data) {
        Ok(p) => p,
        Err(e) => panic!("cannot parse JSON {:?}, e"), //panic
    }

is very verbose. Happy path is handled normally as expected, no discussion there. And when the Err is encountered, the above code panic!. We can replace the above verbose code with

let p:Person = serde_json::from_str(data).unwrap();

unwrap is OK to use if we know for sure that the input json_string will always be parsable to the Person struct, i.e. always happy path or if in case the Err is encountered, the program can't go on and it's unrecoverable. During development, when we're more concerned with getting the general flow of the program, unwrap can also be used as quick prototype.

So unwrap is implicit panic!. Although there's no difference with the more verbose counterpart, the danger is it's implicit, so sometimes it's not really what really want to do.

Regardless, if we need to call panic!, the code is shown as below:

Playground

`?` operator

As opposed to panic! when the Err is encountered, we can return the Err. Not every Err is unrecoverable, so there's no reason to panic!. The verbose code to return Err is shown again below:

let p: Person = match serde_json::from_str(data) {
        Ok(p) => p,
        Err(e) => return Err(e.into()),
};

? offers us a more concise way to replace the verbose code above:

let p:Person = serde_json::from_str(data)?;

So the entire program is showm here

Playground

Unpacking Option with unwrap and ?

Just as we could use unwrap and ? with Result, we can also use unwrap and ? with Option

If we unwrap an Option that has the underlying value of None, the program panic!

Here's an example of how to unwrap an Option:

Playground

Similarly, we can also unpack an Option with the ? operator. If the outcome is None, the program will terminate whatever function is being executed and return None.

Building an Eleventy site with PaperCSS

Kevin Le — Mon, 13 Apr 2020 19:39:45 +0000

This was cross-posted on khle.dev

There are many awesome static site generators and CSS frameworks. But none impresses me more than Eleventy and PaperCSS. They are both simple and elegant, and together seem like a perfect combination.

In just a few hours, even I could get this site up and running. This is my primary goal as I don't want to spend too much time on making a "blog website".

To build one like this, just follow the following steps.

From your Terminal or Console, install Eleventy:

$ npm install -g @11ty/eleventy

For my site, I want to have 3 areas: blog, about this site and about me. So I'll make 3 folders:

$ mkdir blog
$ mkdir about-site
$ mkdir about-me

For this site, I decide to have 2 layouts. So let's create a folder and the layout files.

$ mkdir _includes
$ touch _includes/layout.njk
$ touch _includes/article-layout.njk

The main page which lists all the articles and the 2 "about" pages should follow 1 layout. The article pages should follow the other. These 2 layouts are similar as I could have get by with just one. You might not need both. Anyway, here's a link to the full content of
layout.njk.

Now comes the fun part which is we get to write with markdown syntax. Let's create the about me page.

$ touch about-me/index.md

and copy the following content

---
layout: layout.njk
pageTitle: About me
---

<article class="article">
  <h1 class="article-title">About me</h1>
  <p class="text-lead">Hi, put your intro here</p>
  <p>Lorem...</p>
</article>

Next let's create the main page which is the page that lists all articles:

touch index.md

and copy the following content to it.

The first line above allows my articles to be listed in reverse chronological order.

Finally, to organize my blog articles in the file system, I keep them in sub-folders under the blog folder that was created earlier.

$ cd blog
$ mkdir 2020-04-09
$ cd ..
$ touch blog/2020-04-09/index.md

and start writing

---
layout: article-layout.njk
title: Building an Eleventy site with PaperCSS
date: 2020-04-09
tags: post
---
##### Published on {{ date | date : '%Y-%m-%d' }}
#### {{ title }}
###### `Eleventy`, `PaperCSS`
Lorem...

Some tips:

Table
You can use markdown extended syntax to embed tables in your content. There is this handy tool to help out.
If you need to have buttons to perform some actions we can use the following snippets:

<div class="row">
    <button class="article-meta"><a href="#">Do something</a></button>
    <button class="article-meta">Do something else</button>
  </div>

which results in

<button class="article-meta"><a href="#">Do something</a></button>
<button class="article-meta">Do something else</button>

Configuring both CSS Modules and global CSS for ReactJS in Webpack

Kevin Le — Tue, 07 Apr 2020 19:04:25 +0000

I prefer to keep all common CSS style rules in a global CSS style, called app.css for example. For style rules that only pertain to a particular component, then I'd like to keep in a separate CSS module. However, I want to be able to use the same className everywhere. For example, I might have a .logo class that are used everywhere, but my Header component needs a different logo. In this case, I might want to use both global CSS and CSS modules. This is a simple concept but the tricky part is in the details which is the Webpack configuration webpack.config.js.

The .logo class is defined in the global app.css as follow:

1. CSS module naming requirement

For the Header component, Webpack dictates that the CSS module has to be named according to the pattern something.module.css. So in this example, I will name it header.module.css.

2. Name mangling

The .logo is defined in the header.module.css as follow:

To differentiate the two .logo classNames, Webpack does the heavy lifting. It mangles the className .logo in header.module.css. If we look at the page source, we will see something like _app_header_module_css__WEBPACK_IMPORTED_MODULE_2___default.a.logo as opposed to simply logo in app.css.

3. webpack.config.js

We don't care about the above heavy lifting that Webpack does, but we have to abide by its requirement. We will need to configure 2 different rules: one for the global CSS and another for CSS module.

The first rule is for CSS module and second is for global CSS. You can easily tell by looking at the include key in each rule.

4. Outdated information

You might have seen some older posts which showed outdated information:

For example,

test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'

{
    test: /\.(css|scss)$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true,
          importLoaders: 1,
          localIdentName: '[name]__[local]__[hash:base64:5]'
        }
      }
    ],
    include: /\.module\.css$/
},

These will break the Webpack compiling npm run webpack. Don't use them.

4. Consume CSS style rules in ReactJS

Write the code for ReactJS is the easiest part:

//from global CSS
import './app.css'

return (
   <div>
      <div className='logo' />
   </div>
)

//from CSS Module
import styles from "./header.module.css"

return (
   <div>
      <div className={styles.logo} />
   </div>
)

Accelerating to delivery: Quickly build an Admin Panel or Dashboard-like app using ReactJS, Tailwind CSS. Part I

Kevin Le — Fri, 03 Apr 2020 00:06:16 +0000

Building a ReactJS app is like building with LEGO blocks. We build larger components out of smaller components and keep repeating that until we have something like the LEGO structure in the above image (Photo by Alphacolor on Unsplash) or an Admin Panel/Dashboard-like UI below:

To do quickly, we will use the Admin Panel template built on Tailwind CSS by tailwindadmin. Instead of taking the traditional approach like those Counter or Todo tutorials, we will get this application, just like what you see above, up and running first. At first, everything is in 1 big JS file that contain 1 big ReactJS component. Then in part II, we will refactor by breaking it up into smaller components.

This is my preferred approach as I believe it allows me to get to delivery a lot quicker. Our real app will look a lot like this kind of Admin Panel rather than a counter that has 2 buttons and a label. We will be able to easily derive from what we have here.

Launch a terminal or console and start typing.

npm init -y
npm i --save-dev webpack webpack-cli path
npm i --save-dev @babel/core @babel/node 
npm i --save-dev @babel/preset-env @babel/preset-react 
npm i --save-dev @babel/plugin-proposal-class-properties babel-loader
npm i --save-dev css-loader 
npm i --save-dev postcss-loader autoprefixer 
npm i --save-dev html-webpack-plugin
npm i --save-dev mini-css-extract-plugin postcss-loader
npm i --save-dev @fullhuman/postcss-purgecss postcss-import
npm i --save tailwindcss tailwindcss-tables
npm i --save react react-dom
npm i --save express webpack-dev-middleware

Then make a new directory called client

mkdir client

We will create some empty files, just place holders first. We will copy contents to them later.

I will use the touch command. If you're on Windows and the command touch is not available, use the PowerShell alternative command New-Item. Or use whatever way you prefer to create an empty file with each of those filenames.

Let's create 3 files in this client directory. Remember they will be empty at first, but we will copy contents to them later:

touch client/index.html
touch client/index.js
touch client/style.css

Create a file on the server side for NodeJS:

touch server.js

Finally create the following config files:

touch webpack.config.js
touch .babelrc
touch postcss.config.js
npx tailwind init tailwind.config.js

Regardless of how you created those empty files, copy the contents listed at the end of the post to each of them.

In the package.json file, find the "scripts" key and replace with the following:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "babel-node ./node_modules/webpack/bin/webpack",
    "start": "node server.js"
},

After you copy the file contents, webpack build it and run:

npm run webpack
npm start

You should see a nice Admin Panel ReactJS application.

How to understand AWS, Azure, Firestore Cloud, etc pricing?

Kevin Le — Tue, 11 Feb 2020 23:18:49 +0000

I found none of the pricing descriptions is clear. The calculators are not helpful either. What can help? Do you have a cheat sheet?

Accessing application settings from Azure Function Apps in a Docker Container

Kevin Le — Thu, 12 Dec 2019 20:25:15 +0000

Abstract

In my previous article, the business logic in the Function App is practically none. But one of the first common things of all software programs, Azure Function Apps or otherwise, in a real-world scenario is reading environment variables. In this article, I will refer to these environment variables as application settings. The reason is that I don't want us to get mixed up with environment variables that are passed to the Docker container.

Application settings in this context are, for example, the Function App needs to read the API key and/or secret of a third-party service in order to query for some data. Another example might be the connection string of the database. Generally, it is considered a bad programming to hard-code these values in the code itself. Since these values are configurable data, they should be decoupled from the program code and should live in an environment variable file or something like that. The key concept here is they should be decoupled.

The goal is we want to allow Function Apps to read application settings so that they can run locally and run inside a Docker container on the Desktop, as well as on Azure, inside and outside of an Azure Docker container.

Review: Non Docker way

Forget about Docker for a moment, let's say we write the Azure Function App on our development computer, we can keep all application settings in a file named local.settings.json. This file is in JSON format, and looks something like this:

{
    "SomeAPIClientKey": "...",
    "SomeAPIClientSecret": "..."
}

The function can access these application settings and be written as:

[FunctionName("kleSampleFunc")]
public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req, ILogger log, ExecutionContext context)
    {
        var configuration = new ConfigurationBuilder()
            .SetBasePath(context.FunctionAppDirectory)                    
            .AddJsonFile("local.settings.json", optional: true, reloadOnChange: true)
            .AddEnvironmentVariables()
            .Build();

        var apiKey = configuration["SomeAPIClientKey"];
        var apiSecret = configuration["SomeAPIClientSecret"];
        log.LogInformation($"apiKey: {apiKey}");
        log.LogInformation($"apiSecret : {apiSecret}");

        // .... Business logic that makes use of apiKey and apiSecret

        return OkObjectResult(new {
            //whatever        
        });         
    }

We can run it locally using the following command:

$ func start --build

We might choose NOT to commit the file local.settings.json to Source Control, so it won't get deployed. But it doesn't matter because when this Function App runs on Azure, the environment variables are no longer coming from the file local.settings.json. Instead, there's an Application Settings blade on Azure Portal where we can configure them.

Docker

From my previous article, the Function App running in the local Docker Desktop will not be able to read any environment variable from the local.settings.json file.

Assume we already run

$ docker build -t kle/sampledockerimg .
$ docker run -p 7071:80 kle/sampledockerimg

Test from Postman or curl, you will see the 2 log.LogInformation() statements above outputting null values for apiKey and apiSecret.

So launch another Terminal or Console, and run this command

$ docker ps

You will see the output in tabular format with 7 columns. The last column is NAMES. Note the value of this column for the docker image of your Function App. It's some kind of made-up name and varies each time the image is rebuilt. For example, I see mine as vigorous_bhaskara.

So now run

$ docker exec -it vigorous_bhaskara /bin/bash

The command above allows us accessing the file system, similar to SSH.

So if you run the linux ls command

$ ls /home/site/wwwroot

You will NOT see the file local.settings.json

So if the file containing the environment variables is not present, how can can anything read their values? The fix is simple. All we have to do is copying the file to Docker container using the Docker copy command

$ docker cp local.settings.json 16527b513905:/home/site/wwwroot

Run Postman or curl again, everything should work.

On the other hand, the same Function App, deployed to Azure, will be able to read all environment variables that have been configured in the Application Settings blade on Azure Portal. So we don't have to do anything there.

Conclusion

Long story short, just remember these 3 commands:

$ docker ps
$ docker exec -it vigorous_bhaskara /bin/bash
$ docker cp local.settings.json 16527b513905:/home/site/wwwroot

The first command tells us the container name and container id. In the example, that's vigorous_bhaskara and 16527b513905 respectively.

The second one allows us to access the file system of the Docker Container, in an SSH-like way.

The third one copies the local.settings.json from the host computer to the container.