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.
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.
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
To install the tool locally in a specific project:
-
In your project folder, run:
npm install web-fullstack-cli
-
Run the tool using
npx
:npx web-fullstack-cli create-fullstack-app my-new-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.
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.
-
Description: Generates a new full-stack project in the specified directory
[project-name]
. -
Usage:
npx web-fullstack-cli create-fullstack-app my-new-project
- Description: Starts the backend and frontend servers for the generated full-stack application.
-
Usage:
npm start
- Description: Placeholder command for running tests. You can replace it with your desired testing framework later.
-
Usage:
npm test
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
- 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.
- 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.
We welcome contributions! To get started:
- Fork the repository.
- Create a new branch for your changes.
- Commit your changes.
- Open a pull request.
Please make sure your code adheres to the project’s coding standards and includes tests if applicable.
This project is licensed under the MIT License - see the LICENSE file for details.
- 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.