The MEVN stack boilerplate provides a powerful setup to build an admin dashboard using MongoDB, ExpressJS, Vue 3, and NodeJS. With additional tools such as Nuxt3, TipTap, Vuetify, and Vuexy, this boilerplate is designed to help developers create comprehensive applications effortlessly. In this blog, we’ll guide you through the steps to set up and run the boilerplate, along with troubleshooting tips.

Getting Started

To get started with the MEVN stack boilerplate, follow these steps:

1. Create the Required .env Files

Before you dive into installing dependencies, you need to create several .env files in their respective folders. Here’s what to include:

• .env file in the server folder:

  NODE_ENV=development
  DB_URL=YourMongoDBURL
  API_PREFIX=apiv1
  AUTH_SECRET=YourSecretStringForAPI
  API_PORT=3000
  CLIENT_URL=http://localhost:3001
  NODEMAILER_HOST=YourMailServer
  NODEMAILER_PORT=465
  NODEMAILER_SECURE=true
  NODEMAILER_SENDERNAME=YourName
  NODEMAILER_USER=YourMailAddress
  NODEMAILER_PASS=YourPassword

• .env file in the admin folder:

  VITE_API_ENDPOINT=http://localhost:3000/apiv1
  VITE_API_DOMAIN=http://localhost:3000

• .env file in the client folder:

  VITE_API_ENDPOINT=http://localhost:3000/apiv1
  VITE_API_ENDPOINTHOST=http://localhost:3000

2. Install Dependencies

Navigate to each directory and install the required dependencies using Yarn. Open your terminal and run the following commands:

• For the server:

cd server
yarn install

• For the admin:

cd admin
yarn install

• For the client:

cd client
yarn install

3. Run the Application

To run the server and UI simultaneously, you can use the following command:

yarn start

This command will execute the following scripts in parallel:

• Start the server: cd server; yarn dev;
• Start the admin dashboard: cd admin; yarn dev;
• Start the client application: cd client; yarn dev;

Understanding the Setup: An Analogy

Think of setting up the MEVN stack boilerplate as preparing a feast. You need various ingredients from different stores:

• The server is like your kitchen where you perform the cooking. It holds essential items (your API and database connections) ready for use.
• The admin section can be seen as the main dining area where all the meals are displayed, allowing chefs (users) to manage what’s on the table.
• The client is your guest area where friends (users) enjoy the meals prepared in the kitchen while interacting with the admin dashboard.

By making sure each section is ready and well-prepared, you ensure that your guests have a pleasant dining experience, just as you ensure a seamless app experience for the users.

Troubleshooting

If you encounter any issues while setting up or running the MEVN stack boilerplate, here are some troubleshooting ideas:

• Ensure that you have Node.js and Yarn installed. Running the command node -v and yarn -v will inform you of their respective versions.
• Double-check your .env configurations. Ensure that the database URL and other secrets are correctly set up.
• If the server fails to start, ensure that the specified `API_PORT` is not occupied by another application.
• For CORS issues, ensure your client is correctly configured to communicate with your server endpoint.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Final Thoughts

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

With this guide, you are now ready to set up and run your MEVN stack boilerplate. Dive into developing your admin dashboard and make your project a success!