web-fullstack-cli

1.0.2 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i web-fullstack-cli

Weekly Downloads

0

Version

1.0.2

License

MIT

Unpacked Size

28 kB

Total Files

5

Last publish

Collaborators

  • dev-prathap