DEV Community

Cover image for Cli-Tool for Automating basic Folders Configuration for React based Project.
BasitJawad
BasitJawad

Posted on

2 2 1

Cli-Tool for Automating basic Folders Configuration for React based Project.

Generate-React-Structure

A simple CLI tool to quickly generate a React project using Vite, React Router, and a pre-configured context folder, auto-creation of Page and Component folder.

Note

  • Do not use npm i react-gen-structure as it will not work because its a Cli-tool not a package.

Installation

Instead of using npm i react-gen-structure, you can use the following command to directly run the CLI tool without installation:

npx react-gen-structure
Enter fullscreen mode Exit fullscreen mode

Why npx?

npx is a package runner that comes with npm. It allows you to use packages without installing them globally. This is the recommended way to use react-gen-structure because:

  • No Global Installation: Avoids potential conflicts with other globally installed packages.
  • Latest Version: Ensures you always use the latest version of react-gen-structure.
  • Easy to Use: Simple and convenient way to run the CLI.

Usage

After running the npx command, the CLI will prompt you to enter a project name:

📛 Enter project name: my-react-app
Enter fullscreen mode Exit fullscreen mode

react-gen-structure will then:

  1. Create a new directory with the specified name.
  2. Initialize a new Vite React project within that directory.
  3. Install the necessary dependencies.
  4. Create the following folder structure within the src directory:
    • context: For React Context API files (a sample AppContext.js is created).
    • components: For reusable React components.
    • pages: For React page components.

Finally, you'll be provided with instructions on how to start your development server:

✅ Project setup complete! Run:
   cd my-react-app
   npm run dev
Enter fullscreen mode Exit fullscreen mode

Features

  • Vite: Uses Vite for fast and efficient development.
  • React Router (Planned): Future versions will include React Router setup.
  • Context API: Sets up a basic context folder and provides a sample AppContext.js file.
  • Organized Structure: Creates a clean folder structure for your components and pages.

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

ISC

Author

Basit Jawad

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay