DEV Community: Emmanuel Gautier

Introducing new blog on OAuth, OpenID Connect, and IAM Solutions

Emmanuel Gautier — Thu, 30 Mar 2023 21:10:34 +0000

I'm excited to announce the launch of a new blog named CerberAuth, where I'll be exploring the world of OAuth, OpenID Connect, and IAM solutions for modern security. As a developer and security enthusiast, I've spent countless hours researching and experimenting with various IAM and OpenID Connect providers. With this blog, I hope to share some knowledge and experience with others who are interested in learning more about these topics.

In addition to sharing some thoughts and insights, I'll also be developing tools to make it easier for developers to implement and work with these technologies. I'm particularly excited about a new tool I've been working on that automatically generates secure OAuth2 rules from an OpenAPI contract (available on Github).

Whether you're a seasoned security expert or just getting started with these technologies, I hope you'll find the CerberAuth blog informative and helpful. Stay tuned for more posts and updates.

How to fix DNS Internal Resolution inside the Nginx docker container

Emmanuel Gautier — Sat, 19 Nov 2022 00:00:00 +0000

Sometimes, errors with Docker and some containers can become cryptic when it is about networking. Today, it was Nginx that was not able to reach another container. Here is the docker-compose used:

version: '3'

services:
  containername:
    ...
    container_name: containername
    networks:
      - intranet

  nginx:
    image: nginx:1
    ports:
      - "8080:8080"
    volumes:
      - ./.docker/nginx/conf.d:/etc/nginx/conf.d
    networks:
      - intranet

networks:
  intranet:

And the Nginx configuration used:

server {
    listen       8080;
    listen  [::]:8080;
    server_name  localhost;

    location / {
        proxy_pass http://containername:3000;
    }
}

Even after defining a container name and ensuring that the two containers can communicate inside the same docker network, Nginx continues throwing the following error: no resolver defined to resolve container_name

Thanks for this Stack Overflow answer for helping me figure out what was the root cause. The problem is that Nginx's default behavior is not to make a DNS resolution with Docker's internal DNS so he can not resolve a container by name. To fix this issue, you need to make possible the resolution with the Docker internal DNS. Just add this line in the Nginx configuration and you should be OK:

http {
    resolver 127.0.0.11;
}

Hope this quick post helps you fix a similar issue.

Keep the same Node.js version between local environment and Github Actions

Emmanuel Gautier — Sun, 30 Oct 2022 00:00:00 +0000

It can be complicated to have the same Node version between the local environment and the CI/CD. The latest Node.js version or the latest lts is released recently and if you want to upgrade to the Node version, usually you can forget to configure one environment. For that reason, it can be important to have only one source of truth to define the Node version, so you change in one place it impacts every environment.

Here we will use nvm and have the CI/CD example with Github Actions. Some other CI/CD solutions can exist elsewhere using a similar configuration and reproduce the common configuration.

First of all, you should configure a .nvmrc file defining the version you want to use. This version will be used in your local environment. To use it, you can either make an nvm use each time you go to the project's local directory or configure your bash to use it automatically.

Here is an example of a .nvmrc file content:

lts/hydrogen

Then, you can configure the Github Action so to use the same .nvmrc file.

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup node env
        uses: actions/setup-node@v3
        with:
          node-version-file: '.nvmrc'
          cache: 'yarn'

Now, when you change the .nvmrc file, it changes the version used for your local environment, the Node environment for all your team, and the CI/CD running on Github.

Extends Express session SessionData type

Emmanuel Gautier — Sun, 30 Oct 2022 00:00:00 +0000

Here we will use nvm and have the CI/CD example with Github Actions. Some other CI/CD solutions can exist elsewhere using a similar configuration and reproduce the common configuration.

Here is an example of a .nvmrc file content:

lts/hydrogen

Then, you can configure the Github Action so to use the same .nvmrc file.

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup node env
        uses: actions/setup-node@v3
        with:
          node-version-file: '.nvmrc'
          cache: 'yarn'

Now, when you change the .nvmrc file, it changes the version used for your local environment, the Node environment for all your team, and the CI/CD running on Github.

Convert a JavaScript object to queryparams string

Emmanuel Gautier — Mon, 16 May 2022 21:33:24 +0000

Converting a JS object to parameters in a URL is a common task for web developers but there are different ways to do it in depending on the context. Let's see two options depending whether your code is running in a browser or on a NodeJS server.

Browser Side Using URLSearchParams API

The URLSearchParams interface is available in the browser. It is used to manipulate the query string of a URL. This API is compatible with all modern browsers including the latest browser versions and excluding Internet Explorer.

Here is an example:

const params = {
  name: 'John',
  age: 30,
}

const qs = new URLSearchParams(params)
console.log(qs.toString())

If you are in the case you need to support Internet Explorer 11 or lower, you can use a URLSearchParams polyfill or the querystringify npm package.

Server Side Using querystring

The querystring module is part of NodeJS built-in modules. It is used to manipulate the query string of a URL as well.

Here is an example:

const querystring = require('querystring')

const params = {
  name: 'John',
  age: 30,
}

const qs = querystring.stringify(params)
console.log(qs)

ESLint Global Variables

Emmanuel Gautier — Sat, 27 Nov 2021 00:00:00 +0000

Sometimes, we need to access some globally defined variables, especially the browser side when we use third-party libraries, and can also be the case server side. Because the variables are not referenced in the code, eslint throws an error saying the variable is not defined.

Eslint let us specify the global variable. This configuration allows eslint to know that a variable exists even if it is not referenced in the code. Here is an example:

{
  "globals": {
    "dataLayer": true
  }
}

In addition to specifying it, you can declare the variable as writable or not. Here is an example:

{
  "globals": {
    "dataLayer": "writable"
  }
}

Or only declare it as read-only:

{
  "globals": {
    "dataLayer": "readonly"
  }
}

You can find more documentation on the Eslint doc page.

Extend Window type with Typescript

Emmanuel Gautier — Sat, 27 Nov 2021 00:00:00 +0000

During typescript app development, sometime you need to access properties or functions of the Window object. Some of these properties or functions are not available in the window object defined by the browser. Those may be defined by Third-party libraries you can add to your pages like Google Tag Manager for example. Because of this, you need to extend the Window type with the properties or functions you need to access.

TypeScript Window type

The Window type is defined in the lib.dom typescript module. You can find the definition of the Window type at the following TSDoc.

When can you have new properties not defined by your code in the Window object? An example is when you want to add Google Tag Manager or Google Analytics to your page. Those scripts are not loaded by your code directly but you may communicate with them through some window object properties. For Google Tag Manager, the datalayer property is added and some of the functions are also added.

In this case, you will have the following error:

Property does not exist on type 'window & typeof globalthis'

Extend Window type with the missing properties

In order to extend the Window type, you need to add the missing properties or functions.

The following code snippet will extend the Window type with the missing properties or functions.

declare global {
  interface Window {
    gtag: (...args: any[]) => void
    dataLayer: Record<string, any>
  }
}

Do not forget to add the file containing this snippet to the list of project files for the Typescript compilation.

For example, in a NextJS project, you can add the snippet in the globals.d.ts file like this:

interface Window {
  gtag: (...args: any[]) => void
  dataLayer: Record<string, any>
}

Hope this article helps you to avoid this Typescript error.

Gatsby + Netlify CMS + TailwindCSS Starter

Emmanuel Gautier — Sun, 17 Oct 2021 00:00:00 +0000

With the number of websites generated with the same tools, I tend to mutualize as much as we can the effort to maintain the common technical stack. Following this principle, I just created a new starter coming from some of my website development and powered with Gatsby.

You can find this starter on this Github Repository. This repo contains an example business website that is built with:

It follows the JAMstack principles with Git as a single source of truth for pages and blog posts, deployed and delivered thanks to the solution Netlify.

This starter is not strongly linked with Netlify so you can choose the hosting provider you want but, since this starter is using the Netlify CMS solution, the integration is simpler with Netlify.

What are the main features?

This starter brings the following set of features:

Pages and Blog posts content model
Performance optimized with good Web Vitals scores
SEO optimized
Twitter Cards and Open Graph support
RSS Feed
Sitemap

Since this starter comes from my other websites developments, this list should bring most of the features you will need to build a website. If your think some features are missing or can be improved, feel free to contribute by making a PR or create an issue to ask about new features.

To see how it looks, please go to the deployed Demo Page.

Enable Python type checking in VSCode

Emmanuel Gautier — Wed, 18 Aug 2021 00:00:00 +0000

Since version 3.5, Python now has support for type hints. This typing is a cool new feature allowing type checking across your code for more quality and also help when you are using some packages or call some functions your colleague did in a large codebase. In this article, we will see how to enable type IntelliSense and type checking analysis in Visual Studio Code editor.

First of all, you need to install the Microsoft extension Pylance. This extension provides a set of useful features powered with Pyright, the Microsoft static type checking tool.

With the extension installed and enabled, you should now have better IntelliSense with typing information when you are calling some package function for example. For the type checking analysis, it is not enabled by default, you need to configure it by yourself.

In your settings.json file, add a new line with the following setting:

{
  "python.analysis.typeCheckingMode": "basic"
}

The default value for this line is off meaning the static analysis is disabled. You have two other possible values which are:

basic: basic type checking rules
strict: All type checking rules at the highest error severity

If you test on the code below you should have a type error in VSCode now

# Wrong type between expected return type and the value type really returned by this function
def wrong_return_type() -> str:
    return False

How to get a React element as an HTML string

Emmanuel Gautier — Sun, 02 May 2021 00:00:00 +0000

For use cases, you may want to have the generated HTML string from your React component instead of a mounted component rendered on the page.

The simplest way is to use the renderToString function provided by the react-dom package :

import { renderToString } from 'react-dom/server'

renderToString(<YourAwesomeComponent props1="value1" props2={{ value: "2" }} />)

The function renderToString can be used on both the server-side and client-side.

If you want to render all page server-side for SEO or UX purposes for example, you can use the function renderToNodeStream to improve your load time.

More informations on the React documentation.

How to manage Internationalization with NextJS SSG

Emmanuel Gautier — Sun, 14 Mar 2021 00:00:00 +0000

Statically generating a website with the NextJS framework in different languages is not so obvious. The framework does not bring clear support for this use case and the NextJS documentation explains that i18n routing is not supported for SSG.

Bootstrap the project

First of all, let's create a new next project from the with-react-intl template

npx create-next-app -e with-react-intl

If don't need anymore to manage any localization client side, you can remove the getInitialProps function and the part for localization in the render function.

The SSR server is useless if you only need SSG as well. So you can remove server tsconfig, server.ts file and change your package.json file script part as follow :

  "scripts": {
    "dev": "next dev",
    "build": "npm run extract:i18n && npm run compile:i18n && next build",
    "export": "next export",
    "extract:i18n": "formatjs extract '{pages,components}/*.{js,ts,tsx}' --format simple --id-interpolation-pattern '[sha512:contenthash:base64:6]' --out-file lang/en.json",
    "compile:i18n": "formatjs compile-folder --ast --format simple lang compiled-lang",
    "start": "next start"
  },

Static Site Generation (aka SSG) with NextJS

When you generate your website statically, it is not possible to use browser request header or any other information from the browser to know which language to use.

We need to introduce a new environment variable NEXT_LOCALE which will contain the locale of the website generated during the export process.

Example of content in .env.* file

NEXT_LOCALE=en

You can now use the NEXT_LOCALE variable in your _app.tsx file in the getInitialProps function to define the locale.

const getInitialProps: typeof App.getInitialProps = async appContext => {
  const locale = appContext.router.locale || process.env.NEXT_LOCALE
  const [supportedLocale, messagePromise] = getMessages(locale)

  const [, messages, appProps] = await Promise.all([
    polyfill(supportedLocale),
    messagePromise,
    App.getInitialProps(appContext),
  ])

  return {
    ...(appProps as any),
    locale: supportedLocale,
    messages: messages.default,
  }
}

Thanks to this variable and the change done, react-intl will now use as locale the content from the env variable. The translated messages taken are now from the right locale.

Now you have a website available for multiple languages. You can build your website for multiple domains as well dealing with multiple build processes, one for each locale. Feel free to implement it with the service you want like Netlify, Vercel, ... etc

The showcase generated for two languages deployed with Vercel :

If you want to know more, have a look into the Source Code

How to render emojis with JavaScript

Emmanuel Gautier — Sun, 28 Feb 2021 00:00:00 +0000

For the content of your posts, emojis add some fun to your pages. This short post explains how to make that possible in JavaScript.

The most conveniant is to use directly the right emoji Unicode. Here a JSX example :

<span>{'\u{1F680}'}</span>

You can also use the node-emoji package to help you manipulate them.

If you want to know what unicode emoji to add, you can find this page useful : Full Emoji List