Skip to content
E4E
PROJECTS

eshaan-cli

A CLI that scaffolds React and Next apps and components, published on npm.

  • Node.js
  • CLI
  • Inquirer
COMMITS
24
FIRST
Jun 2023
LAST
Jul 2023
ACTIVE MONTHS
2

eshaan-cli | A CLI Tool for Building React/Next Apps

eshaan-cli is a command-line interface (CLI) tool built with Node.js that helps streamline the process of building React/Next.js applications. It provides a simple and intuitive way to generate component templates, manage configuration settings, and customize file types and styling options.

image

Installation

To install eshaan-cli, use the following command:

text
npm install -g eshaan

Initialization

To initialize the configuration for the eshaan-cli tool, enter the following command in your terminal:

text
eshaan

Options

  • Build component templates:

Input the names of the components cascadingly into the CLI, generating the necessary styling and tsx/jsx/js files, with their own folder.

text
eshaan componentName1 componentName2
  • -config :

Display the config file for the current state of the CLI. This can be easily updated using the eshaan command.

  • -ts -js -jsx :

Set the file type for a single run of the eshaan CLI, without affecting the CLI's stored configuration. Perfect for changing the file type on the go for small alterations.

text
eshaan -ts componentName
  • -ed -e :

Let's you choose between export default and export options, which also affects the indexify function, by appropriately importing and exporting the components

  • -scss -css -tailwind :

Set the styling type for a single run of the eshaan-CLI, without affecting the CLI's stored configuration.

  • in: :

Create the components in a particular directory, within the app root, or the src folder, as stated by the config.json file.

text
eshaan in:components component1 component2
  • -indexify :

Create the necessary indexes of the CLI components within the directory. This enables easy importing and exporting of React components.

text
eshaan in:layout navbar footer section -indexify

image
Fig 1. Directory structure of the components

Example of index.js file after using -indexify option:

javascript
import Footer from "./Footer/Footer";
import Navbar from "./Navbar/Navbar";
import Section from "./Section/Section";

export { Footer, Navbar, Section };

Examples

image
Fig 2. Initializing the configurations

image
Fig 3. Creating multiple components at once

image
Fig 4. Specifying directory name for the creation of components

image
Fig 5. Using -indexify creates an index file for easy import and export

image


*Fig 6. using `-ts` and `-scss` creates the components with this config, but resets on the next call*