mern-auth-setup

A CLI tool to quickly scaffold a full-stack MERN application with built-in JWT authentication, using Vite for the React frontend.

Features

• Complete MERN stack setup (MongoDB, Express, React, Node.js)
• JWT authentication pre-configured
• Vite-powered React frontend
• Responsive design with modern UI components
• Environment configuration ready
• Development and production build scripts

Quick Start

No global installation required! Simply run:

npx mern-auth-setup my-app

Detailed Usage

Creating a New Project

npx mern-auth-setup <project-name>

This command:

1. Creates a new directory with your specified project name
2. Clones the template repository
3. Installs all dependencies for both frontend and backend
4. Sets up the initial project structure

Post-Installation Setup

1. Navigate to your project directory:

   cd <project-name>

2. Configure environment variables:

   # For backend
   cp backend/.env.example backend/.env
      
   # For frontend
   cp frontend/.env.example frontend/.env

3. Update the .env files with your specific configuration:

   • Backend: MongoDB connection string, JWT secret, etc.
   • Frontend: API URLs and other client-side variables

Starting Development Servers

Backend Server

cd backend
npm start

The backend server will start at http://localhost:5000 by default.

Frontend Development Server

In a new terminal window:

cd frontend
npm run dev

The frontend development server will start at http://localhost:5173 by default.

Project Structure

my-app/
├── backend/              # Node.js & Express backend
│   ├── config/           # Configuration files
│   ├── controllers/      # Route controllers
│   ├── middleware/       # Custom middleware
│   ├── models/           # MongoDB schemas
│   ├── routes/           # API routes
│   ├── .env.example      # Environment variables template
│   ├── package.json      # Backend dependencies
│   └── server.js         # Entry point
│
├── frontend/             # React frontend (Vite)
│   ├── public/           # Static assets
│   ├── src/
│   │   ├── assets/       # Frontend assets
│   │   ├── components/   # React components
│   │   ├── context/      # React context providers
│   │   ├── hooks/        # Custom React hooks
│   │   ├── pages/        # Application pages
│   │   ├── services/     # API service functions
│   │   ├── utils/        # Utility functions
│   │   ├── App.jsx       # Root component
│   │   └── main.jsx      # Entry point
│   ├── .env.example      # Environment variables template
│   └── package.json      # Frontend dependencies
│
└── README.md             # Project documentation

Authentication Features

The template comes with pre-configured authentication including:

• User registration and login
• JWT token generation and validation
• Protected routes
• Persistent authentication with token storage
• Logout functionality

Customization

After creating your project, you can easily customize:

• MongoDB connection settings in backend/.env
• JWT secret key and expiration in backend/.env
• API base URL in frontend/.env
• Frontend routes in frontend/src/App.jsx
• API routes in backend/routes/

Requirements

• Node.js (v16 or later recommended)
• npm (comes with Node.js)
• git (for cloning the template repository)
• MongoDB (local or cloud instance)

Troubleshooting

Common Issues

1. Connection to MongoDB fails

   • Verify your connection string in backend/.env
   • Ensure MongoDB is running if using a local instance

2. JWT authentication not working

   • Check that the JWT secret is properly set in backend/.env
   • Verify token expiration settings

3. Frontend can't connect to backend

   • Confirm the API URL in frontend/.env points to your backend server
   • Check for CORS issues in the backend configuration

Running the Servers

If you encounter errors when starting the servers:

• Check if all dependencies were installed correctly
• Verify that required ports (5000 for backend, 5173 for frontend) are available
• Review console logs for specific error messages

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

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

Acknowledgements

• MongoDB
• Express
• React
• Node.js
• Vite