Forem: Anadee

DFF: Docker for Frontend Folks

Anadee — Wed, 18 Feb 2026 21:16:30 +0000

This blog is written specifically for frontend engineers who are curious about Docker but feel it’s too DevOps-y, too backend, or too complicated.

If you’ve ever heard:

“It works on my machine.”

Docker exists to kill that sentence.

While you can always Google the definition of Docker, I’ll break it down simply.

At its core, Docker lets you ship your app with its environment so it runs the same everywhere.

Think of it like this:

Docker = a runnable zip file

Not just your code, but:

Node version
Dependencies
Build output
Web server
Environment assumptions

All packed into a container.

The Problem Docker Solves

Normally, running an app means:

Install Node
Match versions
Install dependencies
Configure ports
Pray nothing breaks

With Docker:

You build once
You run anywhere
No setup questions

Docker Basics

1. Build an Image

An image is just a blueprint. It contains everything needed to run an app.

docker build -t my-app .

After running this command:

Docker reads instructions from the Dockerfile
Creates a Docker image
Tags (-t) it as my-app

2. Run a Container

A container is a live, running instance of your app.

docker run -d -p 8080:80 my-app

What happens:

A container is created from the image
App runs in the background (-d → detached mode)
Port 8080 on your machine maps to 80 inside the container

Dockerizing a React App

Let’s go through a minimal, beginner-friendly example.

No DevOps jargon — just Dockerizing a React app the easy way.

Step 1: Build the React App

npm run build

This creates a /build folder with static assets.

Step 2: Create a `Dockerfile`

Mental model:

Build happens outside
Docker only serves the output

A minimal Dockerfile:

FROM nginx:alpine
COPY build /usr/share/nginx/html
EXPOSE 80

That’s it.

No Node.

No npm.

Just static files served by Nginx.

Note: This setup works best for simple SPA-style React apps and may need tweaks for client-side routing. The goal here is to understand Docker basics, not cover every edge case.

Step 3: Build & Run

docker build -t my-react-app .
docker run -d -p 8080:80 my-react-app

Now visit:

http://localhost:8080

🎉 Your React app is running inside Docker.

Why This Matters

Once dockerized, your app runs identically on:

Your laptop
EC2
DigitalOcean
Kubernetes

No more “Node version mismatch” bugs.

Final Thoughts

A server is just a computer.

A container is just a process.

Docker is just packaging.

Once this clicks, cloud stops being scary.

If this gets a good response, I’m planning to write about demystifying cloud for frontend engineers next.

Getting Started With React Flow

Anadee — Tue, 29 Aug 2023 17:09:08 +0000

Building node-based editors and pages with interactive diagrams has never been so easy.

Why React Flow

React Flow is an interactive JavaScript library. Being built on top on React and the super detailed documentation makes it very easy to make customizable components with interactive flowcharts, diagrams, and graphs.

Introduction

-> Nodes : A Node is a React Component. Basically it can render anything. By default, a Node looks like this.

We can create Custom Nodes which can be used to do stuff like :

Render form elements
Visualize data
Support multiple handles

Nodes can be defined as :

const nodes = [
  {
    id: '1', //required
    position: { x: 0, y: 0 },//required
    data: { label: 'Hello' },//optional
    type: 'input', //optional
  },
{
    id: '2',
    position: { x: 100, y: 100 },
    data: { label: 'Hello' },
  },
];

We can use other components as labels

-> Edges : An edge is used to connect two nodes. Every edge needs a source and a target node. React flow comes with four built-in edge types :

Bezier(Default)
Smoothstep
Step
Straight

Edges can be styled using CSS and are completely customizable.
You can play around with Edges to make Custom Edges to:

Add a button to remove an edge
Custom routing behaviour to match with the application design and requirements.

If we have two or more nodes, edges can be defined as :

const edges = [{ id: '1-2', source: '1', target: '2' }];

-> Handles : It is the place where an edge gets connected to the Node. The handle can be placed anywhere, and styled as you like.

Let's Jump On to Creating a Simple Flow :

Firstly, let's start with Adding React Flow to your react app

npm install reactflow

yarn add reactflow

The reactflow package exports the <ReactFlow /> component as the default export.
Next, is to use this component to create a basic flow.

import ReactFlow from 'reactflow';
import 'reactflow/dist/style.css';
function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

export default Flow;

The < ReactFlow /> component must be wrapped in an element with a width and height.
Remember to import the ReactFlow Styles .

<ReactFlow /> component has various attributes.
The important ones to start with are nodes and edges.

React Flow also offers some built-in plugins, few of the one's I find useful are : Controls, MiniMap and Background.

They can be used as :

<ReactFlow nodes={nodes} edges={edges}>
     <Background />
     <Controls />
     <MiniMap />
</ReactFlow>

And now, the basic version looks like :

Interactiveness
To make this interactive, so that one can drag, remove and select nodes and edges we have to implement a onNodesChange and onEdgesChange handler.

Firstly, setup states for both nodes and edges.
The initial state will be set as nodes and edges we declared.

const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState(initialEdges);

Next, we need to implement the handlers.

const onNodesChange = (changes) => {
    setNodes((prevNodes) => {
      const updatedNodes = applyNodeChanges(changes, prevNodes);
      return updatedNodes;
    });
  };
  const onEdgesChange = (changes) => {
    setEdges((prevEdges) => {
      const updatedEdges = applyEdgeChanges(changes, prevEdges);
      return updatedEdges;
    });
  };

React Flow provides the applyNodeChanges and applyEdgeChanges for handling the changes, instead of us handling these changes manually.

With the above, we can drag the nodes, select the nodes and edges and remove them.

Now, if we want to connect the Nodes manually we have to use the onConnect handler.

  const onConnect =  (connection) => {
    setEdges((eds) => {
      const updatedEdges = addEdge(connection, eds);
      return updatedEdges;
    });
  };

React Flow also provides this addEdge handler .

A whole lot of other things and customizations can also be done. Do explore!

Did the article help or anything else would you like to suggest? Add a reaction or drop a comment below. 😉

Follow me on Dev Community.
Connect with me here Twitter & LinkedIn

Introduction to Open Source

Anadee — Sun, 19 Jun 2022 19:55:16 +0000

Open source is more about the people. The people make the community and the community makes collaboration possible.

Contributing to open source helps one grow their skills as well as build their network .
One of the major motivations to contribute to open source is the impact that the contribution makes to the community and all the user base.
Open Source programs help you gain practical knowledge and the fact one get's to connect with some great people also ensures that they never lack mentorship.
Being a part of the Open Source Ecosystem, one learns to Communicate, to Collaborate and to asynchronously work with their peers.
Don't be afraid to make mistakes. One can always ask questions from the community (without feeling like an imposter).
Once a person gets a bit familiar to open source contributions, they should try to pass on the knowledge and creating a happy place for fellow contributors.
Non-code contributions are equally important .
While choosing an open source project to contribute to, it is important to self-evaluate and understand your interests.

Don't wait, go ahead and make your first contribution. All the best!!