How to Build a Full-Stack JavaScript Application with MERN

Spread the love

The MERN stack (MongoDB, Express.js, React, and Node.js) is a popular choice for developers building modern web applications. It enables full-stack development using only JavaScript, making it an efficient and cohesive technology stack. By mastering the MERN stack, developers can create powerful, scalable applications with seamless front-end and back-end integration. This guide walks you through the process of building a full-stack JavaScript application using MERN, from setting up the environment to deploying the application.

Step 1: Setting Up Your Development Environment

Before starting, ensure you have the following installed:

Node.js
MongoDB
npm (included with Node.js)
Visual Studio Code

Step 2: Initialize the Backend with Express and Node.js

Create a new project folder:

   mkdir mern-app
   cd mern-app

Initialize a Node.js project:

   npm init -y

Install Express and other dependencies:

   npm install express mongoose cors dotenv

Create a basic Express server:

   const express = require('express');
   const mongoose = require('mongoose');
   const cors = require('cors');
   const dotenv = require('dotenv');

   dotenv.config();

   const app = express();
   app.use(express.json());
   app.use(cors());

   const PORT = process.env.PORT || 5000;

   app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Step 3: Set Up MongoDB Database

Create a .env file and add:

   MONGO_URI=your_mongodb_connection_string

Connect MongoDB in server.js:

   mongoose.connect(process.env.MONGO_URI, {
       useNewUrlParser: true,
       useUnifiedTopology: true,
   }).then(() => console.log("MongoDB connected"))
   .catch(err => console.log(err));

Step 4: Build the Frontend with React

Create a React app:

   npx create-react-app client
   cd client
   npm start

Install Axios for API calls:

   npm install axios react-router-dom

Set up React Router in src/App.js:

   import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
   import Home from './pages/Home';
   import About from './pages/About';

   function App() {
       return (
           <Router>
               <Routes>
                   <Route path="/" element={<Home />} />
                   <Route path="/about" element={<About />} />
               </Routes>
           </Router>
       );
   }

   export default App;

Step 5: Connecting Frontend and Backend

Create an API call in React:

   import { useEffect, useState } from 'react';
   import axios from 'axios';

   function Home() {
       const [data, setData] = useState([]);

       useEffect(() => {
           axios.get('http://localhost:5000/api/data')
               .then(response => setData(response.data))
               .catch(error => console.error(error));
       }, []);

       return (
           <div>
               <h1>Data from Server</h1>
               {data.map((item, index) => <p key={index}>{item}</p>)}
           </div>
       );
   }

   export default Home;

Step 6: Deploying the Application

Use Heroku or Vercel for backend and frontend deployment.
Use MongoDB Atlas for cloud database hosting.
Configure CORS and environment variables properly.

Internet Resources

Conclusion

The MERN stack offers an all-in-one solution for full-stack JavaScript development. By following this guide, you have built a simple MERN application and learned the core concepts of integrating MongoDB, Express.js, React, and Node.js. With this foundation, you can extend your project by adding authentication, state management, and additional features to build more complex applications.