MEVN (Typescript) Stack Boilerplate with Vue 3, Pinia, Vue Router 4, Express, MongoDB, and Docker Compose

A boilerplate project to kickstart your MEVN (MongoDB, Express, Vue, Node.js) stack application development with Vue 3, Pinia, Vue Router 4, Express, MongoDB, and Docker Compose.

Table of Contents

• Introduction
• Features
• Prerequisites
• Getting Started
• Project Structure
• Configuration
• Development
• Production
• Docker Compose
• Contributing
• License

Introduction

This MEVN stack boilerplate provides a starting point for building modern web applications using the following technologies:

• Vue 3: A progressive JavaScript framework for building user interfaces.
• Pinia: A state management library for Vue 3 applications.
• Vue Router 4: The official router for Vue.js 3.
• Express: A fast, unopinionated, and minimalist web framework for Node.js.
• MongoDB: A NoSQL database for storing and managing application data.
• Docker Compose: A tool for defining and running multi-container Docker applications.

Use this boilerplate as a foundation for your project and customize it to suit your specific needs.

Features

• Vue 3 with Pinia for state management.
• Vue Router 4 for client-side routing.
• Express server for handling API requests.
• MongoDB integration for database storage.
• Docker Compose setup for easy development and production deployment.
• Basic project structure with examples to get you started.

Prerequisites

Before you begin, ensure you have met the following requirements:

• Node.js: Make sure you have Node.js installed. You can download it from nodejs.org.

• Docker and Docker Compose: You'll need Docker and Docker Compose installed to run the application in containers. You can get them from Docker's official website.

• MongoDB: If you want to run MongoDB locally, you can install it from the MongoDB website.

Getting Started

Follow these steps to get the MEVN stack boilerplate up and running:

1. Clone the repository:

   git clone https://github.com/briceallard/MEVN-Boiler.git
   

2. Change directory to the project folder:

   cd MEVN-Boiler
   

3. Install server dependencies:

   cd api
   docker-compose up
   

4. Install client dependencies:

   cd ../client
   docker-compose up
   

Project Structure

The project is structured as follows:

• client: Vue 3 front-end application.
• api: Express.js back-end API server.
• docker-compose.yml: Docker Compose configuration file.
• README.md: This README file.
• LICENSE: The license file.

Feel free to modify the project structure to suit your application's needs.

Configuration

• Server configuration: You can configure the server settings in the api/src/server.ts file.

• MongoDB configuration: Update the MongoDB connection string in the api/src/config/db.config.ts file.

Development

To start the development environment:

1. Start the MongoDB container (if not already running):

   docker-compose up -d mongo
   

2. Start the Express server:

   cd server
   npm run dev
   

3. Start the Vue 3 client:

   cd client
   npm run serve
   

The development server for the client will be available at http://localhost:8080, and the Express API server at http://localhost:3000.

Production

To build and run the application in production mode:

1. Build the Vue 3 client:

   cd client
   npm run build
   

2. Start the Express server in production mode:

   cd server
   npm start
   

The production server will be available at http://localhost:3000.

Docker Compose

You can also use Docker Compose for development and production:

• Development:

  docker-compose up
  

• Production:

  docker-compose -f docker-compose.prod.yml up -d
  

Contributing

Contributions are welcome! Please feel free to submit issues, pull requests, or suggestions.

License

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

---

Happy coding! 🚀