DEV Community: Hari Kotha

Set environment variables in docker

Hari Kotha — Mon, 08 May 2023 12:19:27 +0000

How to use Env variables in Docker & docker-compose

Dockerfile

1. ENV

Use ENV command to set env variable in Dockerfile.

ENV username=barryallen
echo $username // barryallen

# Build this image and run it as a container
docker build -t docker-env .

docker run docker-env
# logs "barryallen"

Environment variables defined with ENV command are persisted in multiple containers running the same image. These can be overridden using run command with -e flag.

# Use -e or --env to override env variables in Dockerfile via build command
docker run -e/--env "username=clark kent" docker-env

# Use --env-file to use .env file to override env variables in Dockerfile
docker run --env-file .env docker-env

Use this to override a variables in a specific container. Other containers running without -e flag still uses env variable defined in Dockerfile

2. ARG

Use ARG command to use dynamic values that are only necessary while building the image and not needed while running it as container

ARG location="Gotham City"

echo $location // Gotham City

# build the image & run in container
docker build -t docker-env .

docker run docker-env
# location will not be available as ENV variable in containers

This ARG variable can be dynamically passed in build command as 👇

docker build -t app-latest --build-arg "location=Watch Tower"

3. Use ARG as ENV

We can persist ARG variables by mapping them to ENV variables in Dockerfile.

ARG version
ENV VERSION=${version}
echo $VERSION

docker build -t docker-env . --build-arg "version=1.0.1"

docker run docker-env
# 1.0.1

docker-compose

1. environment

docker-env:
    build:
        context: ./
    environment:
        - VERSION=1.0.0

You can set environment variables in a service’s containers with the environment attribute in your Compose file.

This works the same way as docker run -e VARIABLE=VALUE docker-image

2. env_file

docker-env:
    build:
        context: ./
    env_file: .env

Instead of hardcoding env variables in your compose file, you can add those keys in a .env file and provide it to env_file attribute.

This works the same way as docker run --env-file=FILE docker-image

When both env_file and environment are set for a service, values set by environment have precedence.

Thanks for reading!

cheers :)

Checkout my other blogs

Simple intro to SSH

Hari Kotha — Wed, 19 Apr 2023 08:17:15 +0000

SSH authentication is based on private and public keys pair.

User generates a key pair consisting of a private key and a public key. The private key is kept securely on the user's computer, while the public key is uploaded to the server.

When the user tries to connect to the server, the server sends a challenge to the client. The challenge is a random string that is encrypted with the server's public key.

The client receives the challenge and decrypts it using its private key. The client sends the decrypted challenge back to the server.

The server verifies that the decrypted challenge matches the original challenge. If it does, the server grants access to the client. else server rejects the connection.

It's the user that generates their own key pair not the server. The server doesn't send the private key to the user, as that would be a security risk. The private key should always remain on the user's computer and never be shared with anyone else.

Cheers!

Yarn essentials

Hari Kotha — Mon, 10 Apr 2023 18:15:27 +0000

Yarn essentials

Intro

Yarn is a JavaScript package manager used to install/download libraries from npm repository

yarn install

yarn install is used to download libraries those are listed under dependencies object in your package.json file.

How yarn installs the packages

When yarn install is executed, Yarn will fetch the package from the registry which is an npm public repository which contain all the JavaScript libraries contributed by various developers all over the world.

Yarn will download all the files related to that package and install it in your project's node_modules folder. It will also update your package.json file to include the new package as a dependency. yarn.lock file will also get updated with latest dependency tree. Yarn will make sure to install the package's dependencies if they are not already installed in node_modules.



yarn config get registry
// https://registry.yarnpkg.com

Any package installation will direct this 👆 registry url. This will again gets directed to npm’s registry registry.npmjs.org.

Installing scoped private packages

So, Installing packages that are already present in the yarn/npm registry is straight forward. But many a times, while working on a big enterprise applications, we tend to have few libraries which are private to that organisation.

Such libraries are hosted and managed using GitHub package registry - https://npm.pkg.github.com. So to install any private or scoped(@org-name) packages, we will have to point our yarn to this registry.

Also for security reasons, we will have to authenticate with GitHub to verify that we have read/install permissions. We will have to provide auth token (access token) with read/install packages scopes/permissions while installing these packages.

This can be done in 2 ways

1️⃣ Using —registry flag while installing a private library



// update github personal access token
yarn config set npmAuthToken YOUR_GITHUB_PAT --scope=@org-name

// provide github registry
yarn add @org-name/private-package --registry=https://npm.pkg.github.com
// eg: yarn add @twitter/twitter-ui -- registry=https://npm.pkg.github.com

As per example above, this will inform yarn to search and install the twitter-ui package from twitter’s github registry.

2️⃣ Use .npmrc file to add the additional configurations



.npmrc

//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN_1
@org1:registry=https://npm.pkg.github.com

//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN_2
@org2:registry=https://npm.pkg.github.com

Add this at the root of your project where package.json is present. When yarn install/yarn add is executed, yarn will point to those specific repos while installing private/scoped libraries.



//npm.pkg.github.com/org1/:_authToken=YOUR_GITHUB_TOKEN_1

We can also provide authToken specific to scoped repository like this 👆

Other Commands

yarn add

yarn add is used to install a specific library to your project



yarn add lodash

This will install latest version of lodash and add the files to your node_modules and create an entry under dependencies in package.json and updates yarn.lock file

yarn remove

yarn remove will deletes the files of a specific library from the node_modules folder and removes the entry in package.json and updates yarn.lock as well



yarn remove lodash

yarn cache clean

yarn caches the packages that we install into a .cache directory. we can find it in linux at .cache/yarn/v6

To fetch the latest files of the version that is being cached, we will have to clean the cache first.

Use ls | grep package-name command to check for the cached version of any package or use yarn cache list --pattern "gulp|grunt"

Use yarn cache clean package-name to delete the cached version of any package or use yarn cache clean to delete entire global cache.

yarn config list

yarn config list displays the current configuration of yarn which contain details about registry, any auth tokens for scoped GitHub repos

yarn config set



yarn config set init-license MIT

This command sets the init-license key to ‘MIT’

Cheers!

React Portals: Intro

Hari Kotha — Sun, 22 Aug 2021 15:52:38 +0000

This article will cover -

Basic intro to Portals in React.js
Why & How to use react portals

React Portals

Renders react components outside of root DOM element

What is a Portal

React renders all its components inside a single root DOM element (ideally of id = "root").

If instead, we have a use-case where we want to render a component outside of this root element, we use a concept called React Portals.

How to create Portals

Ideally, to bootstrap a react app, we use ReactDOM.render method to render our react app to root element.

<div id="root"></div>

ReactDOM.render(<SomeReactComponent />, document.getElementById('root)

Similarly, To create a portal we use ReactDOM.createPortal method which takes two parameters

React Component or JSX
HTML DOM element

<div id="root"></div>
<div id="portal"></div>

ReactDOM.createPortal(
    <h1>Portal goes here</h1>,
    document.getElementById('portal')
)

Why to use React Portals

We can use Portals while creating a Modal or Popup as these occupy space outside of the normal element ordering/stacking. Modals sometimes cover the whole page for example take a look at the below code -

<Wrapper style={{ maxWidth: '250px', zIndex: 1, position: 'relative' }}>
    <Modal open style={{ zIndex: 1000, postion: 'fixed', top: 0, left: 0 }}>
        <p>Some content inside Modal</p>
    </Modal>
</Wrapper>

<OtherWrapper style={{ zIndex: 100 }}>
    <div>some other content</div>
</OtherWrapper>

As per the example above, Modal is being rendered inside a Wrapper that has max-width limitation and a z-index set to 1. That means even though Modal has a z-index of 1000, it cannot be on top of everything because OtherWrapper has a higher z-index than Wrapper.

Hence, Modal(z-index=1000) will be still under OtherWrapper(zIndex=100) as Modal is inside Wrapper(z-index=1).

To overcome these kinds of issues, we can implement a Portal to render Modal -

  <body>
    <div id="root"></div>
    <div id="portal-root"></div>
  </body>

return ReactDOM.createPortal(
    <div>
        Modal content goes here
    </div>,
    document.getElementById('portal-root')
)

This will render the Modal component inside portal-root DOM element outside the root element. However, this is will be kept as usual in React component tree & events are listened & executed as before.

Thanks for checking!
Stay safe :)

References:
https://reactjs.org/docs/portals.html