DEV Community

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

Posted on

2

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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

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

Okay