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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series