npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

create-mb-mernapp

v1.0.3

Published

CLI tool to create a MERN app structure

Downloads

177

Readme

README

mb64-mernpackcli

mb64-mernpackcli is a comprehensive CLI tool that helps you set up a full-fledged MERN (MongoDB, Express, React, Node.js) application with ease. This package includes both frontend and backend files, allowing you to quickly build MERN apps with an MVP structure. It comes with in-built packages for the client, a well-established Node.js backend with CORS and log handling, and in-built routing functions for the frontend.

Features

  • Complete MERN Stack: Includes both frontend and backend setup.
  • Backend Setup: Node.js backend with CORS, log handling, and structured in an MVP pattern (controllers, models, utils, middlewares).
  • Frontend Setup: React frontend with pre-configured routes using React Router.
  • Log Management: In-built log storage and handling in log.txt.
  • Database Integration: Easy integration with MongoDB using environment variables.
  • No Extra Dependencies: Nodemon, Mongoose, and Express are pre-configured and ready to use.

Installation

You can easily install and set up the MERN application using the following steps:

Step 1: Install the Repository and Run the Setup Script

npx mb64-mernpackcli

This command will:

  1. Install the repository into the specified directory (mern-app by default).
  2. Install the dependencies for both the server and client.
  3. Provide instructions for accessing the client and server.

Usage

After the setup is complete, follow these instructions to run your application:

To Run Both Client and Server Concurrently

cd my-mern-app/server
npm run dev

To Run Only the Client

cd my-mern-app/client
npm run dev

To Run Only the Server

cd my-mern-app/server
npm run server

Configuration

Add your MongoDB URL and other environment variables in the .env file:

PORT=3000
MONGO_URI=your-mongodb-uri
SECRET_KEY=your-secret-key

Logging

Backend logs are stored in log.txt and include detailed request logs:

::1 - - [21/Jun/2024:13:54:40 +0000] "GET /api HTTP/1.1" 200 39 "-" "PostmanRuntime/7.39.0"
[2024-06-21T13:58:02.515Z] GET /api 200 - 4.961 ms
::1 - - [21/Jun/2024:13:58:42 +0000] "GET /api HTTP/1.1" 200 39 "-" "PostmanRuntime/7.39.0"

Accessing the Application

File Structure

The project is organized with a main directory that includes both the client and server directories, each following an MVP structure.

Main Directory

my-mern-app/
│
├── client/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── pages/
│   │   ├── App.js
│   │   ├── index.js
│   │   └── Routersfun.js
│   ├── package.json
│   └── ... (other config files)
│
├── server/
│   ├── src/
│   │   ├── controllers/
│   │   ├── models/
│   │   ├── routes/
│   │   ├── utils/
│   │   ├── middlewares/
│   │   ├── app.js
│   │   └── server.js
│   ├── .env
│   ├── package.json
│   ├── log.txt
│   └── ... (other config files)
│
└── README.md

Frontend (Client) Structure

  • components/: Reusable React components.
  • hooks/: Custom hooks for managing state and side effects.
  • pages/: Different pages or views of the application.
  • App.js: Main application component.
  • index.js: Entry point of the React application.
  • Routersfun.js: Configuration for React Router.

Backend (Server) Structure

  • controllers/: Handle incoming requests and responses.
  • models/: Define the data schema and interact with the database.
  • routes/: Define the application endpoints.
  • utils/: Utility functions used across the application.
  • middlewares/: Custom middleware functions for request processing.
  • app.js: Main application file that sets up the Express server.
  • server.js: Entry point to start the server.

Routing Function Example for Frontend

You can set up routes in the frontend as follows:

import App from "./App";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

export default function Routersfun() {
  const router = createBrowserRouter([
    {
      path: "/",
      element: <App />,
      errorElement: <h1>Page not found</h1>,
    },
  ]);

  return <RouterProvider router={router} />;
}

License

This project is licensed under the MIT License.

Developed By

Manoj Gowda


This README provides a comprehensive guide on how to use mb64-mernpackcli to set up and run your MERN application. Follow the instructions step-by-step to get your application up and running quickly.