DEV Community: Bruno Guimarães

Seamless Migration: Integrating Legacy Components into Next.js with Module Federation

Bruno Guimarães — Thu, 31 Jul 2025 17:08:10 +0000

As modern teams migrate legacy applications to Next.js, a common challenge arises: How do we reuse components from the old app without rewriting them all at once?

Enter Module Federation: a powerful Webpack 5 feature that allows you to load remote components from other applications dynamically. This technique, often called micro frontends, enables incremental migration, shared components, and reduced duplication.

In this guide, we walk through:

Why Module Federation is effective for migrations
A practical example: Next.js (new app) + Legacy React (old app)
Step-by-step setup
Best practices for maintainability

Why Use Module Federation During Migration?

Imagine you’re migrating from a legacy React app (e.g. Create React App) to Next.js. Rewriting every UI component is expensive, risky, and often unnecessary.

Module Federation allows you to:

Reuse legacy UI components in the new app
Avoid duplicating shared logic or design systems
Split teams across legacy and modern stacks
Migrate pages or features incrementally

Unlike iframes or SSR proxies, this approach delivers live React components with full interactivity.

Architecture Overview

+---------------------------+     +------------------------------+
|      Legacy React App     | --> | remoteEntry.js (Exposes UI) |
+---------------------------+     +------------------------------+
                                             ↳
                                       consumed by
                                             ↳
+---------------------------+     +------------------------------+
|       Next.js App         | <-- |  LegacyBanner (Remote UI)   |
+---------------------------+     +------------------------------+

Step-by-Step: Setup Module Federation

Prerequisites

Both apps use Webpack 5
Legacy app exposes components
Next.js app consumes components

1. Legacy App (Remote)

In webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  output: {
    publicPath: 'http://localhost:3002/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'legacyApp',
      filename: 'remoteEntry.js',
      exposes: {
        './LegacyBanner': './src/components/LegacyBanner',
      },
      shared: {
        react: { singleton: true, eager: true },
        'react-dom': { singleton: true, eager: true },
      },
    }),
  ],
};

Ensure remoteEntry.js is publicly accessible.

2. Next.js App (Host)

Install helper package:

npm install @module-federation/nextjs-mf --save-dev

In next.config.js:

const { withFederatedSidecar } = require('@module-federation/nextjs-mf');

module.exports = withFederatedSidecar({
  name: 'nextApp',
  remotes: {
    legacyApp: 'legacyApp@http://localhost:3002/remoteEntry.js',
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
  },
});

3. Use Remote Component in Next.js

// components/LegacyBanner.tsx
import dynamic from 'next/dynamic';

const LegacyBanner = dynamic(() => import('legacyApp/LegacyBanner'), {
  ssr: false,
});

export default function Page() {
  return (
    <div>
      <h1>Modern Page</h1>
      <LegacyBanner />
    </div>
  );
}

Gotchas and Best Practices

Tip	Why It Matters
Use `singleton` for `react` and `react-dom`	Prevents hook mismatch errors
Load remotes dynamically with `ssr: false`	SSR support is experimental
Wrap remotes in error boundaries	Network failures can break the page
Expose only what you need	Smaller bundles, less leakage
Add CORS headers on legacy server	Required for cross-origin loading

Final Thoughts

Module Federation is one of the most powerful tools for modernizing frontends without a complete rewrite.

It provides:

Better developer experience
Lower risk
Shared code and components

If you're deciding between rewriting everything or never touching the legacy app, Module Federation offers a practical alternative.

My Road to Learn DevOps, Part 3: Mastering CI/CD Pipelines

Bruno Guimarães — Tue, 12 Mar 2024 13:01:21 +0000

Welcome back to our journey through the DevOps landscape! In this installment, we zero in on two critical components: Continuous Integration and Continuous Deployment (CI/CD) and Infrastructure as Code (IaC). Mastering these areas not only streamlines your workflow but also enhances the scalability, reliability, and efficiency of your infrastructure management and application deployment processes.

Continuous Integration and Continuous Deployment (CI/CD)

CI/CD stands at the core of DevOps, embodying the philosophy of continuous improvement and automation in software development processes. Let's break down how to set up and optimize a CI/CD pipeline.

Setting Up Your First CI/CD Pipeline

Choose a CI/CD Tool: Jenkins, GitLab CI, CircleCI, and GitHub Actions are popular choices. For our example, we'll use GitHub Actions.

CI/CD with GitHub Actions and GitFlow

The combination of GitHub Actions for CI/CD and the GitFlow workflow offers a robust strategy for managing features, releases, and fixes within your project lifecycle. Let's set up a CI/CD pipeline that complements the GitFlow approach.

Setting Up GitHub Actions for GitFlow

GitFlow is a branching model for Git, designed around project releases. It primarily involves two branches with an infinite lifetime:

main branch stores the official release history.
develop branch serves as an integration branch for features.

Additionally, it utilizes three supporting branch types for features, releases, and hotfixes:

Feature branches: Branch off from develop and merge back on completion.
Release branches: Branch off from develop and merge into main and back into develop when the release is complete.
Hotfix branches: Branch off from main and merge back into both main and develop.

Example GitHub Actions Workflow for GitFlow

To automate this workflow, create a .github/workflows/ci-cd-pipeline.yml file in your repository. This example CI/CD pipeline builds and tests code from feature branches and deploys releases from the main branch.

name: CI/CD Pipeline with GitFlow

on:
  push:
    branches:
      - 'features/**'
      - 'main'
  pull_request:
    branches: 
      - 'develop'

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Build
      run: echo "Add build commands here"
    - name: Test
      run: echo "Add test commands here"

  deploy:
    runs-on: ubuntu-latest
    needs: build-and-test
    if: github.ref == 'refs/heads/main'
    steps:
    - uses: actions/checkout@v2
    - name: Deploy
      run: echo "Add deployment commands here"
      env:
        DEPLOY_ENV: production

This workflow triggers on pushes to feature branches (prefixed with features/) and the main branch, as well as pull requests to the develop branch. It includes jobs for building/testing the application and conditional deployment for changes merged into main.

Continuous Integration and Deployment Best Practices with GitHub Actions

Automate testing: Ensure every push or pull request triggers automated tests to catch bugs early.
Branch protections: Set up branch protection rules in GitHub to prevent direct pushes to main and develop, requiring pull requests and reviews for changes.
Use environment secrets(variables): Securely store and use environment-specific secrets for deployments.

As we wrap up our exploration of CI/CD with GitHub Actions and the GitFlow workflow, we've equipped ourselves with a powerful toolkit for automating and streamlining the software development process. The journey through CI/CD has not only refined our approach to building and deploying applications but also set the stage for the next critical step in our DevOps evolution: managing our infrastructure with the same agility and precision as our code.

Teasing the Horizon: Terraform Awaits
The progression towards complete automation doesn't stop here. Our next chapter delves into Terraform, a tool that embodies the principle of Infrastructure as Code (IaC). With Terraform, we'll learn to manage our infrastructure using configuration files, enabling us to provision, update, and maintain our infrastructure efficiently and predictably.

Stay tuned for Part 3.5, where we'll bridge the gap between software and infrastructure, transforming the way we deploy and manage our environments. The integration of CI/CD practices with IaC through Terraform represents a leap forward in our DevOps journey, bringing us closer to a seamless, automated pipeline from code commit to production deployment.

My Road to Learn DevOps, Part 2: To Advanced Shell Scripting and Beyond!

Bruno Guimarães — Tue, 20 Jun 2023 19:55:59 +0000

In the first part of our journey, we dipped our toes into the world of DevOps, exploring the basics of Linux commands and shell scripting. Now, it's time to dive deeper. We'll explore advanced shell scripting concepts and tackle some practical applications to showcase the expertise sought by those looking for in-depth DevOps knowledge.

Advanced Shell Scripting

Shell scripting enables us to automate tasks, manage systems, and much more. Let's go a step further and explore some advanced concepts - functions, command-line arguments, arrays, error handling, and regular expressions.

Functions in Shell Scripting

A function is a reusable code snippet that performs a specific task. Functions are a fundamental part of clean and efficient code. Here's an example:

#!/bin/bash
greet() {
    echo "Hello, $1"
}
greet "John Doe"

Command-line Arguments

Scripts can accept input directly from the command line, adding to their flexibility. Here's how to implement this:

#!/bin/bash
echo "Hello, $1"

When running this script with the argument "John Doe" (i.e., ./script.sh "John Doe"), it will display "Hello, John Doe".

Arrays in Shell Scripting

Arrays allow you to store multiple values within a single variable, and they are particularly useful when working with large datasets.

#!/bin/bash
fruits=("Apple" "Banana" "Cherry")
for fruit in "${fruits[@]}"
do
    echo "I like $fruit"
done

Error Handling in Shell Scripting

Handling errors properly makes your scripts more robust and easier to debug. Here's an example:

#!/bin/bash
set -euo pipefail
invalid_command
echo "This won't print"

The set -euo pipefail command is a handy tool that tells the shell to exit the script if any command it executes fails.

Regular Expressions in Shell Scripting

Regular expressions (regex) are powerful tools for pattern matching and data extraction. Here's how you could use them:

#!/bin/bash
text="The year is 2023"
echo "$text" | grep -oE '[0-9]+'

This script will output "2023". The -o option tells grep to output only the matched segment, and -E enables extended regular expression syntax.

Practical Applications

I've found out that during my learning process, it's not just about knowing the concepts. It's about how you apply them.

Automating System Maintenance

With shell scripting, we can automate system maintenance tasks such as log file analysis. Here's an example:

#!/bin/bash
LOG_FILE="/var/log/syslog"
ERROR_PATTERN="error"
grep -i $ERROR_PATTERN $LOG_FILE > errors.txt

This script searches the system log file for entries containing "error" and writes them into a new file. You can schedule this script using a tool like cron to run daily, providing a convenient summary of potential issues.

Resource Monitoring

We can monitor resources such as CPU and memory usage, ensuring our systems are running efficiently:

#!/bin/bash
DATE=$(date '+%Y-%m-%d %H:%M:%S')
CPU_USAGE=$(top -bn1 | grep "Cpu(s)" | sed "s/.*, *\([0-9.]*\)%* id.*/\1/" | awk '{print 100 - $1"%"}')
MEMORY_USAGE

=$(free -m | awk 'NR==2{printf "%.2f%%", $3*100/$2 }')
echo "At $DATE, CPU usage is $CPU_USAGE, Memory usage is $MEMORY_USAGE" >> resource_usage.log

This script logs current CPU and memory usage, appending the information to a log file. Like the previous example, you can run this script regularly using cron.

Backup Management

Ensuring data security through regular backups is critical. With shell scripting, you can automate your backup process. Here's an example of a script that creates a backup of a directory:

#!/bin/bash
BACKUP_SRC="/path/to/your/directory"
BACKUP_DEST="/path/to/your/backup/location"
DATE=$(date +%Y%m%d)
tar -czf $BACKUP_DEST/backup_$DATE.tar.gz -C $BACKUP_SRC .

This script creates a compressed tarball of the specified directory and saves it to the backup location with the current date in the filename.

Server Health Check

Another common task that we can see on systems is checking the health of servers. Here's a script that performs a simple health check by pinging a server:

#!/bin/bash
SERVER="your.server.com"
ping -c 1 $SERVER
if [ "$?" -ne 0 ]; then
    echo "$SERVER not reachable"
else
    echo "$SERVER is up"
fi

This script pings the server once. If the ping command fails (returning anything other than 0), it indicates the server isn't reachable. Otherwise, it confirms the server is up.

Checking Disk Space Usage

Monitoring disk space usage is another crucial task that can be automated using shell scripts. Here's an example:

#!/bin/bash
MAX_USAGE=90
EMAIL="admin@example.com"
for partition in $(df -h | grep "^/" | awk '{print $1}')
do
    USAGE=$(df -h | grep $partition | awk '{ print $5}' | sed 's/%//g')
    if [ $USAGE -gt $MAX_USAGE ]; then
        echo "Running out of disk space in $partition" | mail -s "Disk Space Alert" $EMAIL
    fi
done

This script checks the usage of all partitions and sends an email to the system administrator if the usage exceeds 90%.

Bridging the Gap: Scheduling Jobs in Linux

So, now that we've navigated through the fundamentals of Linux commands and shell scripting, let's take the leap into more intricate territories.

Cron is a time-based job scheduling service in Unix-like operating systems, including Linux. It enables users to schedule jobs (commands or scripts) to run at specific times or on specific days.

Time Management with Cron

As we transition from our exploration of advanced shell scripting concepts, it's essential to understand how these scripts can be scheduled to execute automatically. This brings us to Cron—a time-based job scheduling utility in Unix-like operating systems.

Cron allows you to schedule jobs (commands or scripts) to run at specific times or on specified days, which is a fundamental aspect of systems administration and DevOps.

For instance, you might need to perform regular backups, monitor system health, or automate system maintenance—Cron can handle all of these tasks efficiently.

A crontab file is a simple text file that contains a list of commands meant to be run at specified times. These commands (and their related files) are executed by the cron daemon, which launches them in the system's background.

You can open the crontab file for editing using the following command:

crontab -e

A cron job's time schedule is expressed using a syntax that includes five fields:

*     *     *   *    *        command to be executed
-     -     -   -    -
|     |     |   |    |
|     |     |   |    +----- day of the week (0 - 6) (Sunday=0)
|     |     |   +------- month (1 - 12)
|     |     +--------- day of the month (1 - 31)
|     +----------- hour (0 - 23)
+------------- min (0 - 59)

The asterisk (*) means every possible value for that field. For example, an asterisk in the hour field would be the same as 'every hour'.

Now, let's look at practical examples of using cron jobs.

Scheduling a Backup Job

You can use cron to automate the backup script we discussed earlier. For instance, you could schedule it to run every day at midnight like this:

0 0 * * * /path/to/your/backup_script.sh

This tells cron to run your backup script at minute 0 of hour 0 (which is midnight) of every day of the month, every month, and every day of the week.

Running a Health Check Every Hour

You could run the server health check script we discussed earlier every hour like this:

0 * * * * /path/to/your/health_check_script.sh

This tells cron to run your health check script at minute 0 of every hour of every day of the month, every month, and every day of the week.

Running a Disk Space Check Twice a Day

The disk space check script could be run twice a day - once at noon and once at midnight - like this:

0 0,12 * * * /path/to/your/disk_space_check_script.sh

This tells cron to run your disk space check script at minute 0 of hour 0 and hour 12 (which is noon) of every day of the month, every month, and every day of the week.

Remember, it's essential to ensure that your scripts have the correct permissions to be executed. Also, make sure that you provide the full path to your script when setting up your cron job. You can save and exit the crontab file after you've added your jobs. The cron daemon will automatically pick up the changes and execute your scripts according to the schedule you've defined.

The Learning Continues

Deepening our knowledge of DevOps and shell scripting is a journey of continuous learning, it's not just about understanding the tools and languages—it's about practical implementation. Through application, we transform knowledge into expertise. Stay tuned for more! Cheers!

My road to learn devOps, Part 1

Bruno Guimarães — Mon, 12 Jun 2023 21:34:42 +0000

As someone who is new to the world of DevOps, I'm excited to dive deep into the intricacies of Linux commands and shell scripting. It's clear that they play an essential role in my journey towards becoming a proficient DevOps professional. This comprehensive guide on Linux commands and shell scripting will be my initial stepping stone.

I understand that mastering Linux commands and shell scripting is a necessity for me. These skills will empower me to automate tasks, manage systems effectively, and solve complex problems with ease. Although this guide provides an extensive overview, it only scratches the surface of these vast topics. Hence, I'll make sure to explore more resources available online, such as in-depth tutorials and documentation.

Linux Commands

Linux commands are the essence of any Linux environment. They allow us to interact with the system and perform a myriad of tasks. Here are some fundamental commands that every aspiring DevOps professional must know:

ls: This command is used to list all the files and directories in the current working directory. E.g., ls
cd: This command is used to change the current directory. E.g., cd /home/user/Documents
pwd: This command prints the current working directory. E.g., pwd
cat: This command is used to display the contents of a file. E.g., cat example.txt
touch: This command creates an empty file. E.g., touch newfile.txt
rm: This command removes files or directories. E.g., rm example.txt
cp: This command copies files or directories. E.g., cp source.txt destination.txt
mv: This command moves files or directories. It's also used to rename files. E.g., mv oldname.txt newname.txt
find: This command searches for files or directories based on given criteria. E.g., find / -name example.txt
grep: This command searches for a text pattern within files. E.g., grep "example" file.txt

These are basic commands. To work efficiently as a DevOps professional, you need to master many more commands related to system management, process management, networking, and more.

Shell Scripting

Shell scripting is writing a series of command for the shell to execute. It can combine lengthy and repetitive sequences of commands into a single script, which can be stored and executed anytime. This reduces the effort required by the end-user.

Basics of Shell Scripting

A shell script begins with a "shebang" (#!) followed by the path to the shell that will interpret the script. Most often, this will be /bin/bash. Here's an example of a basic shell script:

#!/bin/bash
echo "Hello, World!"

In this script, echo is a command that outputs the strings it is being passed as arguments. So when this script is run, it will display "Hello, World!".

You can execute a shell script by giving it the appropriate permissions using the chmod command and then running it. For example:

chmod +x script.sh
./script.sh

The first command gives the script execution permissions, and the second runs the script. The output will be: Hello, World!

Variables in Shell Scripting

Variables can be declared in shell scripts to store information. Here's an example:

#!/bin/bash
name="John Doe"
echo "Hello, $name"

In this script, name is a variable that holds the string "John Doe". When the script is run, it will display "Hello, John Doe".

Conditional Statements

in Shell Scripting

Shell scripts can also contain conditional statements. Here's an example:

#!/bin/bash
read -p "Enter your name: " name
if [ "$name" == "John Doe" ]; then
    echo "Hello, John Doe."
else
    echo "You are not John Doe!"
fi

In this script, the read command takes user input. If the entered name is "John Doe", the script will display "Hello, John Doe.". Otherwise, it will display "You are not John Doe!".

Loops in Shell Scripting

Loops can be used in shell scripts to perform repetitive tasks. Here's an example:

#!/bin/bash
for ((i=1; i<=5; i++)); do
    echo "Iteration: $i"
done

This script will display "Iteration: 1", "Iteration: 2", ..., "Iteration: 5".

Shell Scripting in DevOps

Shell scripting is crucial in the DevOps field as it automates the routine tasks. It’s used for automating the system maintenance tasks, network monitoring, updating systems in batches, data backup, and more.

Here is an example of a shell script that would check the disk usage and send an email to the system admin if it's over 90%:

#!/bin/bash
MAX_USAGE=90
EMAIL="admin@example.com"
USAGE=$(df / | grep / | awk '{ print $5}' | sed 's/%//g')
if [ $USAGE -gt $MAX_USAGE ]; then
    echo "Running out of disk space" | mail -s "Disk Space Alert" $EMAIL
fi

In this script, df is a command that reports the system's disk space usage, awk is a command-line tool for manipulating text, and sed is a stream editor for filtering and transforming text. mail is a command for sending emails.

As I venture into the world of DevOps, I'm conscious that I will also need to grasp concepts like Continuous Integration/Continuous Deployment (CI/CD), infrastructure as code (IaC), virtualization, and containerization. Additionally, I should familiarize myself with tools like Docker, Jenkins, Kubernetes, and Ansible, among others.

I'm excited to embark on this journey and am eager to learn. I'm determined to keep expanding my knowledge base and never stop learning. Here's to my successful journey towards becoming a DevOps professional! Cheers!

Bridging the Gap: The State of AI in Web Development

Bruno Guimarães — Thu, 01 Jun 2023 13:56:37 +0000

As we venture further into 2023, artificial intelligence (AI) continues to demonstrate an increasingly impressive capacity to revolutionize various industries. A domain experiencing a transformative influence of AI is web development. Today, we shall delve into the current state of AI in web development and explore how this groundbreaking technology is redefining the landscape of web design, user experience, and overall web functionality.

1. AI and Web Design

The use of AI in web design has become increasingly popular. Advanced AI tools and platforms are now capable of generating web designs from scratch, often within minutes. Applications like Wix's ADI (Artificial Design Intelligence) and Firedrop's Sacha employ AI to create customized website templates tailored to individual user preferences. These tools use AI algorithms to select from countless design options, ensuring the output is both aesthetic and functional.

Furthermore, the integration of AI in design systems promotes inclusivity in web accessibility. By leveraging AI, developers can now create more accessible websites for people with disabilities. This technology helps ensure that web content is readable for visually impaired users, enhance navigation for users with motor skill limitations, and more.

2. AI in User Experience (UX) and User Interface (UI)

AI is proving to be a game-changer in the realm of UX/UI. Personalized user experiences are becoming the new norm, thanks to AI's ability to learn user behavior and preferences. Machine Learning algorithms can analyze vast volumes of data, enabling websites to tailor content, recommendations, and overall user interactions to individual users.

Chatbots and virtual assistants, powered by AI, have also become an integral part of modern websites. These entities can simulate human conversation, providing real-time assistance and creating a personalized, engaging user experience.

3. AI in SEO and Web Analytics

SEO optimization is another crucial aspect where AI is making a significant impact. With tools like BrightEdge or Market Brew, AI is used to optimize website content to perform better on search engine rankings. AI's capability to analyze data, understand trends, and predict future outcomes allows for more strategic keyword usage, effective link-building, and relevant content generation.

Simultaneously, AI-powered web analytics tools can analyze user behavior, website performance, and traffic data with remarkable precision. This data can then be used to inform website adjustments and marketing strategies, enhancing the overall efficacy of web presence.

4. AI and Web Security

Last but certainly not least, AI is playing an essential role in bolstering web security. AI-based security systems can identify patterns and anomalies in user behavior to detect potential threats, such as DDoS attacks or attempts at data breaches. Such preemptive measures contribute significantly to safeguarding sensitive user data and maintaining website integrity.

The Future of AI in Web Development

AI's influence in web development is just beginning. With the continual advancements in AI technology, we can anticipate the development of more sophisticated AI tools capable of automating even more web development processes. The era of smart websites is on the horizon, where websites would be more interactive, adaptive, and personalized than ever.

However, the increased integration of AI also poses ethical and privacy concerns that need to be addressed. Balancing AI capabilities with ethical considerations, data privacy, and security is an ongoing challenge in this field.

In conclusion, the state of AI in web development is dynamic, exciting, and poised to reshape the entire web development industry. It's an enthralling epoch for both web developers and users, as AI continues to break new grounds in enhancing the web experience. In the coming years, AI's role in web development is expected to expand even further, ushering us into an era of unprecedented digital experiences.