DEV Community: Burhan Haroon

Deploying a Simple React.js Frontend with Docker Made Easy! 🚀

Burhan Haroon — Thu, 25 Jan 2024 16:22:52 +0000

Hey, fam! 👋 As junior developers, diving into the world of deployment might seem a bit daunting at first, but fear not! Today, I'm here to guide you through deploying a simple React.js frontend with Docker in a breeze. 🌐🐳

Step 1: Get Your React App Ready
Ensure your React app is ready for the big stage! If you don't have one yet, create a basic React app using create-react-app. 🚀

npx create-react-app dockerized-react-app
cd my-react-app

Step 2: Dockerizing Your React App
Create a file named Dockerfile in your project root. This file tells Docker how to build your app.

# Use an official Node.js runtime as a base image
FROM node:14

# Set the working directory
WORKDIR /usr/src/app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install app dependencies
RUN yarn install

# Copy the app source code
COPY . .

# Expose the port your app will run on
EXPOSE 3000

# Command to run your app
CMD ["yarn", "start"]

Step 3: Build the Docker Image
Open your terminal, navigate to your project directory, and run:

docker build -t dockerized-react-app

This command builds your Docker image with the name dockerized-react-app.

Step 4: Run Your Dockerized React App
Once the image is built, it's time to run your Docker container!

docker run -p 8080:3000 dockerized-react-app

Your React app is now running in a Docker container, accessible at http://localhost:8080 in your browser. 🎉

Bonus Tip: Simplify Development with Docker Compose
Create a file named docker-compose.yml in your project root:

version: '3'
services:
  web:
    build: .
    ports:
      - "8080:3000"

Run your app with:

docker-compose up

Voilà! Your React app is now deployed using Docker, and you're ready to share it with the world. 🚀

ReactJS #Docker #WebDevelopment #JuniorDevelopers #TechTips

Feel free to reach out if you have any questions or need further guidance. Happy coding! 💻✨

How to generate /sitemap.xml route in Remix framework

Burhan Haroon — Wed, 20 Jul 2022 11:26:24 +0000

According to google.com

A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Search engines like Google read this file to crawl your site more efficiently.

First of all we are going to need the help of this very powerful package named Remix SEO. So, install it by using the following command.

npm i @balavishnuvj/remix-seo

Then make a new file named sitemapRoutes.server.ts within our app/ directory. After creating the file paste the following code there.

import type { EntryContext } from "@remix-run/node";
import { generateSitemap } from "@balavishnuvj/remix-seo";

const siteUrl =
  process.env.ENVIRONMENT === "production"
    ? "https://yourProductionWebsiteUrl.com"
    : "http://localhost:3000";

type Handler = (
  request: Request,
  remixContext: EntryContext
) => Promise<Response | null> | null;

export const otherRootRoutes: Record<string, Handler> = {
  "/sitemap.xml": async (request, remixContext) => {
    return generateSitemap(request, remixContext, {
      siteUrl,
    });
  },
};

export const otherRootRouteHandlers: Array<Handler> = [
  ...Object.entries(otherRootRoutes).map(([path, handler]) => {
    return (request: Request, remixContext: EntryContext) => {
      if (new URL(request.url).pathname !== path) return null;

      return handler(request, remixContext);
    };
  }),
];

That's it for the sitemapRoutes.server.ts file. Now head to the entry.server.tsx file in the app/ directory and make the following changes there:

import type { EntryContext } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import { renderToString } from "react-dom/server";
+ import { otherRootRouteHandlers } from "./sitemapRoutes.server";


- export default function handleRequest(
+ export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
+  for (const handler of otherRootRouteHandlers) {
+    const otherRouteResponse = await handler(request, remixContext);
+    if (otherRouteResponse) return otherRouteResponse;
+  }
  const markup = renderToString(
    <RemixServer context={remixContext} url={request.url} />
  );

  responseHeaders.set("Content-Type", "text/html");

  return new Response("<!DOCTYPE html>" + markup, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}

and now you're done! Congratulations you did it ;)
Now you just have to goto http://localhost:3000/sitemap.xml link and you'll see the sitemap generated like this:

Why should you use Tailwind CSS with React/Next JS?

Burhan Haroon — Sat, 26 Feb 2022 18:26:58 +0000

> Tailwind is a CSS framework that drastically drops your time developing a web application.

Let me tell you some problems, that I have faced myself with CSS.

It is long and boring.
It can be, sometimes, very hard to maintain.
It's even hard imaging to scale a website whose CSS is not written "professionally" and without following some perfect writing styles.
There're too many devices in the world. Making your website look perfect on all devices is a complete headache. And CSS just blows your mind off while doing that.

React is a JavaScript library that helps you build single-page applications easily. With the help of Tailwind, you can drastically reduce the development time and can easily focus on business ideas.

Here are some websites that I have created using Tailwind CSS.

Not to brag me here, but these websites were completely built on Tailwind CSS and they are looking fantastic! With Tailwind CSS I could easily manage my CSS and design and focus more on my business idea. So I would suggest y'all start using Tailwind with all your projects.