Forem: Anoop

How to create a custom node in reactflow

Anoop — Tue, 30 Apr 2024 09:49:18 +0000

In this post I will walk you through how to create a custom node using reactflow.

Few days back, I decided to build a flow builder using reactflow as part of a frontend coding challenge. It was my first time playing around with reactflow and I struggled a bit to create a custom node using the same.

If you are trying to figure out how to create a custom node using reactflow, this post is for you.

I am assuming you know how to setup a react project and to install reactflow. (feel free to refer this page to understand how to create a new react project using vite).

Follow the below steps to create a custom node

Create a new component, lets give it a name CustomNode



import { Handle, Position } from "reactflow";
import { BiMessageRoundedDetail } from "react-icons/bi";
import { BiLogoWhatsapp } from "react-icons/bi";
import "../assets/styles/CustomNode.css";

export const CustomNode = ({ data }) => {
  return (
    <div className="custom-node">
      <Handle type="target" position={Position.Left} id="target" />
      <div className="custom-node__header">
        <div>
          <BiMessageRoundedDetail />
          <div className="custom-node__title">Send message</div>
        </div>
        <div className="custom-node__whatsapp-icon">
          <BiLogoWhatsapp />
        </div>
      </div>
      <div className="custom-node__text">{data?.label}</div>
      <Handle type="source" position={Position.Right} id="source" />
    </div>
  );
};

Style the component according to your requirement.

Keep a constant variable nodeTypes and set the value as follows const nodeTypes = { textUpdater: CustomNode };

here, replace textUpdater with the name of your choice.
CustomNode is the component we have created previously.

Pass the nodeTypes to ReactFlow component along with the other values



<ReactFlow
 nodes={nodes}
 edges={edges}
 onNodesChange={onNodesChange}
 onEdgesChange={onEdgesChange}
 onConnect={onConnect}
 onInit={setReactFlowInstance}
 onDrop={onDrop}
 onDragOver={onDragOver}
 onNodeClick={onNodeClick}
 nodeTypes={nodeTypes}
 fitView           
/>

With this changes, you will be able to see your custom node in action..

Feel free to comment or reach out to me if you face issues dealing with custom nodes or reactflow, I will be more than happy to help! Cheers.

Writing your first Github CI workflow

Anoop — Mon, 08 Apr 2024 13:39:05 +0000

In this post, I would like to share my experience in writing the very first CI workflow in github and what are the things to be noticed while creating one.

Let's understand why CI workflows are important

Let's say you are working on a new feature and creating a PR to the main branch once the development is completed. A manual code review process may be initiated by another team member or a lead developer, after the code review, the changes are merged into the main branch. Testing is performed manually by developers or a QA team. If issues are found during testing, developers have to go back to their code, make fixes, and repeat the process. This process is time consuming and a waste of resource.

With a CI workflow, each time a developer pushes changes to their branch, a CI workflow is triggered automatically.
The CI workflow includes steps to build the application, run automated tests, and perform other checks. If any tests fail or there are issues in the code, the CI system immediately notifies the developer. Developers can quickly identify and fix issues, reducing the time between introducing a problem and fixing it. Once all checks pass, the changes can be merged into the main branch confidently, knowing that they have been thoroughly tested.

What is Github actions?

GitHub Actions is a powerful automation platform provided by GitHub that allows developers to build, test, and deploy their code directly from their GitHub repositories. It enables developers to create custom workflows, which are sequences of steps that execute tasks such as running tests, building Docker images, deploying applications, and more.

With GitHub Actions, developers can define workflows using YAML syntax directly within their repositories, making it easy to automate various aspects of their development process. Workflows can be triggered in response to events such as pushes to the repository, pull requests, issue comments, or scheduled events.

Writing the first workflow

I had the opportunity to work on a github issue in an open source project to add a Github workflow that runs if some files where modified in the path packages/twenty-website and checks that the website is still building.

Lets breakdown the changes and understand what does it mean

Workflow Name and Triggers:

The workflow is named "CI Website".

It's triggered by two events:

Pushes to the main branch.
Pull requests that modify specific files.

The specified files are "package.json" and any file within the "packages/twenty-website/" directory. Which means whenever the package.json or any files in packages/twenty-website changes, the workflow will be run.

Concurrency:

This section manages workflow concurrency, ensuring that only one instance of the workflow runs for each combination of workflow and branch simultaneously.
If a new instance is triggered while another is still running, the existing one will be canceled.

Jobs:

The workflow contains a single job named "website-build".
This job runs on an Ubuntu latest virtual environment.
Job Steps:

Step 1: Check out the Repository:
It uses the actions/checkout@v4 action to fetch the repository's content into the runner environment.
Step 2: Setup Node.js Environment:
Utilizes the actions/setup-node@v3 action to set up the Node.js environment.
Specifies Node.js version 18 as the desired version.
Step 3: Install Dependencies:
Uses the "yarn" command to install dependencies required for the website project.
Dependencies are typically defined in the "package.json" file.
Step 4: Build Website:
Executes the "yarn nx build twenty-website" command to build the website.

Summary
With these changes, whenever a new PR is created and it has some changes inside package.json file or packages/twenty-front the workflow will run, the developers can make sure that the website builds successfully.

Checkout the actual PR here

Configuring/ fixing absolute path in a react, typescript and vite project.

Anoop — Thu, 28 Mar 2024 19:57:58 +0000

If you are someone trying to configure absolute import in a react, ts and vite project or facing issue with resolving absolute paths in same, this post is for you.

Recently I tried to make my hands dirty by building something in react and decided to use typescript and vite in the project.

I didn’t want to use the relative import (import Sidebar from “../components/Sidebar”;) as it leads to longer and less readable import paths as well as it will be difficult to manage when the project grows.

So I decided to use the absolute import (import { Sidebar } from ‘@components/Sidebar’;)

In order to configure absolute import in this project there are few things we have to add in tsconfig.json and vite.config.ts file.

In the tsconfig.json file add the baseUrl and paths, example code is given below

{ "compilerOptions": { ... "baseUrl": "./src", "paths": { "@components/*": ["components/*"], "@constants/*": ["constants/*"], "@pages/*": ["pages/*"] } }, ... }

The above code tells typescript how to resolve import paths.

But that is not enough, we have to tell vite on how to build import path. For this you can use this plugin https://www.npmjs.com/package/vite-tsconfig-paths.

After installing vite-tsconfig-paths plugin, import tsconfigPaths from it and add it to the plugins array in vite.config.ts file as below

`
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
plugins: [react(), tsconfigPaths()],
});
`

With this configurations we will be able to setup absolute import in a react, ts and vite project.