DEV Community

Cover image for Hygen - Never Repeat your frontend tasks
Junaid
Junaid

Posted on

Hygen - Never Repeat your frontend tasks

Introduction

As JavaScript developers, we are constantly seeking ways to enhance our productivity and streamline our workflows. One tool that has gained popularity in recent years for its ability to generate consistent, maintainable code is Hygen. In this article, we will explore the fundamentals of Hygen and dive into practical examples of how it can be seamlessly integrated into React projects to automate code generation.

What is Hygen?

Hygen is a code generation tool that allows developers to create and manage templates for generating boilerplate code. It provides a simple and flexible solution to reduce repetitive tasks, enforce best practices, and maintain consistency across a codebase.

Getting Started with Hygen

To begin using Hygen, you'll need to install it using npm or yarn:

npm install hygen
// or use yarn
yarn hygen
Enter fullscreen mode Exit fullscreen mode

This will install hygen in your code base and creates a _templates folder in your app

Hygen with react examples

you can put that folder inside your app if its not inside.

After the setup you need to create a generator

A generator is basically where whatever repetitive tasks you want to avoid , you create a generator for that.

In our app , every time i create a component i need to :-

  • create a folder with the component name
  • Inside the folder should be a index.tsx with the basic structure of a react component in place
  • I also need a css file for the component
  • I might also need a test file and a story file

For simplicity i am taking two files only

  • index.tsx
  • index.css

So we will create a generator for this task called

npx hygen generator new componentBase
Enter fullscreen mode Exit fullscreen mode

Now our generator is ready and if you look inside it , it will have two folders

  • new
  • with-prompt

React Hygen

If you want to use prompts while creating a component (which we will use since we have to name the component everytime we create one) we will be using the with-prompt one

Going inside this , we see two files

  • hello.ejs.t
  • prompt.js

Hygen with react

We will be adding files to however we want with different names.

Since we want to create two files , we will create two files

  • hello.ejs.t
  • main.ejs.t

Inside each file we have to explain what we would like to do

*For our first file , we want to create a react component with base structure in place , here is the structure for the same

---
to: src/components/<%=message%>/index.js
---
import React from 'react'

export const <%= message %> = ({ children }) => (
  <div className="<%= h.changeCase.paramCase(message) %>">{children}</div>
)
Enter fullscreen mode Exit fullscreen mode

Notice we are putting <%=message%> as folder and component name , this is the prompt message which the user will be providing.

The path will be given as you like - for me i would like to put these folders inside components /

  • we can also put some default styling for out css file
---
to: src/components/<%=message%>/index.css
---
.<%= h.changeCase.paramCase(message) %>{
    color:'black'
}
Enter fullscreen mode Exit fullscreen mode

Now there is one more file called prompt.js
This file is responsible for what the user will see and it will have some thing like this code inside

module.exports = [
  {
    type: 'input',
    name: 'message',
    message: "Name of the folder you would like to have?"
  }
]
Enter fullscreen mode Exit fullscreen mode

Notice the name is message , this can be different for you - the same name has to be used in the above components

Ok ! awesome we are good to go

Now to make our life easy , we will create a shortcut for generating the component so that we dont have to type a long command everytime

Go inside your package.json and put this inside

  "scripts": {
    "hygen-generate":"npx hygen mygen with-prompt"
  }
Enter fullscreen mode Exit fullscreen mode

Superb , we are good to goooo

Drumrollll

Go inside the terminal and type

npx hygen-generate
Enter fullscreen mode Exit fullscreen mode

Give a name to your component and your component will be created .

This is one of thousands of examples we can do with hygen
I would love to see what you guys come up with , with this amazing tool

Tag me or comment below what you created with this beautiful tool .

I have created this as a project as well , here is the repo for you guys to check and explore

GitHub logo jsh854 / react-hygen-boilerplate

This repo is the boiler plate for react with hygen for code generation

This repo is for react with hygen for code generation

  • Run ** npm i ** initially

Here is how to use and get started with this

  • Go inside the terminal
  • Run npm run hygen-generate
  • Give a proper name for the folder you would want to create
  • It will create a folder with the name provided under src/components and files
    • .js
    • .ts
    • .css

Customisation

  • If you would like to customise the folder generation , maybe add more files or add different content for the generated files
    • Go inside _templates > mygen > with-prompt
    • Three .ejs.t files are there . - In order to add more files , create a new file with different name but same extension of .ejs.t
    • Each file has a purpose and you can customize how they look accordingly






Top comments (0)