web-fullstack-cli

web-fullstack-cli is a command-line interface (CLI) tool designed to quickly set up and scaffold full-stack web applications. With this tool, you can create projects with both a backend (Node.js/Express) and frontend (React), streamlining the process of starting a full-stack application.

Table of Contents

1. Installation
2. Usage
3. Commands
4. Project Structure
5. Contributing
6. License

Installation

Install via npx

To use the web-fullstack-cli tool without installing it globally, you can use npx (comes pre-installed with npm):

npx web-fullstack-cli create-fullstack-app my-new-project

This will generate a new full-stack project inside the my-new-project directory.

Install Globally (Optional)

You can install web-fullstack-cli globally on your machine, making it available in any directory:

npm install -g web-fullstack-cli

After installing globally, you can create new projects with:

web-fullstack-cli create-fullstack-app my-new-project

Install Locally

To install the tool locally in a specific project:

1. In your project folder, run:

   npm install web-fullstack-cli

2. Run the tool using npx:

   npx web-fullstack-cli create-fullstack-app my-new-project

Usage

Create a New Full-Stack Project

To scaffold a new full-stack project, run:

npx web-fullstack-cli create-fullstack-app my-new-project

This will create a new project folder (my-new-project) and generate both frontend (React) and backend (Node.js) code.

Start the Project

After creating the project, navigate into the project folder:

cd my-new-project

Then start the project using:

npm start

This will start both the backend and frontend servers, typically on http://localhost:3000 for the frontend and http://localhost:5000 for the backend.

Commands

create-fullstack-app [project-name]

• Description: Generates a new full-stack project in the specified directory [project-name].
• Usage:

  npx web-fullstack-cli create-fullstack-app my-new-project

start

• Description: Starts the backend and frontend servers for the generated full-stack application.
• Usage:

  npm start

test

• Description: Placeholder command for running tests. You can replace it with your desired testing framework later.
• Usage:

  npm test

Project Structure

After running create-fullstack-app, the following folder structure is created:

my-new-project/
│
├── backend/                # Backend code
│   ├── server.js           # Main server file (Express.js)
│   ├── controllers/        # API Controllers
│   └── models/             # Database models
│
├── frontend/               # Frontend code
│   ├── index.js            # Main entry point (React)
│   ├── components/         # React components
│   └── public/             # Static files (images, favicon, etc.)
│
├── package.json            # Project metadata and dependencies
└── README.md               # Project documentation

Backend (Node.js)

• The backend folder includes an Express.js server that you can extend with custom routes, controllers, and models.
• Use it as a base for building API endpoints and integrating with databases like MongoDB or MySQL.

Frontend (React)

• The frontend folder includes a React app set up with basic routing and components.
• Extend the components to build your user interface, interact with backend APIs, and create a responsive UI.

Contributing

We welcome contributions! To get started:

1. Fork the repository.
2. Create a new branch for your changes.
3. Commit your changes.
4. Open a pull request.

Please make sure your code adheres to the project’s coding standards and includes tests if applicable.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Further Improvements

• Customizable Templates: Allow users to select from multiple templates (e.g., React + Node.js, Vue + Express) when creating a new project.
• Database Integration: Add features to set up database connections (e.g., MongoDB, PostgreSQL).
• Authentication: Provide options for implementing authentication (JWT, OAuth) and authorization.

This README.md file gives an overview of how to use web-fullstack-cli, detailing how to install, create a new project, and run the necessary commands. Feel free to modify it as you expand your CLI tool with more features.