DEV Community: Titouan B

🐯 Local HTTPS for NestJS app (api) in Nx workspace

Titouan B — Thu, 08 Oct 2020 16:02:39 +0000

Hey, welcome back in this post series where we will see how to setup a full HTTPS development environment.

In this post, we will setup local HTTPS for NestJS app (api) in Nx workspace.

If you don't have generated your certificate with mkcert, I recommand you read the first post of this series. → link

What is Nx?

Nx is a set of extensible dev tools for monorepos, which helps you manage your projects at any scale. It provides great integration with major framework such as Angular, React, Nestframework, Express, ionic, ...

💡 Nx use the angular-cli under the hood!

Setting up the project workspace

Creating a new empty workspace

$ npx create-nx-workspace
npx : 179 installé(s) en 7.547s
? Workspace name (e.g., org name)     myorg
? What to create in the new workspace empty             [an empty workspace with a layout tha
t works best for building apps]
? CLI to power the Nx workspace       Nx           [Recommended for all applications (React, 
Node, etc..)]
...

🗒️ If you already have an Nx workspace, you can skip these steps.

Then, we will install the NestJS schematics:

npm install -D @nrwl/nest

Now, we will generate a new NestJS application called nest-api (change the name with your api name).

nx generate @nrwl/nest:application --name=nest-api

Start serving your app with nx serve nest-api 🎉

🗒️ Look at the NestJS Nx plugin documentation to see more options → here

Setting up HTTPS

From the first post of this series, I will assume that you have generated your certificate at location myorg/dev-stack/certs/local-cert.pem & myorg/dev-stack/certs/local-key.pem. Don't hesitate to go back to the first post to use mkcert and generate your certificate.

We will edit the NestJS server to handle HTTPS requests.

Open and edit myorg/apps/nest-api/src/main.ts

import { Logger } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import * as fs from 'fs';
import * as path from 'path';

import { AppModule } from './app/app.module';

async function bootstrap() {
  const ssl = process.env.SSL === 'true' ? true : false;
  let httpsOptions = null;
  if (ssl) {
    const keyPath = process.env.SSL_KEY_PATH || '';
    const certPath = process.env.SSL_CERT_PATH || '';
    httpsOptions = {
      key: fs.readFileSync(path.join(__dirname, keyPath)),
      cert: fs.readFileSync(path.join(__dirname, certPath)),
    };
  }
  const app = await NestFactory.create(AppModule, { httpsOptions });
  const port = Number(process.env.PORT) || 3333;
  const hostname = process.env.HOSTNAME || 'localhost';
  await app.listen(port, hostname, () => {
    const address =
      'http' + (ssl ? 's' : '') + '://' + hostname + ':' + port + '/';
    Logger.log('Listening at ' + address);
  });
}

bootstrap();

We will now add .local.env with the configuration.

PORT=3334
HOSTNAME=dev.local
SSL=true
SSL_KEY_PATH="../../../dev-stack/certs/local-key.pem"
SSL_CERT_PATH="../../../dev-stack/certs/local-cert.pem"

🗒️ Here is some magic tricks done by Nx which will inject automatically .local.env when we will run the serve command.

By default, Nx will load any environment variables you place in the following files:

workspaceRoot/apps/my-app/.local.env
workspaceRoot/apps/my-app/.env
workspaceRoot/.local.env
workspaceRoot/.env

You can see more on how Nx manage environment variables → here

⚠️ IMPORTANT: the relative path to the certificate is from the dist folder (i.e. dist/apps/nest-api).

Now serve the app with the new configuration:

$ nx serve nest-api

You can open https://dev.local:3334/ which is secured with a valid certificate 🔐🎉

Feel free to change any configuration in environment variables, but don't forget to regenerate a new certificate with mkcert of you change the domain name ⚠️

See you in the next post!

Github repository

Nightbr / full-https-development-environment

A full development environment in HTTPS with a valid certificate for your local development domain with mkcert, Nx workspace, angular, reactjs, nestjs, express, docker, traefik.

Myorg

This project was generated using Nx.

🔎 Nx is a set of Extensible Dev Tools for Monorepos.

Adding capabilities to your workspace

Nx supports many plugins which add capabilities for developing different types of applications and different tools.

These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.

Below are our core plugins:

React
- npm install --save-dev @nrwl/react
Web (no framework frontends)
- npm install --save-dev @nrwl/web
Angular
- npm install --save-dev @nrwl/angular
Nest
- npm install --save-dev @nrwl/nest
Express
- npm install --save-dev @nrwl/express
Node
- npm install --save-dev @nrwl/node

There are also many community plugins you could add.

Generate an application

Run nx g @nrwl/react:app my-app to generate an application.

You can use any of the plugins above to generate applications as well.

When using Nx, you can create multiple applications and libraries in the same workspace.

Generate a library

Run nx…

View on GitHub

⏩ Local HTTPS for Express app (api) in Nx workspace

Titouan B — Thu, 08 Oct 2020 15:45:52 +0000

Hey, welcome back in this post series where we will see how to setup a full HTTPS development environment.

In this post, we will setup local HTTPS for Express app (api) in Nx workspace.

If you don't have generated your certificate with mkcert, I recommand you read the first post of this series. → link

What is Nx?

💡 Nx use the angular-cli under the hood!

Setting up the project workspace

Creating a new empty workspace

$ npx create-nx-workspace
npx : 179 installé(s) en 7.547s
? Workspace name (e.g., org name)     myorg
? What to create in the new workspace empty             [an empty workspace with a layout tha
t works best for building apps]
? CLI to power the Nx workspace       Nx           [Recommended for all applications (React, 
Node, etc..)]
...

🗒️ If you already have an Nx workspace, you can skip these steps.

Then, we will install the Express schematics:

npm install -D @nrwl/express

Now, we will generate a new Express application called express-api (change the name with your api name).

nx generate @nrwl/express:application --name=express-api

Start serving your app with nx serve express-api 🎉

🗒️ Look at the Express Nx plugin documentation to see more options → here

Setting up HTTPS

We will edit the express server to handle HTTPS requests.

Open and edit myorg/apps/express-api/src/main.ts

import * as express from 'express';
import * as https from 'https';
import * as fs from 'fs';
import * as path from 'path';

const app = express();

app.get('/api', (req, res) => {
  res.send({ message: 'Welcome to express-api!' });
});

const port = Number(process.env.PORT) || 3333;
const hostname = process.env.HOSTNAME || 'localhost';
const ssl = process.env.SSL === 'true' ? true : false;
let server = null;

if (ssl) {
  const keyPath = process.env.SSL_KEY_PATH || '';
  const certPath = process.env.SSL_CERT_PATH || '';
  const httpsOptions = {
    key: fs.readFileSync(path.join(__dirname, keyPath)),
    cert: fs.readFileSync(path.join(__dirname, certPath)),
  };
  server = https.createServer(httpsOptions, app).listen(port, () => {
    console.log(`Listening at https://${hostname}:${port}/api`);
  });
} else {
  server = app.listen(port, () => {
    console.log(`Listening at http://${hostname}:${port}/api`);
  });
}

server.on('error', console.error);

We will now add .local.env with the configuration.

PORT=3333
HOSTNAME=dev.local
SSL=true
SSL_KEY_PATH="../../../dev-stack/certs/local-key.pem"
SSL_CERT_PATH="../../../dev-stack/certs/local-cert.pem"

🗒️ Here is some magic tricks done by Nx which will inject automatically .local.env when we will run the serve command.

By default, Nx will load any environment variables you place in the following files:

workspaceRoot/apps/my-app/.local.env
workspaceRoot/apps/my-app/.env
workspaceRoot/.local.env
workspaceRoot/.env

You can see more on how Nx manage environment variables → here

⚠️ IMPORTANT: the relative path to the certificate is from the dist folder (i.e. dist/apps/express-api).

Now serve the app with the new configuration:

$ nx serve express-api

You can open https://dev.local:3333/api which is secured with a valid certificate 🔐🎉

Feel free to change any configuration in environment variables, but don't forget to regenerate a new certificate with mkcert of you change the domain name ⚠️

See you in the next post!

Github repository

Nightbr / full-https-development-environment

A full development environment in HTTPS with a valid certificate for your local development domain with mkcert, Nx workspace, angular, reactjs, nestjs, express, docker, traefik.

Myorg

This project was generated using Nx.

🔎 Nx is a set of Extensible Dev Tools for Monorepos.

Adding capabilities to your workspace

Nx supports many plugins which add capabilities for developing different types of applications and different tools.

These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.

Below are our core plugins:

React
- npm install --save-dev @nrwl/react
Web (no framework frontends)
- npm install --save-dev @nrwl/web
Angular
- npm install --save-dev @nrwl/angular
Nest
- npm install --save-dev @nrwl/nest
Express
- npm install --save-dev @nrwl/express
Node
- npm install --save-dev @nrwl/node

There are also many community plugins you could add.

Generate an application

Run nx g @nrwl/react:app my-app to generate an application.

You can use any of the plugins above to generate applications as well.

When using Nx, you can create multiple applications and libraries in the same workspace.

Generate a library

Run nx…

View on GitHub

⚛️ Local HTTPS for React app in Nx workspace

Titouan B — Thu, 08 Oct 2020 14:54:23 +0000

Hey, welcome back in this post series where we will see how to setup a full HTTPS development environment.

In this post, we will setup local HTTPS for React app in Nx workspace.

If you don't have generated your certificate with mkcert, I recommand you read the first post of this series. → link

What is Nx?

💡 Nx use the angular-cli under the hood!

Setting up the project workspace

Creating a new empty workspace



$ npx create-nx-workspace
npx : 179 installé(s) en 7.547s
? Workspace name (e.g., org name)     myorg
? What to create in the new workspace empty             [an empty workspace with a layout tha
t works best for building apps]
? CLI to power the Nx workspace       Nx           [Recommended for all applications (React, 
Node, etc..)]
...

🗒️ If you already have an Nx workspace, you can skip these steps.

Then, we will install the Reactjs schematics:



npm install -D @nrwl/react

Now, we will generate a new Reactjs application called react-app (change the name with your app name).



nx generate @nrwl/react:application --name=react-app

Choose your settings such as stylesheet format, routing, ...

Start serving your app with nx serve react-app 🎉

🗒️ Look at the Reactjs Nx plugin documentation to see more options → here

Setting up HTTPS

In the workspace.json, search for your app name (here react-app). Under this, look for the serve object and options. We will add the ssl configuration under "browserTarget": "react-app:build",.

The serve object in the workspace.json should look like this:



...
    "serve": {
          "builder": "@nrwl/web:dev-server",
          "options": {
            "buildTarget": "react-app:build",
            "host": "dev.local",
            "ssl": true,
            "sslKey": "./dev-stack/certs/local-key.pem",
            "sslCert": "./dev-stack/certs/local-cert.pem"
          },
          "configurations": {
            "production": {
              "buildTarget": "react-app:build:production"
            }
          }
        },
...

Now save and serve the app:



$ nx serve react-app

> nx run react-app:serve 
**
Web Development Server is listening at https://dev.local:4200/
**
Starting type checking service...
Using 14 workers with 2048MB memory limit
ℹ ｢wds｣: Project is running at https://dev.local:4200/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
No type errors found
Version: typescript 4.0.3
Time: 4026ms
Hash: cc02edd4220bb47802d9
Built at: 2020-10-08 16:49:42
Entrypoint main [big] = runtime.js runtime.js.map vendor.js vendor.js.map main.js main.js.map
Entrypoint polyfills [big] = runtime.js runtime.js.map polyfills.js polyfills.js.map
chunk {main} main.js, main.js.map (main) 359 KiB ={runtime}= ={vendor}= [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 569 KiB ={runtime}= [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 0 bytes ={main}= ={polyfills}= ={vendor}= [entry] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 1.09 MiB ={main}= ={runtime}= [initial] [rendered] split chunk (cache group: vendor) (name: vendor)
ℹ ｢wdm｣: Compiled successfully.

You can open https://dev.local:4200 which is secured with a valid certificate 🔐🎉

Feel free to change any configuration on the options, but don't forget to regenerate a new certificate with mkcert of you change the domain name ⚠️

See you in the next post!

Github repository

Nightbr / full-https-development-environment

A full development environment in HTTPS with a valid certificate for your local development domain with mkcert, Nx workspace, angular, reactjs, nestjs, express, docker, traefik.

Myorg

This project was generated using Nx.

🔎 Nx is a set of Extensible Dev Tools for Monorepos.

Adding capabilities to your workspace

Nx supports many plugins which add capabilities for developing different types of applications and different tools.

These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.

Below are our core plugins:

React
- npm install --save-dev @nrwl/react
Web (no framework frontends)
- npm install --save-dev @nrwl/web
Angular
- npm install --save-dev @nrwl/angular
Nest
- npm install --save-dev @nrwl/nest
Express
- npm install --save-dev @nrwl/express
Node
- npm install --save-dev @nrwl/node

There are also many community plugins you could add.

Generate an application

Run nx g @nrwl/react:app my-app to generate an application.

You can use any of the plugins above to generate applications as well.

When using Nx, you can create multiple applications and libraries in the same workspace.

Generate a library

Run nx…

View on GitHub

🅰️ Local HTTPS for Angular app in Nx workspace (or angular cli)

Titouan B — Thu, 08 Oct 2020 13:53:09 +0000

Hey, welcome back in this post series where we will see how to setup a full HTTPS development environment.

In this post, we will setup local HTTPS for Angular app in Nx workspace (or angular cli).

If you don't have generated your certificate with mkcert, I recommand you read the first post of this series. → link

What is Nx?

💡 Nx use the angular-cli under the hood!

Setting up the project workspace

Creating a new empty workspace

$ npx create-nx-workspace
npx : 179 installé(s) en 7.547s
? Workspace name (e.g., org name)     myorg
? What to create in the new workspace empty             [an empty workspace with a layout tha
t works best for building apps]
? CLI to power the Nx workspace       Nx           [Recommended for all applications (React, 
Node, etc..)]
...

🗒️ If you already have an Nx workspace, you can skip these steps.

Then, we will install the Angular schematics:

npm install -D @nrwl/angular

Now, we will generate a new Angular application called myapp (change the name with your app name).

nx generate @nrwl/angular:application --name=myapp

Choose your settings such as stylesheet format, routing, ...

Start serving your app with nx serve myapp 🎉

🗒️ Look at the Angular Nx plugin documentation to see more options → here

Setting up HTTPS

In the workspace.json (or angular.json with angular-cli), search for your project name (here myapp). Under this, look for the serve object and options. We will add the ssl configuration under "browserTarget": "myapp:build",.

The serve object in the workspace.json should look like this:

...
    "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myapp:build",
            "host": "dev.local",
            "ssl": true,
            "sslKey": "./dev-stack/certs/local-key.pem",
            "sslCert": "./dev-stack/certs/local-cert.pem"
          },
          "configurations": {
            "production": {
              "browserTarget": "myapp:build:production"
            }
          }
        },
...

Now save and serve the app:

$ nx serve myapp

> nx run myapp:serve 

chunk {main} main.js, main.js.map (main) 24.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 13.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.64 MB [initial] [rendered]
Date: 2020-10-08T13:44:58.948Z - Hash: 546469cedb2db4de6e20 - Time: 3675ms
** Angular Live Development Server is listening on dev.local:4200, open your browser on https://dev.local:4200/ **
: Compiled successfully.

You can open https://dev.local:4200 which is secured with a valid certificate 🔐🎉

Feel free to change any configuration on the options, but don't forget to regenerate a new certificate with mkcert of you change the domain name ⚠️

See you in the next post!

Github repository

Nightbr / full-https-development-environment

A full development environment in HTTPS with a valid certificate for your local development domain with mkcert, Nx workspace, angular, reactjs, nestjs, express, docker, traefik.

Myorg

This project was generated using Nx.

🔎 Nx is a set of Extensible Dev Tools for Monorepos.

Adding capabilities to your workspace

Nx supports many plugins which add capabilities for developing different types of applications and different tools.

These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.

Below are our core plugins:

React
- npm install --save-dev @nrwl/react
Web (no framework frontends)
- npm install --save-dev @nrwl/web
Angular
- npm install --save-dev @nrwl/angular
Nest
- npm install --save-dev @nrwl/nest
Express
- npm install --save-dev @nrwl/express
Node
- npm install --save-dev @nrwl/node

There are also many community plugins you could add.

Generate an application

Run nx g @nrwl/react:app my-app to generate an application.

You can use any of the plugins above to generate applications as well.

When using Nx, you can create multiple applications and libraries in the same workspace.

Generate a library

Run nx…

View on GitHub

🔐 Full HTTPS development environment

Titouan B — Thu, 08 Oct 2020 09:22:43 +0000

Hey, in this post series, I will explain how you can have a full development environment in HTTPS with a valid certificate for your local development domain.

Why should I use HTTPS in development?

In fact, there are many reasons you should use HTTPS for your development environment:

To use Secure Cookie for authentication (using Auth service such as Keycloack, Auth0, ...) → See more here or here
To have the development & production environment as similar as possible. See the 10th factor of the 12-factor app.
Some external services (SaaS) required HTTPS (i.e. for webhooks)

Setup the certificate

We need to setup an certificate signed with a rootCA which is recognized by our system and browser.

First we will choose an hostname for our local development environment, then we will use the awesome tool mkcert to generate a valid certificate.

Choose a dev hostname

Choose an hostname for your development environment.

⚠️ Don't use existing domain name which could create conflicts!

You can use the usual localhost or another hostname. I like to use dev.local which I will take for the next steps.

You will need to add the hostname in your local dns which is /etc/hosts in Linux & Mac. So add 127.0.0.1 dev.local in your /etc/hosts.

💡 Tips: I'm using this script from this gist to add & remove hostname easily 👍

🗒️ Note: If you use sub-domain such as api.dev.local, app.dev.local, ... You have to add them in /etc/hosts too. You can't use wildcard such as *.dev.local directly on /etc/hosts but you can use a service such as dnsmasq to achieve this.

Mkcert

We will use mkcert to manage the rootCA & generate our certificate.

Installation

🍏 MacOS

On MacOS, use Homebrew

brew install mkcert
brew install nss # if you use Firefox

🐧 Linux

On Linux, first install certutil.

sudo apt install libnss3-tools
curl -Lo /tmp/mkcert https://github.com/FiloSottile/mkcert/releases/download/v1.4.1/mkcert-v1.4.1-linux-amd64
chmod +x /tmp/mkcert
sudo mv /tmp/mkcert /usr/local/bin/mkcert

See more installation methods here 👌

Usage

First we need to install the local CA to the system and browsers.

$ mkcert -install
Created a new local CA at "/home/***/.local/share/mkcert" 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

Next, we will use mkcert to generate our certificate. Using my example domain dev.local & the wildcard *.dev.local.

$ mkcert -cert-file certs/local-cert.pem -key-file certs/local-key.pem dev.local *.dev.local
Using the local CA at "/home/***/.local/share/mkcert" ✨

Created a new certificate valid for the following names 📜
 - "dev.local"
 - "*.dev.local"

Reminder: X.509 wildcards only go one level deep, so this won't match a.b.dev.local ℹ️

The certificate is at "certs/local-cert.pem" and the key at "certs/local-key.pem" ✅

We can now use the certificate located at certs/local-cert.pem & certs/local-key.pem.

Next we will see how we will use this certificate for different apps.

BONUS: Wrapping everything in a Makefile for a dev-stack

here is how I organized my dev-stack, it's highly opinionated so take only what you need from it 😉!

📁 Folders Structure

project_root
├── dev-stack
│   ├── certs
│   │   ├── .gitignore
│   │   ├── local-cert.pem
│   │   └── local-key.pem
│   ├── scripts
│   │   ├── get-ip.sh
│   │   └── manage-hosts.sh
│   ├── .env.local
│   ├── .gitignore
│   ├── docker-compose.yml
│   ├── Makefile
│   └── README.md

Makefile

ifndef DEV_STACK_DIR
DEV_STACK_DIR = $(CURDIR)
endif
SCRIPTS_DIR=${DEV_STACK_DIR}/scripts

ifndef HOSTNAME
HOSTNAME = dev.local
endif
ifndef SUBDOMAINS
SUBDOMAINS = docs \
             traefik \
             mail \
             media \
             portainer \
             graphql \
             auth
endif
ifndef DATABASE
DATABASE = postgres
endif
ifndef INFRA
INFRA = traefik \
        maildev \
        minio \
        mkdocs \
        portainer \
        ${DATABASE} \
        graphql-engine \
        keycloak \
        auth-connector
endif

export HOST_IP := $(shell ${SCRIPTS_DIR}/get-ip.sh)

# HELP
.PHONY: help

help: ## List of the command available, make {command}
    @awk 'BEGIN {FS = ":.*?## "} /^[a-zA-Z_-]+:.*?## / {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}' $(MAKEFILE_LIST)

.DEFAULT_GOAL := help

start:  ## Start the docker stack
    docker-compose up -d ${INFRA}

up: ## Start the docker stack
    docker-compose up ${INFRA}

stop: ## Stop the docker stack
    docker-compose stop

restart: ## Restart the docker stack
    docker-compose restart

down: ## Down the docker stack and remove all containers and networks
    docker-compose down

build: ## Build or rebuild all docker container
    docker-compose build

pull: ## Pull latest image
    docker-compose pull

add-hosts: ## Add Hosts entries for Dev stack
    ${SCRIPTS_DIR}/manage-hosts.sh addhost ${HOSTNAME}
    $(foreach subdomain, $(SUBDOMAINS), ${SCRIPTS_DIR}/manage-hosts.sh addhost $(subdomain).$(HOSTNAME);)

remove-hosts: ## Remove Hosts entries for Dev stack
    ${SCRIPTS_DIR}/manage-hosts.sh removehost ${HOSTNAME}
    $(foreach subdomain, $(SUBDOMAINS), ${SCRIPTS_DIR}/manage-hosts.sh removehost $(subdomain).$(HOSTNAME);)

certs-generate: ## Generate certs for all our domains
    mkcert -install
    mkcert -cert-file certs/local-cert.pem -key-file certs/local-key.pem $(HOSTNAME) *.$(HOSTNAME)

certs-uninstall: ## Uninstall the local CA (but do not delete it)
    mkcert -uninstall

Scripts

get-ip.sh

#!/bin/bash

# Get host IP address

if [ "$(uname)" = "Darwin" ];then
    ifconfig en0 | grep "inet "| cut -d ' ' -f 2
else
    ip route get 1.2.3.4 | awk '{print $7}'
fi

manage-hosts.sh

#!/bin/bash

# copy from https://gist.github.com/irazasyed/a7b0a079e7727a4315b9

# PATH TO YOUR HOSTS FILE
ETC_HOSTS=/etc/hosts

# DEFAULT IP FOR HOSTNAME
IP="127.0.0.1"

# Hostname to add/remove.
HOSTNAME=$2

removehost() {
    echo "removing host";
    if [ -n "$(grep $HOSTNAME /etc/hosts)" ]
    then
        echo "$HOSTNAME Found in your $ETC_HOSTS, Removing now...";
        sudo sed -i".bak" "/$HOSTNAME/d" $ETC_HOSTS
    else
        echo "$HOSTNAME was not found in your $ETC_HOSTS";
    fi
}

addhost() {
    echo "adding host";
    HOSTS_LINE="$IP\t$HOSTNAME"
    if [ -n "$(grep $HOSTNAME /etc/hosts)" ]
        then
            echo "$HOSTNAME already exists : $(grep $HOSTNAME $ETC_HOSTS)"
        else
            echo "Adding $HOSTNAME to your $ETC_HOSTS";
            sudo -- sh -c -e "echo '$HOSTS_LINE' >> /etc/hosts";

            if [ -n "$(grep $HOSTNAME /etc/hosts)" ]
                then
                    echo "$HOSTNAME was added succesfully \n $(grep $HOSTNAME /etc/hosts)";
                else
                    echo "Failed to Add $HOSTNAME, Try again!";
            fi
    fi
}

$@

Usage of the certificate

→ See in next posts how you can now use this new generated certificates

Local HTTPS for Angular app in Nx workspace (or angular cli)
Local HTTPS for React app in Nx workspace
Local HTTPS for Express app (api) in Nx workspace
Local HTTPS for NestJS app (api) in Nx workspace
Local HTTPS for Docker services using Traefik

Github repository

Nightbr / full-https-development-environment

A full development environment in HTTPS with a valid certificate for your local development domain with mkcert, Nx workspace, angular, reactjs, nestjs, express, docker, traefik.

Myorg

This project was generated using Nx.

🔎 Nx is a set of Extensible Dev Tools for Monorepos.

Adding capabilities to your workspace

Nx supports many plugins which add capabilities for developing different types of applications and different tools.

These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.

Below are our core plugins:

React
- npm install --save-dev @nrwl/react
Web (no framework frontends)
- npm install --save-dev @nrwl/web
Angular
- npm install --save-dev @nrwl/angular
Nest
- npm install --save-dev @nrwl/nest
Express
- npm install --save-dev @nrwl/express
Node
- npm install --save-dev @nrwl/node

There are also many community plugins you could add.

Generate an application

Run nx g @nrwl/react:app my-app to generate an application.

You can use any of the plugins above to generate applications as well.

When using Nx, you can create multiple applications and libraries in the same workspace.

Generate a library

Run nx…

View on GitHub

Setup EU cookie bar on Webflow

Titouan B — Wed, 16 Sep 2020 08:51:39 +0000

Hey, we will see how you can easily setup a free EU cookie bar 🍪 on your Webflow website.

If you don't know Webflow, It's a modern website visual builder. I mainly use it to build the marketing website for SaaS product.

Cookieconsent

We will use the awesome OpenSource project Cookieconsent by OSANO.

The easy visual way to get the cookie bar is to use the Wizard.

Go to https://www.osano.com/cookieconsent/download/ and click on Start coding on the Open Source Edition column.

You will be able to tweak the widget as you wish ✨

It will generate the code we will copy to our Webflow config (on the right).

Webflow configuration

Go to your Webflow Dashboard and open your website settings.

Go to the Custom Code tab. We will copy the Head Code from the Cookieconsent Wizard into the Head Code block in Webflow & the other part into Footer Code block. Don't forget to Save changes (with the buttons).

Here is my code for example:

Head Code

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />

Footer Code

<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<script>
window.addEventListener("load", function () {
    window.cookieconsent.initialise({
        "palette": {
            "popup": {
                "background": "#00947C"
            },
            "button": {
                "background": "#fff",
                "text": "#00947C"
            }
        },
        "theme": "classic",
        "position": "bottom-left",
        "content": {
            "message": "Nous utilisons des cookies pour améliorer votre expérience de navigation.",
            "dismiss": "J'ai compris",
            "deny": "Refuser",
            "link": "En savoir plus"
        }
    })
});
</script>

⚠️ Note: You need a paid site plan to be able to add custom code to your site

Publish & chill 😎

Just hit your site's Publish button and you should have your EU Cookie bar on Webflow 🎉

That's all folks, it's pretty easy and basic but cover the current EU needs to inform about cookie you're using on your website.

For advanced usage, you can see all options available in the JavaScript API for Cookie consent documentation.

Thanks for reading and feel free to ask anything in comment! 🚀

Internationalization with API Platform: the other way

Titouan B — Wed, 16 Sep 2020 07:09:10 +0000

We recently saw the great article of Locastic on this tricky subject of implementing translations in API and specifically in API Platform

API Platform, API Platform everywhere!

We recently saw the great article of Locastic on this tricky subject of implementing translations in API and specifically in API Platform

For one of our project, we also find a pretty neat solution to implement intl in our beloved API Platform!

First of all, we have locale parameters and locale Entity to manage locales stuff and language reference.

We add some parameters:

You can also use Locale Entity and add new locales in database. The Locale Entity has priority over parameters. If there is no Locale in database, it will use parameters config.

Our Locale Entity 🏁

A little LocaleRepository to handle the switch between config and parameters:

Note: We use autowiring to pass parameters parametersDefaultLocale and parametersAvailableLocales to the constructor.

Now we need to translate our Entities !

We choose to use Doctrine Translatable Extension to manage our Translatable Entities.

Pretty simple! We only followed the Doctrine Translatable Extension doc to give our translatable behavior to our Entities. Here is an example of a translatable entity:

Pretty easy, isn’t it? 👌

But how can this work? Where is the magic trick? How can I know which locale is use or how can I add new languages and translations?

Here is the magic trick, we have a LocaleListener!

When you call the API (GET, POST, PUT, PATCH), you want to retrieve data (or post data) for a specific locale. You can do this by passing the locale in the header of your request:

X-LOCALE: fr

If your locale is null or not supported, it will use the default locale.

❤️ I love this solution because it is simple and use standard library such as Doctrine Translatable which is mainly use in Symfony application.

Add to that, it is stateless and stay REST compliant (when we GET/POST/PUT… we stay in the Entity context).

If you want multi-language editable field, just create it with your favorite frontend framework and change the header X-LOCALE to the correct language on the POST/PUT request.

For example, we retrieve available locales through the API locale endpoint to display flags 🇫🇷 and edit button ✏️. When you click on edit button, it will go to the edit form with the correct language data thanks to the correct X-LOCALE header in the GET request. And when you submit the form, it calls a PUT on the entity with the correct X-LOCALE header set to the selected language !

Example of frontend UI

Note: with the approach we have the same entity id for all languages. The company id=42 will always be the company 42 in different languages. Only Translatable Annotated field will change. So be sure it is ok with your use case. I don’t think there is a unique and perfect solution for the intl problem.

Thanks for reading and feel free to ask anything in comment! 🚀

From Medium:

Internationalization with API Platform: the other way | by Titouan BENOIT | Medium

Titouan BENOIT ・ Oct 2, 2018 ・
Medium

Demo Repository:

Nightbr / api-intl

Symfony4 flex with API platform with Doctrine Translatable: https://medium.com/@titouanbenoit/internationalization-with-api-platform-the-other-way-5ce9c446737f

api-intl

View on GitHub

DEV Community: Titouan B

🐯 Local HTTPS for NestJS app (api) in Nx workspace

What is Nx?

Setting up the project workspace

Setting up HTTPS

Github repository

Nightbr / full-https-development-environment

A full development environment in HTTPS with a valid certificate for your local development domain with mkcert, Nx workspace, angular, reactjs, nestjs, express, docker, traefik.

Myorg

Adding capabilities to your workspace

Generate an application

Generate a library

⏩ Local HTTPS for Express app (api) in Nx workspace

What is Nx?

Setting up the project workspace

Setting up HTTPS

Github repository

Nightbr / full-https-development-environment

A full development environment in HTTPS with a valid certificate for your local development domain with mkcert, Nx workspace, angular, reactjs, nestjs, express, docker, traefik.

Myorg

Adding capabilities to your workspace

Generate an application

Generate a library

⚛️ Local HTTPS for React app in Nx workspace

What is Nx?

Setting up the project workspace

Setting up HTTPS

Github repository

Nightbr / full-https-development-environment

A full development environment in HTTPS with a valid certificate for your local development domain with mkcert, Nx workspace, angular, reactjs, nestjs, express, docker, traefik.

Myorg

Adding capabilities to your workspace

Generate an application

Generate a library

🅰️ Local HTTPS for Angular app in Nx workspace (or angular cli)

What is Nx?

Setting up the project workspace

Setting up HTTPS

Github repository

Nightbr / full-https-development-environment

A full development environment in HTTPS with a valid certificate for your local development domain with mkcert, Nx workspace, angular, reactjs, nestjs, express, docker, traefik.

Myorg

Adding capabilities to your workspace

Generate an application

Generate a library

🔐 Full HTTPS development environment

Why should I use HTTPS in development?

Setup the certificate

Choose a dev hostname

Mkcert

Installation

🍏 MacOS

🐧 Linux

Usage

BONUS: Wrapping everything in a Makefile for a dev-stack

📁 Folders Structure

Makefile

Scripts

get-ip.sh

manage-hosts.sh

Usage of the certificate

Github repository

Nightbr / full-https-development-environment

A full development environment in HTTPS with a valid certificate for your local development domain with mkcert, Nx workspace, angular, reactjs, nestjs, express, docker, traefik.

Myorg

Adding capabilities to your workspace

Generate an application

Generate a library

Setup EU cookie bar on Webflow

Cookieconsent

Webflow configuration

Head Code

Footer Code

Publish & chill 😎

Internationalization with API Platform: the other way

Internationalization with API Platform: the other way | by Titouan BENOIT | Medium

Titouan BENOIT ・ Oct 2, 2018 ・ Medium

Nightbr / api-intl

Symfony4 flex with API platform with Doctrine Translatable: https://medium.com/@titouanbenoit/internationalization-with-api-platform-the-other-way-5ce9c446737f

Titouan BENOIT ・ Oct 2, 2018 ・
Medium