DEV Community: Luis Esteban Saravia M

How to Integrate OpenGraph in React to Boost SEO and Social Sharing

Luis Esteban Saravia M — Mon, 23 Sep 2024 21:43:37 +0000

In the world of web development, ensuring that your pages look great when shared on social media is crucial for the success of your projects. In this post, I’ll show you how to add OpenGraph metadata to your React application to optimize how your pages or apps are displayed when shared.

What is OpenGraph?

OpenGraph is a protocol that allows developers to define how content should appear when shared on social media platforms like Facebook, Twitter, and LinkedIn. By using OpenGraph, you can control how key elements like the title, description, and preview image appear, enhancing both the appearance and SEO of your content on social media.

Getting Started: Initial Setup in React

To manage metadata in React, we’ll use a package called react-helmet, which allows us to easily manipulate the content inside the

of our documents.

1. Install react-helmet

The first thing we need to do is install the react-helmet package in our React project. Open your terminal and run the following command:

npm install react-helmet

2. Create the OpenGraphMeta Component

Next, we’ll create a reusable React component that will handle the OpenGraph metadata. This component can be easily configured and used across different pages in your application.

import React from 'react';
import { Helmet } from 'react-helmet';

type OpenGraphMetaProps = {
  title: string;
  description: string;
  url: string;
  image: string;
  siteName?: string;
};

const OpenGraphMeta: React.FC<OpenGraphMetaProps> = ({ title, description, url, image, siteName }) => {
  return (
    <Helmet>
      {/* OpenGraph metadata */}
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:url" content={url} />
      <meta property="og:image" content={image} />
      <meta property="og:type" content="website" />
      {siteName && <meta property="og:site_name" content={siteName} />}

      {/* Twitter metadata */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={image} />
    </Helmet>
  );
};

export default OpenGraphMeta;

3. Using the Component in a Page

Now that we have our OpenGraphMeta component, let’s see how we can use it inside a page in our React app.

import React from 'react';
import OpenGraphMeta from './OpenGraphMeta';

const MyPage: React.FC = () => {
  return (
    <div>
      {/* Add OpenGraph metadata */}
      <OpenGraphMeta
        title="My Awesome Page"
        description="This is the description of my page."
        url="https://www.mypage.com"
        image="https://www.mypage.com/image.jpg"
        siteName="My Website"
      />

      {/* Page content */}
      <h1>Welcome to My Page!</h1>
      <p>This is the content of the page you're visiting.</p>
    </div>
  );
};

export default MyPage;

Conclusion

Integrating OpenGraph in React is a great way to improve the visibility and presentation of your pages when shared on social media. By using a dynamic component like OpenGraphMeta, you can easily manage these metadata and optimize your content for different platforms.

Now that you have this implementation ready, it’s time to put it into practice! Have you used OpenGraph before? Share your experiences in the comments below.

This post is designed to be clear, technical, and easy to follow, perfect for a developer audience on Medium. Let me know if you’d like to make any changes or additions!

How to Merge a Git Feature Branch with a Squash Commit

Luis Esteban Saravia M — Thu, 16 Feb 2023 19:20:54 +0000

When working with Git, it's common to create a feature branch to work on a specific feature or fix a bug. Once the feature or bug fix is complete, you'll want to merge the changes back into the main branch. One way to do this is with a squash commit, which combines all of the changes from the feature branch into a single commit on the main branch.

In this post, we'll show you how to use a simple Git script to merge a feature branch with a squash commit. The script creates a backup of the feature branch, creates a temporary branch from the main branch, squashes the feature branch into the temporary branch, and then commits the changes with a single message. It then points the feature branch to the temporary branch, force pushes the updated feature branch to the remote repository, and deletes the temporary branch.

Cloning the script

To use the script, you'll need to clone the GitHub repository to your local machine. You can do this by running the following command in your terminal:

git clone https://github.com/esaraviam/git_squash.git

Once you've cloned the repository, you can navigate to the directory where the script is located and follow the instructions in the post to create an alias and use the script.

Installing the Script

Make sure you have Git installed on your machine.
Download or clone the script to your local machine.
Open a terminal window and navigate to the directory where the script is located.
Make the script executable by running the following command:
```
chmod +x git_squash.sh
```

Creating an alias

Open your .profile file in a text editor by running the following command:
```
vi ~/.profile
```

Note: On some systems (such as macOS), the file may be named .bash_profile instead of .profile.

Add the following line to the bottom of the file:

alias git-squash="/path/to/script/directory/git_squash.sh"

Replace /path/to/script/directory with the full path to the directory where the script is located. Save and close the file.

This will create an alias for the script called git-squash.

Source your .profile file by running the following command:

 source ~/.profile

This will reload your .profile file and make the git-squash alias available in your terminal.

Usage

To use the script, follow these steps:

Open a terminal window and navigate to the directory where your Git repository is located.
Checkout the feature branch that you want to merge into the main branch.
Run the script with the following command:

 git-squash <feature-branch> <main-branch>

Replace <feature-branch> with the name of the branch that you want to merge and <main-branch> with the name of the main branch.

For example, if you want to merge a feature branch named "feature-123" into a main branch named "main", run the following commands:

git-squash feature-123 main

The script will create a backup of the feature branch, create a temporary branch from the main branch, squash the feature branch into the temporary branch, commit the changes, and then point the feature branch to the temporary branch. It will then force push the updated feature branch to the remote repository and delete the temporary branch.

That's it! The script should merge the feature branch into the main branch with a squash commit.

Custom Hook to Manage Api Request

Luis Esteban Saravia M — Tue, 06 Dec 2022 13:50:51 +0000

If you want to make API requests in a React functional component, you can use the useEffect hook to perform the request. However, this can quickly become repetitive and difficult to manage if you need to make multiple requests in your component.

To make this process easier, you can create a custom hook called useAPI that wraps the useEffect hook and provides a simple interface for making API requests. Here is an example of how you might create the useAPI hook:

import { useState, useEffect } from 'react';

function useAPI({method, url, body}) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    setError(null);

    fetch(url, {
      method,
      body: JSON.stringify(body),
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => setError(error))
      .finally(() => setLoading(false));
  }, [method, url, body]);

  return { data, error, loading };
}

In this example, the useAPI hook takes a method, url, and body parameter, and uses the useState and useEffect hooks to make an API request using the specified method and url. The body parameter is stringified and included in the request as the request body. The hook also tracks the loading state, data, and error state of the request, and returns them as an object.

To use the useAPI hook in a functional component, you can call the hook and destructure the returned object to access the data, error, and loading state. Here is an example of how you might use the useAPI hook in a functional component:

import React from 'react';
import { useAPI } from './useAPI';

function MyComponent() {
const {data, error, loading} = useAPI({
         method:'POST', 
         url: 'https://my-api.com/data', 
         body: {title: 'My Post'}
     });
...
}

Using Typescript in a Node Project

Luis Esteban Saravia M — Thu, 30 Sep 2021 02:12:52 +0000

I've been in the software industry for more than 15 years, most of that time, from one way or another, I always have to use javascript for the frontend or backend, but always feels I'm missing something, the language is not excellent enough to apply the uncle Bob suggestions, for example defining interfaces.

For that reason and a lot more, I've decided to move forward and start to use typescript in all my professional work, that reason can be a post itself, but in this post, I going to explain how you can create an Express Application using typescript from the beginning.

Let's get started.

First of all, we have to create a brand new project using yarn but if you prefer you can use Npm, that is completely up to you.

mkdir ts-node-app

cd ts-node-app

yarn init -y

Adding the necessary dependencies

In first place we will add express.

yarn add express

Now we will add the support for typescript. in order to do that let add some other dependencies.

yarn add typescript ts-node @types/node @types/express --dev

typescript is installed as a dev dependency because all your code will be compilated into vanilla js, the that dependencies will be unnecessary once you build your application

Let's configure your app to use typescript.

To start using typescript in your project is not enough to install it as a dependency; you have to create a configuration file called tsconfig.json; in this file, there are a lot of configurations the most of that commented, to understand this file, please check this Link

to create the tsconfig.json you can use npx

npx tsc --init

Now we are ready to write code using Typescript.

let's create a simple server using express and typescript.

import express from "express";

const app: express.Application = express();

app.get("/", (request: express.Request, response: express.Response) => {
  response.send("Hello World");
});

app.listen(3000, () => {
  console.log("Listening on port 3000");
});

Building the app.

Now we are in position to build the app, so we will create a build and start scripts in package.json

"scripts": {
    "build": "tsc --project ./",
    "start": "node ./build/app.js"
  },

Github Repo

I've put a complete version of code in my github account, here is the Link

Hexagonal Architecture applied to typescript react project

Luis Esteban Saravia M — Thu, 09 Sep 2021 15:40:23 +0000

Introduction

Usually, when we develop react Apps, we only concern about separate in our directory map, hooks, components, pages, store, etc. But this directory separation doesn't guarantee that our application will scale or be maintainable in the future.

Here's comes to help the Domain-Driven Desing(DDD) in particular in this article Hexagonal Architecture.

We will implement a typescript project using react to apply some of the concepts of HA (Hexagonal Architecture)

First of all, to maintain this real we implement an existing API to get Dog Breeds Photos in the link bellow you can find the api documentation.
Dog CEO Api documentation

Let's get started

I'm gonna create a react app, using yarn and create react app CLI and typescript template to do this you need to type the following:

yarn create react-app dogapp --template typescript

this will create a boilerplate react app that we will modify to implement HA, first of all let's talk about design.

Hexagonal Architecture.

The Hexagonal Architecture is based in layers like an onion, and propose three base layers, Domain , Application and Infrastructure.

Hexagonal Architecture proposes that our domain is the core of the layers and that it does not couple to anything external. Instead of making explicit use and through the principle of inversion of dependencies, we couple ourselves to contracts (interfaces or ports) and not to specific implementations.

The code.

we will make a dog breed app so let's create some directories to implement HA.

To implement HA we need to separate our domain of the implementations so let create the layer proposed by HA.

so we need to create 3 main folders to contain our app.

I'll upload this in a github repository at the end of the post.

--domain
--application
--infrastructure

using this approach the domain folder does know how will be implemented, and the application layer only can access to domain but doesn't know how the infrastructure will be implemented

if you want you can see the finished project implemented in my github account esaraviam

Conclusion

From the react app perspective implementing this kind of architecture will push you to apply SOLID principles and your app will be more scalable and easy to maintain.

It forces our domain not to be coupled to anything external through the use of our domain's own interfaces that are implemented by external elements.

It facilitates being decoupled from the delivery method, making it easier for a use case to work for a mobile App, API, a traditional website, a single web App by REST, etc ...

On the other hand, it allows you to be prepared to change the implementation details such as the persistence or the framework.
Like any architecture based on the investment of dependencies, it facilitates that the components can be unit tested.