Forem: Apollo Fredrick

A beginners guide to Dockerizing a React application

Apollo Fredrick — Sun, 06 Jul 2025 20:01:07 +0000

Containerization is a powerful tool in modern web development as it allows consistency in running applications in all platforms. Docker is a popular containerization tool as it offers consistency, scalability, and ease of deployment.

In this tutorial, we are going to perform the following tasks:

Creating a basic React/Vite app.
Dockerizing the application.
Building and testing the Docker image locally
Pushing the image to Docker Hub

Prerequisites

Node.js(version 18 or higher)
Docker Desktop installed
Docker Hub account

Creating a React/Vite project

Open the project folder in your code editor and run the following commands in the terminal:

npm create vite@latest react-docker --template react 
cd react-docker
npm install

Start the development server to ensure that the app works:

npm run dev

Creating a Dockerfile

A Dockerfile is a text file containing a set of instructions used to automate the creation of a Docker image. It provides a blueprint for building an isolated environment, essentially packaging an application and its dependencies into a self-contained unit.
A Dockerfile consists of a series of commands (instructions) that tell Docker how to build the image.
Create a file called Dockerfile in the root directory(do not add any extension in the name)

FROM node:18-alpine AS builder
# Use a lightweight Node.js image for building the application
# Use the official Node.js image as the base image

WORKDIR /app
# Set the working directory inside the container

COPY package*.json ./
# Copy package.json and package-lock.json to the working directory
# This allows us to install dependencies before copying the rest of the application code

RUN npm install
# Install the dependencies defined in package.json
# This will create a node_modules directory with all the dependencies

COPY . .
# Copy the rest of the application code to the working directory
# This includes the source code, configuration files, etc.

RUN npm run build
# Build the application using the build script defined in package.json
# This will create a production-ready build of the application

RUN npm install -g serve
# Install the serve package globally to serve the built application

EXPOSE 5173
# Expose port 5173 for the application to be accessible from outside the container

CMD ["serve", "-s", "dist", "-l", "5173"]
# Start the application using serve, serving the built files from the dist directory on port 5173

Creating the .dockerignore file

The .dockerignore file helps avoid sending unwanted files and directories to Docker Hub.
Create the .dockerignore file in the root directory.

dist
node_modules
env

Building the image

Ensure that the Docker Desktop is running.
Run the following command in the terminal.

docker build -t react-docker .

Testing the image locally

Run the following command:

docker run -d -p 5173:5173 react-docker

Visit http:localhost:5173 to see your app running

Pushing to Docker Hub

docker login -u <username>

Tag your image with your Docker Hub repository:

docker tag react-docker username/react-docker

Push to Docker Hub

docker push username/react-docker

Verify your image in Docker Hub
Open the browser and log in to your Docker Hub account.
Your image should be listed in the repositories.
Pull and run the image remotely
You can pull the image and run it in a separate machine

docker pull username/react-docker

docker run -d -p 5173:5173 username/react-docker

Conclusion

By containerizing your React/Vite application, you've created a portable, scalable deployment artifact. Docker Hub serves as your distribution hub, enabling seamless deployment to any environment that supports Docker. This foundation unlocks advanced deployment strategies like rolling updates, blue-green deployments, and autoscaling.

React API calls made simple with Axios

Apollo Fredrick — Tue, 23 Jan 2024 18:48:23 +0000

React is a JavaScript library for building user interfaces. Often you will want to fetch data from an API and display it in your React application.
Axios is a promise-based HTTP client that makes it easy to fetch data from APIs.
In this tutorial I will show you the simplest way to fetch API data and display it in your website.

Prerequisites

You should have a basic knowledge of React

Install Axios

Install Axios in your project folder using the following command:

npm install axios

Import Axios

Import Axios in the component which you want to make API calls in as shown below:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

Making a GET Request

To make a GET request, use the following code:

axios.get(url)
  .then(response => {
    // Handle the successful response here
    console.log(response.data);
  })
  .catch(error => {
    // Handle errors here
    console.error('Error fetching data:', error);
  });

Handling Asynchronous Operations

To handle asynchronous functions we use 'async/await' since API calls are asynchronous operations and React ensures that the UI remains responsive during these calls:

const fetchData = async() =>{
      try {
        const response = await axios.get(url)
        setData([response.data])
      } catch (error) {
        console.log(error)
      }
    }
    fetchData()

Integrate with React Components

Integrate your knowledge of data fetching in your React components as shown below:

import axios from 'axios'
import React, {useState, useEffect} from 'react'

const App = () => {
  const [data, setData] = useState([])
  const url = "https://api.chucknorris.io/jokes/random"

  useEffect(() => {
    const fetchData = async() =>{
      try {
        const response = await axios.get(url)
        setData([response.data.value])
      } catch (error) {
        console.log(error)
      }
    }
    fetchData()
  }, [])
  return (
    <ul>
      {data.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
  </ul>
  )
}

export default App

We use the useEffect hook to call the API when the component mounts.
Axios makes the Get request and returns a promise. When the promise resolves, we set the state using setData.
We finally use the map function to loop the data and display it on the page.
Remove React.StrictMode in your index.js file(If you are using Create-React-App) or main.js file(If you are using Vite) to prevent the useEfect hook from running twice.
Refresh the page to get more Chuck Norris jokes.

React API calls made simple with Axios

Apollo Fredrick — Tue, 23 Jan 2024 18:45:01 +0000

Prerequisites

You should have a basic knowledge of React

Install Axios

Install Axios in your project folder using the following command:

npm install axios

Import Axios

Import Axios in the component which you want to make API calls in as shown below:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

Making a GET Request

To make a GET request, use the following code:

axios.get(url)
  .then(response => {
    // Handle the successful response here
    console.log(response.data);
  })
  .catch(error => {
    // Handle errors here
    console.error('Error fetching data:', error);
  });

Handling Asynchronous Operations

To handle asynchronous functions we use 'async/await' since API calls are asynchronous operations and React ensures that the UI remains responsive during these calls:

const fetchData = async() =>{
      try {
        const response = await axios.get(url)
        setData([response.data])
      } catch (error) {
        console.log(error)
      }
    }
    fetchData()

Integrate with React Components

Integrate your knowledge of data fetching in your React components as shown below:

import axios from 'axios'
import React, {useState, useEffect} from 'react'

const App = () => {
  const [data, setData] = useState([])
  const url = "https://api.chucknorris.io/jokes/random"

  useEffect(() => {
    const fetchData = async() =>{
      try {
        const response = await axios.get(url)
        setData([response.data.value])
      } catch (error) {
        console.log(error)
      }
    }
    fetchData()
  }, [])
  return (
    <ul>
      {data.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
  </ul>
  )
}

export default App

Lazy Loading in React

Apollo Fredrick — Tue, 12 Dec 2023 13:42:41 +0000

What is Lazy Loading?

Lazy loading is a technique for asynchronously loading components or resources only when they are needed. This means that instead of downloading the entire application at once, which can lead to slow loading times, especially on slower internet connections, the application only downloads the components that are currently visible to the user. This significantly improves the initial page load and overall user experience.

In this tutorial we are going to learn how to implement Lazy Loading in React.

Prerequisites

You need to have a basic knowledge of React.

Creating the project

We are going to create our React application using Vite and not Create-React-App since Vite is fast.
Run the following command in your project folder.

npm create vite@latest lazy-loading

Select the framework as React and language as Javascript then run the following command to install the dependencies

npm install

Creating components

We are going to create two components, one that will be loaded immediately(Home.jsx) and another that will be loaded lazily(About.jsx)

//Home.jsx
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Welcome to Lazy Loading Demo</h1>
      <h2>This component is loaded immediately</h2>
    </div>
  );
};

export default Home;

//About.jsx
import React from 'react';

const About = () => {
  return (
    <div>
      <h2>This component was lazily loaded!</h2>
    </div>
  );
};

export default About;

Install react-router-dom as we only want to load the lazy component when we navigate to it.

npm install react-router-dom

Create a navigation component with links to the components.

import React from 'react'
import { Link } from 'react-router-dom'

const Navbar = () => {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/home">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
    </div>
  )
}

export default Navbar

Modify the App.jsx component as shown below

// App.js
import React, {lazy, Suspense} from 'react'
import {Routes, Route} from 'react-router-dom'
import Navbar from './Navbar'
import Home from './Home'
const About = lazy(() => import('./About'));

function App() {
  return (
    <>
    <Navbar/>
    <Routes>
        <Route path="/home" element={<Home/>} />
        <Route
          path="/about" 
          element={
          <Suspense fallback='Loading...'>
            <About/>
          </Suspense> }/>
      </Routes>
    </>
  )
}

export default App

Wrap the App component in BrowserRouter in the main.jsx as shown below

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>

)

Run your React application using the following command

npm run dev

The Home component is loaded immediately when the root route (/home) is accessed. The About component is loaded lazily when navigating to the /about route.

Conclusion

Lazy loading with react-router-dom is a powerful technique to improve the initial load time of your React applications. By dynamically loading components only when they are needed, you can enhance the user experience and optimize the performance of your application. Consider applying lazy loading to larger components or those that are not crucial for the initial view, ensuring a smoother user interaction.

Getting started with dotenv in Node.js

Apollo Fredrick — Sat, 02 Dec 2023 10:05:31 +0000

Node.js applications often require configuration parameters like API keys, database URLs. Hardcoding these values directly in your code can be dangerous especially when sharing your code. The 'dotenv' package in Node.js provides a simple and effective solution for managing environmental variables in your applications.

What is dotenv?

Dotenv is a simple and popular module for loading environmental variables from a .env file into a Node.js application. The purpose of using 'dotenv' is to keep sensitive information separate from your codebase and to make it easy to configure your application in different environments.

Installing dotenv

To get started, you need to install the 'dotenv' package in your Node.js project. You can do so by using npm or yarn depending on your package manager.

npm install dotenv
yarn add dotenv

Creating a .env file

Once 'dotenv' is installed, create a file named .env in the root directory of your project. This is where you will store your environmental variables in simple key=value formats.

MONGODB_URL = "mongodb+srv://test:<password>@my-project.yjjwl8u.mongodb.net/?retryWrites=true&w=majority"
PORT = 8000

Accessing Environmental Variables

Now in the index.js file, require and load dotenv at the top.

require('dotenv').config();

This line loads the dotenv module and calls the config method which reads the variables from the .env file and adds them to process.env.

Example in code

const express = require('express')
const mongoose = require('mongoose')
const dotenv = require('dotenv').config()

const app = express()

mongoose.connect(process.env.MONGODB_URL)
    .then(() =>{
        console.log("Database connected successfully")
    })
    .catch(() => {
        console.log("Database connection failed")
    })

app.listen(process.env.PORT, () =>{
    console.log(`Server running on port ${port}`)
})

The code above connects to MongoDB database and creates a simple web server.

Conclusion

Keep the .env in .gitignore. This ensures that the .env file is listed in the project's .gitignore file. This prevents sensitive information from being committed to version control.