The MERN stack has emerged as a powerful framework for modern web development, combining MongoDB, Express.js, React.js, and Node.js. This guide will walk you through setting up a MERN stack application efficiently, leveraging a pre-configured repository and streamlined development environment management.
Overview of MERN StackThe MERN stack comprises four key technologies:
\
\ Each component plays a crucial role in creating dynamic and interactive web applications.
Setting Up the Development Environment PrerequisitesWe'll use a Creator Relationship Management (CRM) App as our example. This full-stack application is designed for influencers, podcasters, and creators to manage client relationships efficiently.
Setting up MongoDB ClusterFollow the MongoDB Atlas Getting Started guide to create a cluster and obtain your MongoDB URI.
\ Note: If you encounter connection issues, allow access from anywhere in your cluster's Network Access settings.
Configuring the Development WorkspaceWe'll use Daytona to automate the setup of a Node.js dev environment with necessary tools and port forwarding based on our starter project.
Cloning and Setting Up Your MERN Stack EnvironmentCreate a .env file in the backend directory with your MongoDB UR (you can find it in Atlas dashboard)I:
MONGO_URI="mongodb+srv://Run the server:
cd backend && npm run devCreate a .env file in the frontend directory:
VITE_BACKEND_URL="http://localhost:8000/api/customers/"Run the frontend:
cd frontend && npm run dev\ Your MERN app should now be running.
Repository StructureThe repository is organized into:
\
The .devcontainer/devcontainer.json file provides a predefined development environment. Here's the configuration:
\
{ "name": "Node.js, Express, React, MongoDB & Tailwind", "image": "ubuntu:22.04", "features": { "ghcr.io/devcontainers/features/common-utils:2.4.7": { "username": "daytona", "userUid": 1000, "userGid": 1000, "configureZshAsDefaultShell": true }, "ghcr.io/devcontainers/features/node:1": { "nodeGypDependencies": true, "version": "lts", "nvmVersion": "0.40.0" }, "ghcr.io/devcontainers/features/git:1": {} }, "overrideFeatureInstallOrder": [ "ghcr.io/devcontainers/features/common-utils", "ghcr.io/devcontainers/features/git", "ghcr.io/devcontainers/features/node" ], "portsAttributes": { "5174": { "label": "Frontend", "onAutoForward": "notify" }, "8000": { "label": "Backend", "onAutoForward": "ignore" }, "27017": { "label": "MongoDB", "onAutoForward": "ignore" } }, "customizations": { "vscode": { "extensions": [ "mongodb.mongodb-vscode", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "bradlc.vscode-tailwindcss", "davidanson.vscode-markdownlint" ] } }, "workspaceFolder": "/workspaces/starter-mern-saas", "onCreateCommand": "npm install -g nodemon", "postCreateCommand": "cd backend && npm install && cd ../frontend && npm install", "remoteUser": "daytona" }\ This configuration ensures a consistent development environment across different machines.
Customizing the MERN Application Adding New Routes\
\
\
You've now set up a MERN stack application, cloned an example repository, and learned how to customize both the backend and frontend. This streamlined setup process allows you to focus on developing and enhancing your application without worrying about environmental inconsistencies.
\ Happy coding, and enjoy your development journey with the MERN stack!
All Rights Reserved. Copyright , Central Coast Communications, Inc.