DEV Community: Raphael MANSUY

10 minutes to deploy a Docker compose stack on AWS ECS illustrated with Hasura and Postgres ⏰

Raphael MANSUY — Tue, 09 Mar 2021 09:33:10 +0000

Introduction

The ecs-cli command is a little gem 💎

👉 ecs-cli allows you to deploy a Docker stack very easily on AWS ECS using the same syntax as the docker-compose file format version 1, 2 and 3

👉 The selling point of ecs-cli is to reuse your docker-compose.yml files to deploy your containers to AWS

👉 ecs-cli translates a docker-compose-yml to ECS Task Desfinitions and Services

In this article we will explore how to:

Use the toolecs-cli to create an AWS ECS cluster to orchestrate a set of Docker Containers
Add observability to the cluster thanks to AWS Cloud LogGroups
Use ecs-cli to deploy a set of Docker containers on the Cluster
Leverage AWS EFS to add persistence to the Cluster and add support of stateful workloads

Amazon Elastic File System is a cloud storage service provided by Amazon Web Services designed to provide scalable, elastic, concurrent with some restrictions, and encrypted file storage for use with both AWS cloud services and on-premises resources

As an example we will deploy a Docker stack composed of:

HASURA : an open source-engine that gives you an instant GraphQL & Rest API
PostgresSQL 13.2 for the persistence layer

Target architecture

Docker stack

This Docker Stack will be deployed on the AWS ECS Cluster

7 Steps

Install ecs-cli
Configure ecs-cli
Create the cluster Stack
Create a Docker Compose Stack
Deploy the docker compose stack on AWS ECS
Create an elastic filesystem AWS EFS
Add persistence to Postgres SQL thanks to AWS EFS

Prerequisites (for macOS)

Step1 : Install `ecs-cli`

The first step is to install the ecs-cli command on your system:

The complete installation procedure for macOS, Linux and Windows is available with this link.

For macOS the installation procedure is as follows:

👉 Download ecs-cli binary



sudo curl -Lo /usr/local/bin/ecs-cli https://amazon-ecs-cli.s3.amazonaws.com/ecs-cli-darwin-amd64-latest

👉 install gnupg (a free implementation of OpenPGP standard)



brew install gnupg

👉 get the public key of ecs-cli (I have copied the key in a GIST for simplicity)



https://gist.githubusercontent.com/raphaelmansuy/5aab3c9e6c03e532e9dcf6c97c78b4ff/raw/f39b4df58833f09eb381700a6a854b1adfea482e/ecs-cli-signature-key.key

👉 import the signature



gpg --import ./signature.key

👉 make ecs-cli executable



sudo chmod +x /usr/local/bin/ecs-cli

👉 verify the setup



ecs-cli --version

Configure `ecs-cli` 👩‍🌾

Prerequisite

AWS CLI v2 must be installed. If it's not the case you can follow these instructions on this link.
You need to have an AWS_ACCESS_KEY_ID / AWS_SECRET_ACCESS_KEY with administrative privileges

To create your AWS_ACCESS_KEY_ID you can read this documentation

Your environment variables must be configured with a correct pair of AWS_ACCESS_KEY_ID / AWS_SECRET_ACCESS_KEY



export AWS_ACCESS_KEY_ID="Your Access Key"
export AWS_SECRET_ACCESS_KEY="Your Secret Access Key"
export AWS_DEFAULT_REGION=us-west-2

The following script configure an ECS-profile called tutorial for a cluster named tutorial-cluster on the us-west-2 region with a default launch type based on EC2 instances:

configure.sh



#!/bin/bash
set -e
PROFILE_NAME=tutorial
CLUSTER_NAME=tutorial-cluster
REGION=us-west-2
LAUNCH_TYPE=EC2
ecs-cli configure profile --profile-name "$PROFILE_NAME" --access-key "$AWS_ACCESS_KEY_ID" --secret-key "$AWS_SECRET_ACCESS_KEY"
ecs-cli configure --cluster "$CLUSTER_NAME" --default-launch-type "$LAUNCH_TYPE" --region "$REGION" --config-name "$PROFILE_NAME"

Step2 : Creation of an ECS-Cluster 🚀

We will create an ECS-Cluster based on ec2 instance.

ECS allows 2 launch types EC2 and FARGATE

EC2 (Deploy and manage your own cluster of EC2 instances for running the containers)
AWS Fargate (Run containers directly, without any EC2 instances)

If we want to connect to the ec2 instances with ssh we need to have a key pair

👉 Creation of a key pair called tutorial-cluster :



aws ec2 create-key-pair --key-name tutorial-cluster \
 --query 'KeyMaterial' --output text > ~/.ssh/tutorial-cluster.pem

👉 Creation of the Cluster tutorial-cluster with 2 ec2-instances t3.medium

create-cluster.sh



#!/bin/bash
KEY_PAIR=tutorial-cluster
    ecs-cli up \
      --keypair $KEY_PAIR  \
      --capability-iam \
      --size 2 \
      --instance-type t3.medium \
      --tags project=tutorial-cluster,owner=raphael \
      --cluster-config tutorial \
      --ecs-profile tutorial

We have added 2 tags project=tutorial and owner=raphael to easily identify the resources created by the command

👉 Result



INFO[0006] Using recommended Amazon Linux 2 AMI with ECS Agent 1.50.2 and Docker version 19.03.13-ce
INFO[0007] Created cluster                               cluster=tutorial-cluster region=us-west-2
INFO[0010] Waiting for your cluster resources to be created...
INFO[0010] Cloudformation stack status                   stackStatus=CREATE_IN_PROGRESS
INFO[0073] Cloudformation stack status                   stackStatus=CREATE_IN_PROGRESS
INFO[0136] Cloudformation stack status                   stackStatus=CREATE_IN_PROGRESS
VPC created: vpc-XXXXX
Security Group created: sg-XXXXX
Subnet created: subnet-AAAA
Subnet created: subnet-BBBB
Cluster creation succeeded.

This command create:

A new public VPC
- An internet gateway
- The routing tables
2 public subnets in 2 availability zones
1 security group
1 autoscaling group
- 2 ec2 instances
1 ecs cluster

We can now deploy a sample Docker application on the newly created ECS Cluster:

👉 Create a file called docker-compose.yml



version: "3"
services:
  webdemo:
    image: "amazon/amazon-ecs-sample"
    ports:
      - "80:80"

This stack can best tested locally



docker-compose up

Results:

latest: Pulling from amazon/amazon-ecs-sample
Digest: sha256:36c7b282abd0186e01419f2e58743e1bf635808231049bbc9d77e59e3a8e4914
Status: Downloaded newer image for amazon/amazon-ecs-sample:latest

👉 We can now deploy this stack on AWS ECS:



ecs-cli compose --project-name tutorial  --file docker-compose.yml \
--debug service up  \
--deployment-max-percent 100 --deployment-min-healthy-percent 0 \
--region us-west-2 --ecs-profile tutorial --cluster-config tutorial

👉 To verify that the service is running we can use this command:



ecs-cli ps

Results:



Name                                                       State    Ports                     TaskDefinition  Health
tutorial-cluster/2e5af2d48dbc41c1a98/webdemo  RUNNING  34.217.107.14:80->80/tcp  tutorial:2      UNKNOWNK

The stack is deployed and accessible with the IP address 34.217.107.14

👉 We can now browse the deployed Website:



open http://34.217.107.14

👉 Open the port 22 to connect to the EC2 instances of the cluster




# Get my IP
myip="$(dig +short myip.opendns.com @resolver1.opendns.com)"

# Get the security group
sg="$(aws ec2 describe-security-groups   --filters Name=tag:project,Values=tutorial-cluster | jq '.SecurityGroups[].GroupId')"

# Add port 22 to the Security Group of the VPC
aws ec2 authorize-security-group-ingress \
        --group-id $sg \
        --protocol tcp \
        --port 22 \
        --cidr "$myip/32" | jq '.'

👉 Connection to the instance



chmod 400 ~/.ssh/tutorial-cluster.pem
ssh -i ~/.ssh/tutorial-cluster.pem ec2-user@34.217.107.14

👉 Once we are connected to the remoter server: we can observe the running containers:



docker ps



CONTAINER ID        IMAGE                            COMMAND                  CREATED             STATUS                    PORTS                NAMES
7deaa49ed72c        amazon/amazon-ecs-sample         "/usr/sbin/apache2 -…"   2 minutes ago       Up 2 minutes              0.0.0.0:80->80/tcp   ecs-tutorial-3-webdemo-9cb1a49483a9cfb7b101
cd1d2a9807d4        amazon/amazon-ecs-agent:latest   "/agent"                 55 minutes ago      Up 55 minutes (healthy)                        ecs-agent

Step3 : Adding observability 🤩

If we want to collect the logs for my running instances, we can create AWS CloudWatch Log Groups.

For that we can modify the docker-compose.yml file:



version: "2"
services:
  webdemo:
    image: "amazon/amazon-ecs-sample"
    ports:
      - "80:80"
    logging:
      driver: awslogs
      options:
         awslogs-group: tutorial
         awslogs-region: us-west-2
         awslogs-stream-prefix: demo

👉 And then redeploy the service with a create-log-groups option



ecs-cli compose --project-name tutorial  --file docker-compose.yml \
--debug service up  \
--deployment-max-percent 100 --deployment-min-healthy-percent 0 \
--region us-west-2 --ecs-profile tutorial --cluster-config tutorial \
--create-log-groups

👉 We can now delete the service 🗑




ecs-cli compose --project-name tutorial  --file docker-compose.yml \
--debug service down  \
--region us-west-2 --ecs-profile tutorial --cluster-config tutorial

👉 Deploying a more complex stack

We are now ready to deploy HASURA and Postgres

docker-compose.yml



version: '3'
services:
  postgres:
    image: postgres:12
    restart: always
    volumes:
    - db_data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: postgrespassword
  graphql-engine:
    image: hasura/graphql-engine:v1.3.3
    ports:
    - "80:8080"
    depends_on:
    - "postgres"
    restart: always
    environment:
      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
      ## enable the console served by server
      HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console
      ## enable debugging mode. It is recommended to disable this in production
      HASURA_GRAPHQL_DEV_MODE: "true"
      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
      ## uncomment next line to set an admin secret
      # HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
volumes:
  db_data:

👉 We can test the stack locally:



docker-compose up &

Then



open localhost

👉 We can now deploy this stack on AWS ECS

But before that we need to update the file docker-compose.yml

We must add:

A logging directive
A links directive



version: '3'
services:
  postgres:
    image: postgres:12
    restart: always
    volumes:
    - db_data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: postgrespassword
    logging:
      driver: awslogs
      options:
         awslogs-group: tutorial
         awslogs-region: us-west-2
         awslogs-stream-prefix: hasura-postgres
  graphql-engine:
    image: hasura/graphql-engine:v1.3.3
    ports:
    - "80:8080"
    depends_on:
    - "postgres"
    links:
      - postgres
    restart: always
    environment:
      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
      ## enable the console served by server
      HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console
      ## enable debugging mode. It is recommended to disable this in production
      HASURA_GRAPHQL_DEV_MODE: "true"
      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
      ## uncomment next line to set an admin secret
      # HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
    logging:
      driver: awslogs
      options:
         awslogs-group: tutorial
         awslogs-region: us-west-2
         awslogs-stream-prefix: hasura
volumes:
  db_data:

We need to create a file called ecs-params.yml to specify extra parameters:




version: 1
task_definition:
  ecs_network_mode: bridge

This file will be used by the ecs-cli command.

👉 we can then launch the stack:



ecs-cli compose --project-name tutorial  --file docker-compose.yml \
 --debug service up  \
--deployment-max-percent 100 --deployment-min-healthy-percent 0 \
  --region us-west-2 --ecs-profile tutorial \
--cluster-config tutorial --create-log-groups

Results:



DEBU[0000] Parsing the compose yaml...
DEBU[0000] Docker Compose version found: 3
DEBU[0000] Parsing v3 project...
WARN[0000] Skipping unsupported YAML option for service...  option name=restart service name=postgres
WARN[0000] Skipping unsupported YAML option for service...  option name=depends_on service name=graphql-engine
WARN[0000] Skipping unsupported YAML option for service...  option name=restart service name=graphql-engine
DEBU[0000] Parsing the ecs-params yaml...
DEBU[0000] Parsing the ecs-registry-creds yaml...
DEBU[0000] Transforming yaml to task definition...
DEBU[0004] Finding task definition in cache or creating if needed  TaskDefinition="{\n  ContainerDefinitions: [{\n      Command: [],\n      Cpu: 0,\n      DnsSearchDomains: [],\n      DnsServers: [],\n      DockerSecurityOptions: [],\n      EntryPoint: [],\n      Environment: [{\n          Name: \"POSTGRES_PASSWORD\",\n          Value: \"postgrespassword\"\n        }],\n      Essential: true,\n      ExtraHosts: [],\n      Image: \"postgres:12\",\n      Links: [],\n      LinuxParameters: {\n        Capabilities: {\n\n        },\n        Devices: []\n      },\n      Memory: 512,\n      MountPoints: [{\n          ContainerPath: \"/var/lib/postgresql/data\",\n          ReadOnly: false,\n          SourceVolume: \"db_data\"\n        }],\n      Name: \"postgres\",\n      Privileged: false,\n      PseudoTerminal: false,\n      ReadonlyRootFilesystem: false\n    },{\n      Command: [],\n      Cpu: 0,\n      DnsSearchDomains: [],\n      DnsServers: [],\n      DockerSecurityOptions: [],\n      EntryPoint: [],\n      Environment: [\n        {\n          Name: \"HASURA_GRAPHQL_ENABLED_LOG_TYPES\",\n          Value: \"startup, http-log, webhook-log, websocket-log, query-log\"\n        },\n        {\n          Name: \"HASURA_GRAPHQL_DATABASE_URL\",\n          Value: \"postgres://postgres:postgrespassword@postgres:5432/postgres\"\n        },\n        {\n          Name: \"HASURA_GRAPHQL_ENABLE_CONSOLE\",\n          Value: \"true\"\n        },\n        {\n          Name: \"HASURA_GRAPHQL_DEV_MODE\",\n          Value: \"true\"\n        }\n      ],\n      Essential: true,\n      ExtraHosts: [],\n      Image: \"hasura/graphql-engine:v1.3.3\",\n      Links: [],\n      LinuxParameters: {\n        Capabilities: {\n\n        },\n        Devices: []\n      },\n      Memory: 512,\n      Name: \"graphql-engine\",\n      PortMappings: [{\n          ContainerPort: 8080,\n          HostPort: 80,\n          Protocol: \"tcp\"\n        }],\n      Privileged: false,\n      PseudoTerminal: false,\n      ReadonlyRootFilesystem: false\n    }],\n  Cpu: \"\",\n  ExecutionRoleArn: \"\",\n  Family: \"tutorial\",\n  Memory: \"\",\n  NetworkMode: \"\",\n  RequiresCompatibilities: [\"EC2\"],\n  TaskRoleArn: \"\",\n  Volumes: [{\n      Name: \"db_data\"\n    }]\n}"
DEBU[0005] cache miss                                    taskDef="{\n\n}" taskDefHash=4e57f367846e8f3546dd07eadc605490
INFO[0005] Using ECS task definition                     TaskDefinition="tutorial:4"
WARN[0005] No log groups to create; no containers use 'awslogs'
INFO[0005] Updated the ECS service with a new task definition. Old containers will be stopped automatically, and replaced with new ones  deployment-max-percent=100 deployment-min-healthy-percent=0 desiredCount=1 force-deployment=false service=tutorial
INFO[0006] Service status                                desiredCount=1 runningCount=1 serviceName=tutorial
INFO[0027] Service status                                desiredCount=1 runningCount=0 serviceName=tutorial
INFO[0027] (service tutorial) has stopped 1 running tasks: (task ee882a6a66724415a3bdc8fffaa2824c).  timestamp="2021-03-08 07:30:33 +0000 UTC"
INFO[0037] (service tutorial) has started 1 tasks: (task a1068efe89614812a3243521c0d30847).  timestamp="2021-03-08 07:30:43 +0000 UTC"
INFO[0074] (service tutorial) has started 1 tasks: (task 1949af75ac5a4e749dfedcb89321fd67).  timestamp="2021-03-08 07:31:23 +0000 UTC"
INFO[0080] Service status                                desiredCount=1 runningCount=1 serviceName=tutorial
INFO[0080] ECS Service has reached a stable state        desiredCount=1 runningCount=1 serviceName=tutorial

👉 And then we can verify that our container are running on AWS ECS Cluster



ecs-cli ps

Results



Name                                                              State                  Ports                       TaskDefinition  Health
tutorial-cluster/00d7ff5191dd4d11a9b52ea64fb9ee26/graphql-engine  RUNNING                34.217.107.14:80->8080/tcp  tutorial:10     UNKNOWN
tutorial-cluster/00d7ff5191dd4d11a9b52ea64fb9ee26/postgres        RUNNING                                            tutorial:10     UNKNOWN

👉 And then: 💪



open http://34.217.107.14

👉 We can now stop the stack



ecs-cli compose down

To add persistent support to my solution we can leverage AWS EFS : Elastic File System

Step 4: Add a persistent layer to my cluster

👉 Create an EFS file system named hasura-db-file-system



aws efs create-file-system \
    --performance-mode generalPurpose \
    --throughput-mode bursting \
    --encrypted \
    --tags Key=Name,Value=hasura-db-filesystem

Results:



{
    "OwnerId": "XXXXX",
    "CreationToken": "10f91a50-0649-442d-b4ad-2ce67f1546bf",
    "FileSystemId": "fs-5574bd52",
    "FileSystemArn": "arn:aws:elasticfilesystem:us-west-2:XXXXX:file-system/fs-5574bd52",
    "CreationTime": "2021-03-08T16:40:19+08:00",
    "LifeCycleState": "creating",
    "Name": "hasura-db-filesystem",
    "NumberOfMountTargets": 0,
    "SizeInBytes": {
        "Value": 0,
        "ValueInIA": 0,
        "ValueInStandard": 0
    },
    "PerformanceMode": "generalPurpose",
    "Encrypted": true,
    "KmsKeyId": "arn:aws:kms:us-west-2:XXXXX:key/97542264-cc64-42f9-954e-4af2b17f72aa",
    "ThroughputMode": "bursting",
    "Tags": [
        {
            "Key": "Name",
            "Value": "hasura-db-filesystem"
        }
    ]
}

👉 Add mount points to each subnet of the VPC:



aws ec2 describe-subnets --filters Name=tag:project,Values=tutorial-cluster \
 | jq ".Subnets[].SubnetId" | \
xargs -ISUBNET  aws efs create-mount-target \
 --file-system-id fs-5574bd52 --subnet-id SUBNET

The next step is to allow NFS connection from the VPC

We need first to get the security group associated with each mount target



    efs_sg=$(aws efs describe-mount-targets --file-system-id fs-5574bd52 \
    | jq ".MountTargets[0].MountTargetId" \
     | xargs -IMOUNTG aws efs describe-mount-target-security-groups \
     --mount-target-id MOUNTG | jq ".SecurityGroups[0]" | xargs echo )

👉 Then we need to open the TCP port 2049 for the security group of the VPC



vpc_sg="$(aws ec2 describe-security-groups  \
 --filters Name=tag:project,Values=tutorial-cluster \
 | jq '.SecurityGroups[].GroupId' | xargs echo)"

👉 Then we need to authorize the TCP/2049 port from the default security group of the VPC



aws ec2 authorize-security-group-ingress \
--group-id $efs_sg \
--protocol tcp \
--port 2049 \
--source-group $vpc_sg \
--region us-west-2

👉 We can now modify the ecs-params.yml to add persistence support:

We use the ID of the EFS volume that has been created on the latest step : fs-5574bd52



version: 1
task_definition:
  ecs_network_mode: bridge
  efs_volumes:
    - name: db_data
      filesystem_id: fs-5574bd52
      transit_encryption: ENABLED

👉 Then we can redeploy our stack:



ecs-cli compose --project-name tutorial  --file docker-compose.yml \
 --debug service up  \
--deployment-max-percent 100 --deployment-min-healthy-percent 0 \
  --region us-west-2 --ecs-profile tutorial \
--cluster-config tutorial --create-log-groups

👉 Et voilà : the stack is operational 🎉 🦄 💪

Summary

💪 We have deployed an ECS-CLI Cluster and launched a docker compose stack

🚀 The next step will be to expose and secure the stack using an AWS Application Load Balancer

The scripts associated with this article is available at

👉 https://github.com/raphaelmansuy/using-ecs-cli-tutorial-01.git

How to add taillwindcss to an existing React project

Raphael MANSUY — Sun, 14 Feb 2021 01:53:17 +0000

How to add taillwindcss to an existing React project

Go to directory of your React project and use yarn or npm to add taillwindcss postcss-cli autoprefixer

Using yarn

yarn add tailwindcss postcss-cli autoprefixer -D

Then type this command in the terminal to create the default configuration

npx tailwind init tailwind.js --full

A taillwind.js file is created in the current directory

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override

Create a postcss.config.js file

touch postcss.config.js

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

Create an assets directory in the src folder

mkdir ./src/assets

Create a file called taillwind.css in ./src/assets

touch ./src/assets/tailwind.css

Type in tailwind.css:

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Modify the package.json file as follows:

"scripts": {
    "start": "yarn watch:css && react-scripts start",
    "build": "yarn build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },

A file called main.css will be generated each time we start the application

Then import the file ./src/assets/main.css in the App.js file (or the root file of the application)

import React from "react";
import ReactDOM from "react-dom";
import './assets/main.css';
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));

How to use live-server as a small development server

Raphael MANSUY — Fri, 12 Feb 2021 02:54:25 +0000

Live-server

https://www.npmjs.com/package/live-server

Live-server is a small development server with live reload capability. Use it for "hacking" your HTML/JavaScript/CSS files, but do not to deploy the final site.

There are two reasons for using this:

AJAX requests don't work with the file:// protocol due to security restrictions, i.e. you need a server if your site fetches content through JavaScript. Having the page reload automatically after changes to files can accelerate development.

How To

Create a directory ./www

mkdir ./wwww

Edit a simple HTML page such as index.html in the ./www directory

<html>
  <header></header>
  <body>
    <h1>This is a simple test</h1>
  </body>
</html>

Run the command live-server to expose the directory

live-server ./www

How to add Tailwind CSS to an existing React project 🙋

Raphael MANSUY — Fri, 12 Feb 2021 02:44:21 +0000

How to add taillwindcss to an existing React project

Go to directory of your React project and use yarn or npm to add taillwindcss postcss-cli autoprefixer

Using yarn

yarn add tailwindcss postcss-cli autoprefixer -D

Then type this command in the terminal to create the default configuration

npx tailwind init tailwind.js --full

A taillwind.js file is created in the current directory

Create a postcss.config.js file

touch postcss.config.js

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

Create an assets directory in the src folder

mkdir ./src/assets

Create a file called taillwind.css in ./src/assets

touch ./src/assets/tailwind.css

Type in tailwind.css:

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Modify the package.json file as follows:

"scripts": {
    "start": "yarn watch:css && react-scripts start",
    "build": "yarn build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },

A file called main.css will be generated each time we start the application

Then import the file ./src/assets/main.css in the App.js file (or the root file of the application)

import React from "react";
import ReactDOM from "react-dom";
import './assets/main.css';
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));

How to add tailwindcss to a simple HTML Project 🍵

Raphael MANSUY — Fri, 12 Feb 2021 02:37:27 +0000

How to add tailwindcss to a simple HTML Project

This article explains how to add Tailwindcss stylesheet to an HTML project. Tailwind CSS is a highly customizable, low-level CSS framework that gives you all the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

To add Taillwind CSS to an HTML project, you can follow these steps:

Initialize a project

yarn init

Install taillwindcss, postcss-cli and autprefixer

yarn add tailwindcss postcss-cli autoprefixer -D

-D option if to save package to your peerDependencies

Create a default configuration file for tailwindcss

npx tailwind init tailwind.js -full

Create a postcss.config.js file

touch postcss.config.js

Edit postcss.config.js and type

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};

Create file tailwind.css as follows

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Use postcss to generate the stylesheet style.css

npx postcss tailwind.css -o style.css

Use style.css in your HTML project

<html>
 <head>
    <link rel="stylesheet" href="style.css"/>
    </head>
 <body>
     <h1>Hello world</h1>
</body>
</html>

Test it with liveserver

yarn add live-server -D

live-server

Deploying Docker containers on AWS ECS 🏗

Raphael MANSUY — Thu, 11 Feb 2021 13:02:58 +0000

Deploy a Docker App to AWS using ECS

AWS proposes two container orchestrations services: ECS and Kubernete.

Well integrated with the AWS ecosystem, ECS is the proprietary version.

What we will build

In this tutorial we will explain how to:

Package and build a node application and package a simple node application with Docker
Create an ECR repository to store our Docker Image
Upload the Docker image to the repository
Create and launch an Elastic Container Cluster (ECR)
Launch our application as a task within the Elastic Container Cluster
Expose and open this application on the internet

Docker is a technology that helps to package and ship applications easily in production.
ECS stands for Elastic Container Service. It is a fully managed container orchestration service
ECR stands for Elastic Container Repository. ECR allows storage of Docker Images on AWS.

Concepts:

A cluster is a logical grouping of hardware resources.
A task is a set of metadata (memory, CPU, port mapping, environmental variables, etc) that describes how a container should be deployed.
Services are responsible for managing advanced configurations such as load balancing

The NodeJS application to deploy

We want to deploy a basic express node application that displays the current time each time the index page is refreshed.

`package.json`

{
  "name": "docker_web_app",
  "version": "1.0.0",
  "description": "Node.js on Docker",
  "author": "Raphaël MANSUY raphael.mansuy+contact@gmail.com>",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

`server.js`

"use strict"

const express = require("express")

// Constants
const PORT = 8080
const HOST = "0.0.0.0"

// App
const app = express()
app.get("/", (req, res) => {
  res.send(`Hello World - ${new Date().toISOString()}`)
})

app.listen(PORT, HOST)
console.log(`Running on http://${HOST}:${PORT}`)

https://nodejs.org/en/docs/guides/nodejs-docker-webapp/

Package the node.js application with a Docker file

In the same directory of this application, we can create a Dockerfile that explains how to build a container with this application:

`Dockerfile`

FROM node:14
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

RUN npm install
# If you are building your code for production
# RUN npm ci --only=production

# Bundle app source
COPY . .

EXPOSE 8080

CMD [ "node", "server.js" ]

This file defines the following steps:

start from the node:14 image
create a directory /usr/src/ap inside the container
copy the local file with pattern package*.json in the container
run npm install
copy all the local files to the container
expose the port 8080 inside the container
run node with the file server.js when the container starts

Building the image

Run the following command to build an image with the tag node-web-app

docker build -t node-web-app .

Running the image

Run the following command to start the application in detached mode:

docker run -p 80:8080 -d node-web-app

The container is now running and the 8080 port within the container is exposed as the 80 port on your local machine.

We can now test the application with the CURL command

curl http://localhost:80

Results:

Hello World - 2021-02-11T05:06:12.739Z

We are now ready to deploy this container to the cloud.

Connect to AmazonECR

Prerequisites

aws cli must be installed
your aws profile must be configured and have ECS admin rights enabled

Run the following command:

aws ecr get-login-password --region us-west-2 | docker login

If you have access, you should have this displayed on the terminal:

Authenticating with existing credentials...
Login Succeeded

Create your AmazonECR in the AWS Console

Connect to the AWS Console and to the ECS Administration screen to create a new repository.

Click on Create Repository and choose testrepository as a name for your repository:

The ECR repository has now been created:

Upload the image on AWS ECR

Click now on the push commands button on the repository screen:

Copy and execute each command on your machine:

connect:

aws ecr get-login-password --region us-west-2 | docker login --username AWS --password-stdin 3680199100XXX.dkr.ecr.us-west-2.amazonaws.com

build:

docker build -t testrepository .

build:

docker tag testrepository:latest 3680199100XXX.dkr.ecr.us-west-2.amazonaws.com/testrepository:latest

push to ECR:

docker push 3680199100XXX.dkr.ecr.us-west-2.amazonaws.com/testrepository:latest

The image is now published and available on ECR ready to be deployed:

If you look at AmazonECR, repositories we can see the newly created image.

Copy the image URI: we need to keep this to create a task definition for the following steps.

368019910004.dkr.ecr.us-west-2.amazonaws.com/testrepository:latest

Create an ECS Cluster

Go to the ECS home page and click on the create cluster button:

Choose EC2 Linux + Networking and then click next:

Then enter the following information:

name of the cluster: ecs01
EC2 instance type: t3-micro
Number of instances: 1

Then choose:

Default VPC
Auto assign IP: Enabled
Security group: default
Choose one of the subnet

And then next press Enter

Create a new Task definition

A task is a set of metadata (memory, CPU, port mapping, environmental variables, etc) that describes how a container should be deployed.

Click on new Task definition

Choose EC2

Then next

Choose NodeWebAppTask for the name of the task definition.

Enter 128for memory size.

Click Add Container:

Add the name of the container: NodeWebApp
Set the image URI that we have saved to add the end of the add image step
Set the port mappings 80:8080

Click create.

Then go to Run Task

The task is now running:

If we click on the container instance:

We can modify the security group associated with the instance to open the port 80

Add 80 to the inbound rule for the security group:

If we try now to open the url: http://ec2-52-38-113-251.us-west-2.compute.amazonaws.com:

Et voilà

Our cluster and node application is now deployed.

🎉 🎉 🎉

Credits

The picture was taken in February 2021 on the top of Peak Victoria in Hong Kong.

Display a GitHub repo in VSCode without cloning it 💪

Raphael MANSUY — Wed, 10 Feb 2021 02:31:05 +0000

github1s One second to read GitHub code with VS Code

Github1s stands for One second to read GitHub code with VS Code

Today I discovered a small project on GitHub that allows you to easily read a git repository in VSCode without cloning it.

👉 Github1s allows you to read a GitHub project with an online version of VSCode.

👉 You just need to add 1s after GitHub and press Enter in browser address bar for any repository you want to read.

For example, for the repository https://github.com/matchabot/matcha-bot

You can add 1s to GitHub and the address becomes https://github1s.com/matchabot/matcha-bot

The project is available at https://github.com/conwnet/github1s

Enjoy 🎉

Credits for the picture
Yancy Min

For github1s
conwnet

Boost your productivity by creating your own CLI command with typescript and OCLIF (Part 2) 🚀

Raphael MANSUY — Wed, 20 Jan 2021 05:34:44 +0000

Context

OCLIF is a wonderful framework that makes it easy to develop a professional CLI command. Let's see how we can create a CLI command that will delight your end-user in less than 3 minutes.

The final project is published on https://github.com/raphaelmansuy/matcha-stock

Add a 🌟 on the project if you have enjoyed this tutorial ❤️

$ matcha-stock -symbol=MSFT

Lets go ! 🚀

Create a new command with OCLIF (30 seconds ⏰)

npx oclif single matcha-stock
cd matcha-stock
./bin.run

Result:

OCLIF generates a starting project for my command.

❯ npx oclif single matcha-stock

     _-----_     ╭──────────────────────────╮
    |       |    │      Time to build a     │
    |--(o)--|    │  single-command CLI with │
   `---------´   │  oclif! Version: 1.16.1  │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

 npm package name matcha-stock
? command bin name the CLI will export matcha-stock
? description A command to get stocks information
? author Raphael MANSUY @raphaelmansuy
? version 0.0.1
? license MIT
? Who is the GitHub owner of repository (https://github.com/OWNER/repo) raphaelmansuy
? What is the GitHub name of repository (https://github.com/owner/REPO) matcha-stock
? Select a package manager yarn
? TypeScript Yes
? Use eslint (linter for JavaScript and Typescript) Yes
? Use mocha (testing framework) Yes

Code created by OCLIF

├── README.md
├── bin
│   ├── run
│   └── run.cmd
├── package.json
├── src
│   └── index.ts
├── test
│   ├── index.test.ts
│   ├── mocha.opts
│   └── tsconfig.json
├── tsconfig.json
└── yarn.lock

Content of src/index.ts

import { Command, flags } from "@oclif/command"

class MatchaStock extends Command {
  static description = "describe the command here"

  static flags = {
    // add --version flag to show CLI version
    version: flags.version({ char: "v" }),
    help: flags.help({ char: "h" }),
    // flag with a value (-n, --name=VALUE)
    name: flags.string({ char: "n", description: "name to print" }),
    // flag with no value (-f, --force)
    force: flags.boolean({ char: "f" })
  }

  static args = [{ name: "file" }]

  async run() {
    const { args, flags } = this.parse(MatchaStock)

    const name = flags.name ?? "world"
    this.log(`hello ${name} from ./src/index.ts`)
    if (args.file && flags.force) {
      this.log(`you input --force and --file: ${args.file}`)
    }
  }
}

export = MatchaStock

✅ OCLIF has created a template class that represents the skeleton of my command.

Starting from the generated code I can:

💪 add flags such as --symbol
🏗 modify the implementation of the run() method

Add the support of the flag `--symbol` (40 seconds ⏰)

import { Command, flags } from "@oclif/command"

class MatchaStock extends Command {
  static description =
    "A simple command to retrieve stock information from Yahoo Finance"

  static flags = {
    // add --version flag to show CLI version
    version: flags.version({ char: "v" }),
    help: flags.help({ char: "h" }),
    // Add Support of of -symbol flag
    // flag with a value (-s, --symbol=VALUE)
    symbol: flags.string({
      char: "s", // Alias for my flag
      description: "stock symbol to retrieve", // A description of the symbol flag
      required: true, // The flag symbol is required 👉 The command will abort of the flag is not provide
      helpValue: "MSFT" // An example of flag value (MSFT is the symbol for Microsoft)
    })
  }

  async run() {
    const { args, flags } = this.parse(MatchaStock)

    this.log(`Get Symbol=${flags.symbol} from ./src/index.ts`)
  }
}

export = MatchaStock

I can now test my command

✅ With no flag

./bin

result:

 ›   Error: Missing required flag:
 ›    -s, --symbol SYMBOL  stock symbol to retrieve
 ›   See more help with --help

✅ With flag -help

./bin -help

result:

❯ ./bin/run -help
A simple command to retrieve stock information from Yahoo Finance

USAGE
\$ matcha-stock

OPTIONS
-h, --help show CLI help
-s, --symbol=MSFT (required) stock symbol to retrieve
-v, --version show CLI version

✅ With flag --symbol

./bin --symbol GOOG

result:

❯ ./bin/run  -symbol=GOOG
Get Symbol=ymbol=GOOG from ./src/index.ts

Add the business logic (60 seconds ⏰)

👉 Add axios as our http library.

yarn add axios

👉 Add the file ./src/getStock.ts

import axios from "axios"

export const getSingleStockInfo = async (stock: string) => {
  if (!stock) {
    throw new Error("Stock symbol argument required")
  }

  if (typeof stock !== "string") {
    throw new Error(
      `Invalid argument type for stock argument. Required: string. Found: ${typeof stock}`
    )
  }

  const url = `https://query1.finance.yahoo.com/v7/finance/quote?symbols=${stock}`

  const res = await axios.get(url)

  const { data } = res
  if (
    !data ||
    !data.quoteResponse ||
    !data.quoteResponse.result ||
    data.quoteResponse.result.length === 0
  ) {
    throw new Error(`Error retrieving info for symbol ${stock}`)
  }

  const quoteResponse = data.quoteResponse.result[0]

  return quoteResponse
}

👉 Modify the src/index.ts file such as:

import { Command, flags } from "@oclif/command"
import { getSingleStockInfo } from "./getStocks"
class MatchaStock extends Command {
  static description = `A simple command to retrieve stock information from Yahoo Finance.\nA simple command to retrieve stock information from Yahoo Finance.\n\n Created with ❤️ by Elitizon (https://www.elitizon.com)`

  static flags = {
    // add --version flag to show CLI version
    version: flags.version({ char: "v" }),
    help: flags.help({ char: "h" }),
    // Add Support of of -symbol flag
    // flag with a value (-s, --symbol=VALUE)
    symbol: flags.string({
      char: "s", // Alias for my flag
      description: "stock symbol to retrieve", // A description of the symbol flag
      required: true, // The flag symbol is required 👉 The command will abort of the flag is not provide
      helpValue: "MSFT" // An example of flag value (MSFT is the symbol for Microsoft)
    })
  }

  async run() {
    const { flags } = this.parse(MatchaStock)
    const res = await getSingleStockInfo(flags.symbol)
    // Print the result as tabular
    console.table(res)
  }
}

export = MatchaStock

👉 Test the command

❯ ./bin/run  -s=MSFT
┌───────────────────────────────────┬─────────────────────────┐
│              (index)              │         Values          │
├───────────────────────────────────┼─────────────────────────┤
│             language              │         'en-US'         │
│              region               │          'US'           │
│             quoteType             │        'EQUITY'         │
│          quoteSourceName          │     'Delayed Quote'     │
│            triggerable            │          true           │
│             currency              │          'USD'          │
│    firstTradeDateMilliseconds     │      511108200000       │
│             priceHint             │            2            │
│            marketState            │       'POSTPOST'        │
│      postMarketChangePercent      │       0.31417143        │

Publish the command to NPM.org (30 seconds ⏰)

npm publish

✅ The package is now published on npm.org at https://www.npmjs.com/package/matcha-stock

👉 You have to change the name of the package if the package is already registered on NPM.
👉 The package version must be updated each time you publish

Test your command (10 seconds ⏰)

npm install -g matcha-stock
matcha-stock -s=MSFT

Conclusion

OCLIF is an impressive framework. With OCLIF it's easy to create:

Single-Command CLI
Multi-command CLI

Main features:

🕺 Flag/Argument parsing
🚀 Super Speed
🏗 Include a CLI generator to speed the development of commands
- Testing Helpers
- Auto-Documentation
- Plugins
- Hooks

OCLIF is available on Github and maintained by Matt Graham, Paul Elliott and Chris Castle and funded by Heroku 🎉

A nextjs template with typescript, tailwindcss and storybook support 🏗

Raphael MANSUY — Sun, 17 Jan 2021 11:30:59 +0000

The configuration of NextJS, TailwindCSS and Storybook can be complex 🏗 .

I have created a starter template to begin your journey with NextJS, typescript, tailwindcss and Jest 🎉 🦄

This project was bootstrapped with npx create-next-app and I have added support for:

✅ Typescript
✅ Taillwindcss
✅ Storybook
✅ Jest
✅ Import SVG as React Component (SVGR) (Thanks to @neoziro)

You are welcome to contribute to this project to make it better. Contact me at contact@elitizon.com

This template is available at:

https://github.com/elitizon/nextjs-tailwind-storybook

To use this template:

clone it
remove the .git folder
git init .
git add .
git commit -m "First commit"

Add a star 🌟 on the project if you like it 🙏

Install all the dependencies

👉 `yarn install`

Available Scripts

In the project directory, you can run:

👉 `yarn dev`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

👉 `yarn storybook`

Runs storybook.

Open http://localhost:6006 to view it in the browser.

👉 `yarn test`

Launches the test runner in the interactive watch mode.\
See the section about running tests for more information.

If you get an error that contained this line:

Use this command:

brew install watchman

👉`yarn build`

Builds the app for production to the .next folder.\
It correctly bundles NextJS in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

👉 Result of execution

yarn run v1.22.10
$ cross-env NODE_ENV=production next build
info  - Creating an optimized production build...


   TailwindCSS

   -----------

   ✅ purgeEnabled=true

info  - Compiled successfully
info  - Collecting page data...
info  - Generating static pages (0/2)
info  - Generating static pages (2/2)
info  - Finalizing page optimization...

Page                                                           Size     First Load JS
┌ ○ /                                                          1.55 kB        64.3 kB
├   /_app                                                      0 B            62.7 kB
├ ○ /404                                                       3.46 kB        66.2 kB
└ λ /api/hello                                                 0 B            62.7 kB
+ First Load JS shared by all                                  62.7 kB
  ├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.d4f570.js  13.1 kB
  ├ chunks/framework.abffcf.js                                 41.8 kB
  ├ chunks/main.1fee81.js                                      6.62 kB
  ├ chunks/pages/_app.1315ea.js                                523 B
  ├ chunks/webpack.50bee0.js                                   751 B
  └ css/ff7ad52a1259dc7bd680.css                               1.88 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

Done in 9.00s.

See the section about deployment for more information.

👉`yarn start`

Starts a server with the output for the yarn build command.

yarn build must be executed before to use this command.

👉`yarn export`

Export the output of the yarn build command execution to the ./out directory.

yarn build must be executed before to use this command.

👉`npx serve ./out`

To launch a static server from the ./out directory. This command can be useful to control the outcome of yarn export.

yarn build and yarn export must be executed before using this command.

Learn More

You can learn more in the NextJS documentation.

To learn React, check out the React documentation.

To learn how to develop UIs with component and design systems with Storybook, check out the Learn Storybook documentation

Created with ❤️ by Raphael

Boost your productivity by creating your own CLI command with typescript (Part 1) 🔥

Raphael MANSUY — Sun, 10 Jan 2021 06:36:23 +0000

Context

Your daily productivity can be greatly improved 🚀 if you can automate all the tasks you used to do.

Thanks to node, npm, npx and typescript: creating a CLI command and making it available on your system or globally has never been easier.

As an example, we will create a CLI command to get a stock value for a symbol. This command will be called pique-sous (as a reference to the Disney character "Uncle $crooge" in french 😄 🦆)

$ pique-sous MSFT SFIX GOOG

Result:

Retrieving stock information for MSFT at date 2021-01-10T01:37:57.574Z
{
  language: 'en-US',
  region: 'US',
  quoteType: 'EQUITY',
  quoteSourceName: 'Delayed Quote',
  regularMarketOpen: 218.68,
  exchange: 'NMS',
  shortName: 'Microsoft Corporation',
  longName: 'Microsoft Corporation',
  messageBoardId: 'finmb_21835',
  exchangeTimezoneName: 'America/New_York',
  exchangeTimezoneShortName: 'EST',
  gmtOffSetMilliseconds: -18000000,
  market: 'us_market',
  esgPopulated: false,
  displayName: 'Microsoft',
  symbol: 'MSFT'
}

The final results in available at https://github.com/raphaelmansuy/pique-sous and published at https://www.npmjs.com/package/pique-sous.

This article was originally published at https://www.elitizon.com/

🏗 6 Easy steps to make it happen !

Step1 : creating a basic typescript project

✅ Create a directory called pique-sous

$ mkdir ./pique-sous

✅ create a file index.ts under pique-sous

$ cd ./pique-sous
$ touch ./index.ts

As a result, you should have:

pique-sous
└── index.ts

✅ Edit the index.ts and add a simple command for testing such as:

const currentDateAndTime = new Date().toIsoString()

console.log(currentDateTime)

✅ Execute and test the file with ts-node


npx ts-node index.ts

npx is a tool from the NPM registry allowing executing commands without installation
ts-node is a node version supporting typescript directly

As a result you should have something like this:

2021-01-10T02:37:49.683Z

Step2 : make the file executable

✅ Modify the index.ts file such as

#!/usr/bin/env npx ts-node

const currentDateAndTime = new Date().toIsoString()

console.log(currentDateTime)

The first line #!/usr/bin/env npx ts-node specifies that the file must be executed by npx and ts-node

✅ Add the executable permission to the index.ts file

$ chmod u+x ./index.ts

✅ Test the file

$ ./index.ts

Results:

$ ./index.ts
$ 2021-01-10T03:24:43.190Z

Step 3: package the project

✅ Add package.json file

Inside the directory use the npm command to create a package.json file

$ npm init

Answer the questions:

package name: (pique-sous) 
version: (1.0.0) 
description: A simple package
entry point: (index.js) bin/index.js
test command: 
git repository: 
keywords: 
author: raphael mansuy
license: (ISC) MIT
About to write to /Users/raphaelmansuy/Projects/Github/raphaelmansuy/ElitizonWeb/data/blog/2021/01-09-how-to-create-a-cli-command-with-typescript/steps/step01/pique-sous/package.json:

{
  "name": "pique-sous",
  "version": "1.0.0",
  "description": "A simple package",
  "main": "bin/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "raphael mansuy",
  "license": "MIT"
}

✅ Configure compilation from typescript to javascript

Create a file called tsconfig.json as follow:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2017",
    "lib": ["es2015"],
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "bin",
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*", "src/types/*"]
    },
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "include": ["src/**/*"]
}

✅ Create a src directory and move the index.ts in the ./src directory

$ mkdir ./src
$ mv ./index.ts ./src

Results:

.
├── package.json
├── src
│   └── index.ts
└── tsconfig.json

1 directory, 3 files

✅ Add typescript support for the compilation

$ yarn add typescript @types/node -D

Result:

yarn add v1.22.10
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
├─ @types/node@14.14.20
└─ typescript@4.1.3
info All dependencies
├─ @types/node@14.14.20
└─ typescript@4.1.3
✨  Done in 1.44s.

The package.json should look like this:

{
  "name": "pique-sous",
  "version": "1.0.0",
  "description": "A simple package",
  "main": "bin/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "raphael mansuy",
  "license": "MIT",
  "devDependencies": {
    "@types/node": "^14.14.20",
    "typescript": "^4.1.3"
  }
}

✅ Edit the package.json as follow

👉 add "bin" entry with value "bin/index.js"
👉 add "build" command in "scripts"

{
  "name": "pique-sous",
  "version": "1.0.0",
  "description": "A simple package",
  "main": "bin/index.js",
  "bin": "bin/index.js",
  "scripts": {
    "build": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "raphael mansuy",
  "license": "MIT",
  "devDependencies": {
    "@types/node": "^14.14.20",
    "typescript": "^4.1.3"
  }
}

✅ Edit the index.ts as follow

👉 replace npx ts-node by node because the result of the compilation by typescript compiler will be a javascript file

#!/usr/bin/env node

const currentDateTime = new Date().toISOString()

console.log(currentDateTime)

✅ Build

yarn build

Results:

yarn run v1.22.10
$ tsc
✨  Done in 1.66s.

The bin directory contains now the outcome of the compilation process:

$ tree ./bin
./bin
├── index.js
└── index.js.map

0 directories, 2 files

✅ Make ./bin/index.js executable

chmod u+x ./bin/index.js

✅ Test the result

./bin/index.js

Result:

❯ pique-sous
2021-01-10T04:33:08.303Z

Step 4: publish the command locally

🔥 The command can now be made available for use locally:

$ yarn link --global

Result:

yarn link v1.22.10
success Registered "pique-sous".
info You can now run `yarn link "pique-sous"` in the projects where you want to use this package and it will be used instead.
✨  Done in 0.04s.

🎉 💪 We can now use the command from everywhere

❯ pique-sous
2021-01-10T05:45:10.586Z

🌈 🙈 We can unregister the command with:

$ yarn unlink --global

Step 5: publish the cli command on www.npmjs.org

👉 First, you need to signup and create an account on https://www.npmjs.com/
👉 🧨 You need to be sure that the name of your package is not taken on npmjs.com, the name of the package in the package.json must be modified it the name already exists on npm.

Type the following command in the base directory:

$ npm publish

Enter your npm credentials

Result:

npm notice 
npm notice 📦  pique-sous@1.0.0
npm notice === Tarball Contents === 
npm notice 133B bin/index.js    
npm notice 198B bin/index.js.map
npm notice 372B package.json    
npm notice 100B src/index.ts    
npm notice 364B tsconfig.json   
npm notice === Tarball Details === 
npm notice name:          pique-sous                              
npm notice version:       1.0.0                                   
npm notice filename:      pique-sous-1.0.0.tgz                    
npm notice package size:  810 B                                   
npm notice unpacked size: 1.2 kB                                  
npm notice shasum:        6c8aea7b85c125a2d9dbbeec81d15ef94b07240a
npm notice integrity:     sha512-ozbnViT18DSUI[...]FquBcXBSV8f2g==
npm notice total files:   5                                       
npm notice

Your command is now published on npm and be installed or executed from everywhere.

Example:

Execution without formal installation:

npx pique-sous

Or global installation:

npm install -g pique-sous

Step 6: Add Yahoo finance get stocks information

✅ Install axios library

yarn add axios

✅ Add file ./src/getStock.ts

import axios from "axios"

export const getSingleStockInfo = async (stock: string) => {
  if (!stock) {
    throw new Error("Stock symbol argument required")
  }

  if (typeof stock !== "string") {
    throw new Error(
      `Invalid argument type for stock argument. Required: string. Found: ${typeof stock}`
    )
  }

  const url = `https://query1.finance.yahoo.com/v7/finance/quote?symbols=${stock}`

  const res = await axios.get(url)

  const { data } = res
  if (
    !data ||
    !data.quoteResponse ||
    !data.quoteResponse.result ||
    data.quoteResponse.result.length === 0
  ) {
    throw new Error(`Error retrieving info for symbol ${stock}`)
  }

  const quoteResponse = data.quoteResponse.result[0]

  return quoteResponse
}

✅ Add file "./src/getVersion.ts"

import * as fs from "fs"
import * as Path from "path"

export const getVersion = () => {
  const packageJSONPath = Path.resolve(__dirname, "../package.json")
  const content = fs.readFileSync(packageJSONPath, { encoding: "utf8" })
  const config = JSON.parse(content)
  return config.version
}

✅ Modify ./src/index.ts

#!/usr/bin/env node

import { getSingleStockInfo } from "./getStock"
import { getVersion } from "./getVersion"

/**
 *  return the arguments of the command except node and index.ts
 */
const getArgs = () => {
  // We retrieve all the command argumnts except the first 2
  const args = process.argv.slice(2)
  return args
}

/**
 * Command Help
 */
const printCommandHelp = () => {
  const version = getVersion()
  const help = `
pique-sous (version: ${version})

A simple command to retrieve stock information.

Example:

$ pique-sous MSFT SFIX GOOG

`
  console.log(help)
}

const symbols = getArgs()

// Print help if no arguments
if (symbols.length === 0) {
  printCommandHelp()
  getVersion()
  process.exit(0)
}

const now = new Date().toISOString()

// Call the yahoo API for each symbol and display the result on the console
symbols.forEach((symbol) => {
  console.log(`Retrieving stock information for ${symbol} at date ${now}`)
  getSingleStockInfo(symbol).then(console.log)
})

✅ Increment the version number in package.json to 1.1.0 ("version")

{
  "devDependencies": {
    "@types/axios": "^0.14.0",
    "@types/node": "^14.14.20"
  },
  "name": "pique-sous",
  "version": "1.1.0",
  "description": "A simple command to retrieve stock information",
  "main": "./bin/index.js",
  "dependencies": {
    "axios": "^0.21.1",
    "typescript": "^4.1.3"
  },
  "bin": "bin/index.js",
  "scripts": {
    "build": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "cli",
    "node",
    "typescript",
    "npm",
    "stock",
    "yahoo finance"
  ],
  "contributors": [
    "raphaelmansuy"
  ],
  "repository": {
    "url": "https://github.com/raphaelmansuy/pique-sous.git",
    "type": ""
  },
  "author": {
    "email": "raphael.mansuy@gmail.com",
    "name": "raphaelmansuy"
  },
  "license": "MIT"
}

✅ Build a new version

$ yarn build

✅ Test locally

Publish the component:

$ yarn link --global

✅ Execute

$ pique-sous MSFT

Result:

Retrieving stock information for MSFT at date 2021-01-10T06:11:41.305Z
{
  language: 'en-US',
  region: 'US',
  quoteType: 'EQUITY',
  quoteSourceName: 'Delayed Quote',
  triggerable: true,
  currency: 'USD',
  exchange: 'NMS',
  shortName: 'Microsoft Corporation',
  longName: 'Microsoft Corporation',
  messageBoardId: 'finmb_21835',
  exchangeTimezoneName: 'America/New_York',
  exchangeTimezoneShortName: 'EST',
  gmtOffSetMilliseconds: -18000000,

  ...

🔥🔥🔥 The package can now be republished on npm 💪.

Postgres up and running in less than 3 minutes with docker-compose 🚀

Raphael MANSUY — Fri, 08 Jan 2021 02:47:30 +0000

Run Postgres using "docker-compose"

Create a local directory called "postgres"

$ mkdir postgres
$ cd ./postgres

Create a "pgdata" directory inside "postgres" directory

$ cd ./postgres
$ mkdir ./pgdata

👉 As a docker container is "stateless" we must create the directory "pgdata" to keep the data when the container is shut down.

Create a file called "docker-compose.yml" in "postgres" directory

$ touch ./docker-compose.yml

📄 docker-compose.yml file

version: "3.8"
services:
  db:
    image: "postgres:13"
    ports:
      - "5432:5432"
    volumes:
      - ./pgdata:/var/lib/postgresql/data
    environment:
      - POSTGRES_USER=dbuser
      - POSTGRES_PASSWORD=admin2021
      - POSTGRES_DB=todoapp

This file creates a host called "db" from a Postgres version 13 image. The TCP port 5432 (postgres) of the host "db" is exposed externally as TCP port 5432.
The local directory "./pgdata" is mapped as "/var/lib/postprogressql/data" inside the "db" host
The username, password and database name are exposed as an environment variable

Run the container in detached mode

$ docker-compose up -d

List of running docker containers

$ docker-compose ps

Run command inside the container

$ docker-compose run db bash

Connect postgres inside the host

$ psql  --host=db --username=dbuser --dbname=todoapp

Connect to "postgres" from outside

$ psql --host=localhost --username=dbuser --dbname=todoapp

stop container

$ docker-compose down

Et voilà 🎉 !

How to create and publish a typescript module on npmjs.com

Raphael MANSUY — Sun, 06 Sep 2020 09:49:30 +0000

This tutorial explains

How to configure a typescript package from zero
How to add the support of Jest for the unit tests
How to generate the tests coverage
How to publish the library in npmjs.com

Let's create a simple library to validate emails and IPv4 addresses. The name of this library will be xanthe.

️Xanthe means “golden” or “yellow” in Greek. Xanthe is an exotic epithet of Demeter, goddess of the harvest and agriculture 🇬🇷🧚‍♀

Create a package.json file

{
  "name": "xanthe",
  "version": "0.0.1",
  "author": {
    "email": "contact@elitizon.com",
    "name": "elitizon"
  },
  "license": "MIT",
  "description": "A library to validate common formats such as emails, numbers, phone numbers, and IP addresses",
  "contributors": [
    "raphaelmansuy"
  ],
  "keywords": [
    "format",
    "validator",
    "email validation",
    "IP address validation"
  ],
  "dependencies": {},
  "devDependencies": {}
}

Install typescript as a development dependencies

yarn add -D typescript @types/node

@types/node contains type definitions for Node.js
typescript contains the typescript compiler

Create the src and test directory

mkdir src

mkdir tests

Install a testing environment

Install Jest as a development dependency

Jest is a testing library developed by Facebook.

yarn add -D jest ts-jest

Create a jest.config.js file to configure Jest

module.exports = {
  transform: {'^.+\\.ts?$': 'ts-jest'},
  testEnvironment: 'node',
  testRegex: '/tests/.*\\.(test|spec)?\\.(ts|tsx)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
}

All the files ending by .ts will be handled by ts-jest.
The test environment is nodejs
The test files are contained in the ./tests directory and must have .test. or .spec. in the filename and must end by .ts or .tsx

Create a script section in the package.json file

  "scripts": {
    "build": "tsc",
    "test": "yarn build && jest",
    "coverage": "jest --coverage"
  },

build: invoke the typescript transpiler
test: build and invoke the tests
coverage: generate the tests coverage in the coverage directory

Create a tsconfig.json file to configure typescript

{
  "compilerOptions": {
    "target": "es5" ,
    "module": "commonjs",
    "outDir": "./build",
    "strict": true,
    "esModuleInterop": true ,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true
  },
  "exclude": ["node_modules", "build", "tests"]
}

The build command will generate the CommonJS files in the ./build/ directory

Creation of validations functions

Create a file email.ts in ./src/validators/ directory


/**
 * @param email to validate. No spaces or tab are allowed at the start or at the end of the string
 * @returns true of false if the email is valid or not
 */
function isEmail(email: string) : boolean {
  // An email address is a word followed by an unique @ followed by a word then a . followed by a word with a length of 2 to 3 characters
  const regEx = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
  const result = regEx.test(email)
  return result
}


export {
  isEmail
}

Create a file ipV4.js in ./src/validators/ directory


/**
 * @param ip to validate. (No spaces or tab are allowed at the start or at the end of the string)
 * @returns true of false if the IP is valid or not
 */
function isIPv4(ip: string) : boolean {
  // An ip V4 address has the form of X.X.X.X
  // Where X is a number between 0 to 255
  const regEx = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
  const result = regEx.test(ip)
  return result
}


export {
  isIPv4
}

Create a file index.ts in ./src/

import { isEmail } from "./validators/email"
import { isIPv4 } from "./validators/ipv4"

export { isEmail, isIPv4 }

Our module is now nearly ready. Let's create the unit tests.

Creation of unit tests

Create an email.test.ts in ./src/tests directory

import { isEmail } from "../src/index"

test("email luc@perdu.com valid", () => {
  expect(isEmail("luc@perdu.com")).toBe(true)
})

test("Empty string not valid", () => {
  expect(isEmail("")).toBe(false)
})

test("No double @ in an email", () => {
  expect(isEmail("martin@toto@titi.com")).toBe(false)
})

test("not trimmed email to be false", () => {
  expect(isEmail(" luc@perdu.com ")).toBe(false)
})

Create the ipV4.test.ts in ./src/tests/ directory

import { isIPv4 } from "../src"

test("192.168.0.1 is valid", () => {

    expect(isIPv4("192.168.0.1")).toBe(true)
})

test("1920.168.0.1 is not valid", () => {

  expect(isIPv4("1920.168.0.1")).toBe(false)
})

test("192.1682.0.1 is not valid", () => {

  expect(isIPv4("192.1682.0.1")).toBe(false)
})

test("192.168.256.1 is not valid", () => {

  expect(isIPv4("192.168.256.1")).toBe(false)
})

test("192.168.255.500 is not valid", () => {

  expect(isIPv4("192.168.255.500")).toBe(false)
})

test("192.168.255.255 is valid", () => {
  expect(isIPv4("192.168.255.255")).toBe(true)
})

test("192.168.X.255 is valid", () => {
  expect(isIPv4("192.168.X.255")).toBe(false)
})

Let's compile and tests

yarn build

yarn test

Execute the tests coverage

yarn coverage

A coverage has been generated with all the information about the tests coverage

Creation of git repository

Create of a .gitignore file

node_modules
build
coverage

run git init

git init

add the files

git *

commit the files

git commit -m "First commit"

Publish the file to a Github repository

An empty Github project must be created before publishing.

The file package.json need to be updated as follow:

  "repository": {
    "url": "https://github.com/myorganisation/xanthe.git",
    "type": ""
  },

myorganisation represents your Github account

We can now set up the Github project as a remote representation of the local project and push the local master branch to the remote server (origin).

git remote add origin`https://github.com/myorganisation/xanthe.git
git branch -M master
git push -u origin master

Publish to npmjs.org

An account must be created before publishing a package in the npm registry.

Once the account is created you need to log into

npm login

Enter your username, password, and email address registered on npmjs.org
Add a new file .npmignore to exclude some files from the publication

README.md
TUTORIAL.md
jest.config.json
tests/

We can now publish it to the library at npmjs.org

yarn publish

A few questions will be asked such as the new version number 0.0.1

And "voilà". Our components are published and visible 🥳

DEV Community: Raphael MANSUY

10 minutes to deploy a Docker compose stack on AWS ECS illustrated with Hasura and Postgres ⏰

Introduction

Target architecture

Docker stack

7 Steps

Step1 : Install ecs-cli

Configure ecs-cli 👩‍🌾

Step2 : Creation of an ECS-Cluster 🚀

Step3 : Adding observability 🤩

👉 Deploying a more complex stack

Step 4: Add a persistent layer to my cluster

Summary

How to add taillwindcss to an existing React project

How to add taillwindcss to an existing React project

How to use live-server as a small development server

Live-server

How To

Edit a simple HTML page such as index.html in the ./www directory

Run the command live-server to expose the directory

How to add Tailwind CSS to an existing React project 🙋

How to add taillwindcss to an existing React project

How to add tailwindcss to a simple HTML Project 🍵

How to add tailwindcss to a simple HTML Project

To add Taillwind CSS to an HTML project, you can follow these steps:

Initialize a project

Create a default configuration file for tailwindcss

Create a postcss.config.js file

Edit postcss.config.js and type

Create file tailwind.css as follows

Use postcss to generate the stylesheet style.css

Use style.css in your HTML project

Test it with liveserver

Deploying Docker containers on AWS ECS 🏗

Deploy a Docker App to AWS using ECS

What we will build

The NodeJS application to deploy

package.json

server.js

Package the node.js application with a Docker file

Dockerfile

Building the image

Running the image

Connect to AmazonECR

Create your AmazonECR in the AWS Console

Upload the image on AWS ECR

Create an ECS Cluster

Create a new Task definition

Et voilà

Credits

Display a GitHub repo in VSCode without cloning it 💪

github1s One second to read GitHub code with VS Code

Boost your productivity by creating your own CLI command with typescript and OCLIF (Part 2) 🚀

Context

Lets go ! 🚀

Create a new command with OCLIF (30 seconds ⏰)

Add the support of the flag --symbol (40 seconds ⏰)

Add the business logic (60 seconds ⏰)

Publish the command to NPM.org (30 seconds ⏰)

Test your command (10 seconds ⏰)

Conclusion

A nextjs template with typescript, tailwindcss and storybook support 🏗

To use this template:

Install all the dependencies

👉 yarn install

Available Scripts

👉 yarn dev

👉 yarn storybook

👉 yarn test

👉yarn build

👉yarn start

👉yarn export

👉npx serve ./out

Learn More

Boost your productivity by creating your own CLI command with typescript (Part 1) 🔥

Context

🏗 6 Easy steps to make it happen !

Step1 : creating a basic typescript project

Step2 : make the file executable

Step 3: package the project

Step1 : Install `ecs-cli`

Configure `ecs-cli` 👩‍🌾

`package.json`

`server.js`

`Dockerfile`

Add the support of the flag `--symbol` (40 seconds ⏰)

👉 `yarn install`

👉 `yarn dev`

👉 `yarn storybook`

👉 `yarn test`

👉`yarn build`

👉`yarn start`

👉`yarn export`

👉`npx serve ./out`