DEV Community: Biswarup Adhikari

Streamlining React App Deployments: Overcoming Docker Build Args Limitations with `env-config.js`

Biswarup Adhikari — Wed, 03 Apr 2024 12:59:23 +0000

When deploying React applications or any javascript based frontend applications such as Angular, Vuejs etc across various environments like development, staging, and production, developers often face a common challenge with Docker: the limitations of build arguments (--build-arg). Build arguments are frequently used to pass environment-specific configurations to a Docker image at build time. However, this approach hardcodes the values into the image, reducing flexibility and requiring separate builds for each environment. This article explores an alternative strategy using env-config.js, enhancing the reusability and flexibility of Docker images across different environments.

Understanding the Problem with Docker Build Args

Docker's build arguments allow you to pass configuration during the image build process. For instance:

ARG REACT_APP_API_URL
ENV REACT_APP_API_URL=$REACT_APP_API_URL

While this method is effective for injecting environment variables into the Docker image, it has a significant drawback. The variables become hardcoded into the image. As a result, the same image cannot be reused across different environments (dev, staging, prod) without rebuilding it for each one. This leads to a lack of flexibility and increased complexity in your CI/CD pipeline.

The Solution: `env-config.js`

A more flexible approach involves using a JavaScript file, env-config.js, generated dynamically at runtime. This file is created using a bash script and loaded before your React application starts:

#!/bin/bash
echo "window._env_ = {" > /var/www/html/env-config.js
echo "  REACT_APP_API_URL: \"${REACT_APP_API_URL}\"" >> /var/www/html/env-config.js
echo "}" >> /var/www/html/env-config.js

With this setup, the environment variables are not hardcoded into the Docker image. Instead, they are injected at runtime, allowing the same image to be used across multiple environments.

Integrating `env-config.js` with Docker

Here's how to configure the Dockerfile for this approach:

# Build stage for React app
FROM node:latest as build
WORKDIR /app
COPY package.json ./
COPY yarn.lock ./
RUN yarn install
COPY . ./
RUN yarn build

# Nginx stage
FROM nginx:alpine
COPY --from=build /app/build /var/www/html
COPY env-to-js.sh /usr/local/bin/
RUN chmod +x /usr/local/bin/env-to-js.sh
CMD ["/bin/sh", "-c", "/usr/local/bin/env-to-js.sh && nginx -g 'daemon off;'"]

This Dockerfile builds the React app and sets up Nginx to serve it. The critical addition is the env-to-js.sh script that generates env-config.js at container startup, injecting the current environment's variables.

Accessing Environment Variables in React

In your React application, access these variables from the global window object:

const apiUrl = window._env_.REACT_APP_API_URL || 'default-api-url';

Security Considerations

It’s important to note that any information in env-config.js is publicly visible. Be cautious not to include sensitive data like private API keys, secrets etc. Treat env-config.js as a publicly accessible resource.

Conclusion: Enhanced Flexibility and Reusability

By adopting the env-config.js strategy in your Dockerized React application, you achieve significant flexibility. This approach allows you to use the same Docker image across various environments without the need for separate builds, simplifying your deployment process and enhancing maintainability.

ChronoMate: Your Ultimate Time Zone Companion for Seamless Productivity and Scheduling Ease!

Biswarup Adhikari — Wed, 02 Aug 2023 06:27:27 +0000

In today's interconnected world, global collaboration has become the norm for businesses and individuals alike. However, the challenges of managing time zone differences often lead to confusion, missed opportunities, and reduced productivity. But fear not! ChronoMate, a game-changing Chrome extension, is here to simplify your life and empower you to conquer time zone complexities effortlessly.

A user-friendly Interface

ChronoMate's intuitive and user-friendly interface is designed to streamline your experience. With just a few clicks, you can seamlessly switch between various time zones, making scheduling and collaboration a breeze. No more fumbling with multiple clocks or struggling to calculate time differences manually. ChronoMate puts all the information you need at your fingertips, ensuring you're always informed and in control.

Stay informed with real-time clocks

One of the standout features of ChronoMate is its ability to display the current time in multiple time zones simultaneously. This real-time clock feature enables you to stay on top of your global commitments and plan your day with precision. Whether you're arranging meetings, setting deadlines, or coordinating tasks, ChronoMate ensures you never miss a beat.

Custom Time Selection and Time Zone Converter

ChronoMate goes beyond basic time zone tracking. You can select a specific time in any time zone, allowing you to plan meetings and events with efficiency. Need to coordinate a conference call with team members from different continents? No problem! ChronoMate's time zone converter effortlessly transforms any time to another time zone with absolute precision and accuracy.

Personalized Settings

We understand that everyone has unique preferences when it comes to working across time zones. With ChronoMate, you can personalize your settings to prioritize frequently used time zones, ensuring your workflow is optimized for maximum productivity.

Offline Mode

Worried about accessing your time zone data during internet outages or while traveling? ChronoMate has you covered! With its offline mode, you can still access your saved time zone data, keeping you prepared even in the absence of an internet connection.

Transform Your Productivity with ChronoMate

ChronoMate is not just another tool; it's your ultimate time zone companion, built to cater to the needs of business professionals, remote workers, and globetrotting individuals. Say goodbye to the headache of managing time zones and welcome a new era of seamless productivity and time management.

Join the ChronoMate Revolution!

Ready to embrace the power of ChronoMate? The Chrome extension is just a click away. Download ChronoMate today from the Chrome Web Store and experience the unparalleled convenience of managing time zones effortlessly. With ChronoMate by your side, you can conquer time zone complexities and boost your productivity like never before.

Don't let time zones be a barrier to your success. Embrace ChronoMate, and witness the transformation in your work efficiency. Let ChronoMate take care of time zones, so you can focus on what truly matters - getting things done and achieving your goals, no matter where in the world they take you! 🌏🕰️

https://chrome.google.com/webstore/detail/chronomate-time-zone-mast/adnnkfmdgipedgdmpiekokndlkmanann

Mirroring GitLab to GitHub: A Step-by-Step Guide with Public Key Authentication

Biswarup Adhikari — Thu, 02 Mar 2023 06:22:55 +0000

Introduction

GitLab and GitHub are two of the most popular code hosting platforms used by developers around the world. Sometimes, you may need to mirror a GitLab repository to a GitHub repository for backup or collaboration purposes. Manually doing this can be time-consuming, especially if you have multiple repositories to mirror. Fortunately, you can automate the process using a shell script. In this article, we will show you how to do this with a simple example shell script.

Prerequisites

Before we begin, you need to have the following:

A GitLab account with a repository that you want to mirror to GitHub.
A GitHub account with a repository where you want to mirror the GitLab repository.
Git installed on your local machine.
SSH keys set up and added to your GitLab and GitHub accounts for authentication.

Step 1: Set up the Shell Script

To mirror a GitLab repository to a GitHub repository, we will use a shell script. Here is an example script that you can use:

#!/bin/bash

# Define an array that maps GitLab and GitHub repository URLs
declare -A repo_map=(
    ["https://gitlab.com/username/repo.git"]="https://github.com/username/repo.git"
    ["https://gitlab.com/username/other-repo.git"]="https://github.com/username/other-repo.git"
)

# Loop through the array and mirror each GitLab repository to its corresponding GitHub repository
for gitlab_url in "${!repo_map[@]}"; do
    github_url="${repo_map[$gitlab_url]}"
    repo_name="$(basename "$gitlab_url" .git)"

    # Clone the GitLab repository
    git clone --mirror "$gitlab_url"

    # Change to the local repository directory
    cd "$repo_name.git"

    # Add the GitHub repository as a remote
    git remote add github "$github_url"

    # Push all branches and tags to the GitHub repository
    git push --mirror github

    # Remove the local repository directory
    cd ..
    rm -rf "$repo_name.git"
done

This script defines an associative array repo_map that maps GitLab and GitHub repository URLs. The loop then clones each GitLab repository using git clone --mirror, adds the GitHub repository as a remote using git remote add, and pushes all branches and tags to the GitHub repository using git push --mirror.

Make sure to replace the GitLab and GitHub repository URLs in the repo_map array with the URLs for your own repositories.

Save this script to a file, for example, mirror.sh.

Step 2: Make the Shell Script Executable

Next, we need to make the shell script executable. Run the following command in the terminal:

chmod +x mirror.sh

This command gives the script execution permission.

Step 3: Run the Shell Script

Now we can run the shell script to mirror the GitLab repository to the GitHub repository. To do this, run the following command:

./mirror.sh

This command runs the mirror.sh script and starts the mirroring process.

The script will loop through each GitLab repository in the repo_map array, clone it, add the GitHub repository as a remote, and push all branches and tags to the GitHub repository.

Once the script has finished running, all of your GitLab repositories should be mirrored to your GitHub repositories.

Conclusion

Mirroring GitLab repositories to GitHub repositories can be a tedious process, especially if you have multiple repositories to mirror

Notes:

In addition to GitLab and GitHub, this technique can be used to mirror repositories from other code hosting platforms such as Bitbucket, AWS CodeCommit, and others. You simply need to modify the script to use the correct URLs for the repositories that you want to mirror.

To mirror repositories from other providers, you will need to modify the repo_map array in the script to use the correct URLs for each repository. For example, if you want to mirror a Bitbucket repository to a GitHub repository, you would replace the GitLab and GitHub URLs in the repo_map array with the Bitbucket and GitHub URLs respectively.

Additionally, you may need to modify the SSH keys that you use for authentication depending on the code hosting platform that you are mirroring from and to. However, the process of setting up SSH keys is similar for most code hosting platforms and can usually be done through the user settings or profile pages.

In conclusion, this shell script can be a powerful tool for automating the process of mirroring repositories between different code hosting platforms, saving you time and effort. With a little bit of modification, you can use this technique to mirror any provider's repositories, including GitLab, GitHub, Bitbucket, AWS CodeCommit, and more.

A Quick Guide to Changing Laravel Passwords Using Tinker

Biswarup Adhikari — Sat, 25 Feb 2023 08:09:01 +0000

To change a user's password in Laravel using Tinker, you can follow these steps:

Step 1: Open your terminal and navigate to your project directory.

Step 2: Type php artisan tinker to enter the Tinker shell.

Step 3: Retrieve the user by finding the user instance. For example, if you want to change the password for a user with ID 1, you can use the following command:

$user = App\Models\User::find(1);

Step 4: Update the password for the user using the bcrypt function to encrypt the password. For example:

$user->password = bcrypt('new_password');

Step 5: Save the changes by calling the save method on the user instance:

$user->save();