9/724, 21:58 MERN Stack | Mecium Openinapp 7 Gam) Sionin Medium @ serch Building Full-Stack Applications with MERN Stack — A Comprehensive Guide NoNameDev - Follow Amin read - May 5, 2023 © Listen (1) Share Introduction MERN Stack is a popular and powerful technology stack used for building full-stack web applications. It includes four technologies: MongoDB (a NoSQL database), Express,js (a web application framework for Nodejs), React (a front-end JavaScript library), and Nodejs (a JavaScript runtime environment). In this article, we will explore the MERN Stack in detail and build a full-stack application using the stack. Prerequisites + Basic understanding of HTML, CSS, and JavaScript hitps:fmedum.com/@nonamedev/bulding-ful-stack-appications-w it-mern-stack-a-comprehensive-guide-402e98d2e963 ans.teins 2188 MER Stack Meu + Familiarity with Nodes and NPM (Node Package Manager) + Familiarity with MongoDB * Atext editor of your choice Setting up the Environment: Before we start building our full-stack application, we need to set up our development environment. Follow these steps to set up the environment: . Install Node.js and NPM from the official website. Install MongoDB Community Server from the official website. » Create a new folder for your project. - . Open the terminal and navigate to the project folder. a Run the command npn init to create anew package,son file for your project. 2 . Install the following dependencies by running the commands below: Express,js: npm instatt express React: npm install react MongoDB driver for Node.js: npm install mongodb Mongoose (a MongoDB object modeling tool for Nodes): npm install mongoose Nodemon (a tool that helps develop Nodes based applications): nom instatt nodemon --save-dev Building the Backend: The first step in building our full-stack application is to set up the backend, We will use Node.js, Express.js, and MongoDB to create the backend. Follow these steps to build the backend: 1. Create a new file named server.js in the project folder. 2. Import the necessary modules at the top of the server.js file nips:timedum com/@nonamedevibulding-tul-stack-applications-w th-mern-stack-a-comprehensive-guide-402690d26959 23y9iri24, 21:58 MERN Stack | Mecium const express = require('express') ; const mongoose = require(*mongoose') const app = express()5 7] Mongob8 connection mongoose. connect (‘mongodb: //Localhost/myapp', { useNewWrlParser: true, useUnifiedTe -then(() => console. log('MongoDB connected. ..")) scatch(err => console. log(err)); // Define routes app.get('/', (req, res) => { res.send(*Hello World! ') ; Ds // Start the server const port = process.env.PORT || 5080; app. listen(port, () 3. Run the command nodemon server.js in the terminal to start the server. 4, Test the backend by visiting hetp://Locathost:se0e/ in your web browser. You should see the message "Hello World!" displayed on the screen. Building the Frontend Next, we will build the frontend of our application using React. Follow these steps to build the frontend 1. Create a new folder named ctient in the project folder. 2. Navigate to the client folder in the terminal and run the command npx create react-app . to create anew React project in the client folder. 3. Open the client/sre/app.js file and replace the existing code with the following import React from 'react!; function App() { return ( hitps:fmedum.com/@nonamedev/bulding-ful-stack-appications-w it-mern-stack-a-comprehensive-guide-402e98d2e963 33y9iri24, 21:58 MERN Stack | Mecium ds } export default App; 4. Run the command npm start in the client folder to start the React development server. 5. Visit http: //localhost:3000/ in your web browser to see the React application running. You should see the message “Hello World!” displayed on the screen. ‘Connecting the Frontend and Backend Now that we have built the frontend and backend of our application, we need to connect them. We will use the Axios library to make HTTP requests to the backend from the frontend. Follow these steps to connect the frontend and backend: 1. Install Axios by running the command npn instatt axios inthe client folder. 2. Open the ctient/sre/Aapp. js file and add the following code at the top to import Axios import axios from ‘axios'; 3. Add the following code to the app component to make an HT'TP request to the backend ‘import React, { useState, useEffect } from 'react'; ‘import axios from ‘axios'; function App() const [message, setMessage] = useState(''); useEffect(() => { axios.get('/api') -then(res => setMessage(res.data)) scatch(err => console. log(err)) 5 3, 3 return ( hitps:fmedum.com/@nonamedev/bulding-ful-stack-applications-w it-mern-stack-a-comprehensive-guide-402e98d2e963 ansy9iri24, 21:58 MERN Stack | Mecium 3 + export default App; 4, Modify the server. js file to define the API route and return a message const express = require('express") 5 const mongoose = require(*mongoose'); const app = express(); // Mongod8 connection mongoose. connect ('mongodb: //localhost/myapp', { useNewUrlParser: true, useUnifiedTc -then(() => console. log('MongoDB connected. ..')) -catch(err => console. log(err)) ; // Define APL route app.get('/api', (req, res) => { res.send('HeLlo from the API!'); Ds // Serve static assets if in production if (process.env.NODE_ENV === 'production’) ¢ // Set static folder app. use (express. static('client/build")) ; app.get("#', (req, res) => { res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html')); ys // Start the server const port = process.env.PORT || 5000; app.Listen(port, () => console. log(*Server started on port ${port}...°))5 5. Restart the servers by stopping the React development server and the Node,js server and running apm start inthe client folder and nodenon server.js in the project folder. -nips:tmedum com/@nonamedevibulding-tul-stack-applications-w th-mern-stack-a-comprehensive-guide-402690d26959 53teins 2188 MER Stack Meu 6. Visit http: //Locathost:3000/ in your web browser to see the message "Hello from the API!" displayed on the screen. Conclusion In this article, we have explored the MERN Stack in detail and built a full-stack application using the stack. We started by setting up the environment, building the backend using Node,js, Express.js, and MongoDB, building the frontend using React, and connecting the frontend and backend using Axios. By following this tutorial, you should have a good understanding of how to use the MERN Stack to build full-stack applications. Mern Stack Full Stack Developer Written by NONameDev 23 Followers Living in various forms and interesting new technology. More from NoNameDev nips:tmedum com/@nonamedevibulding-tul-stack-applications-w th-mern-stack-a-comprehensive-guide-402690d26959 ens9/724, 21:58 MERN Stack | Mecium NoNameDev Natural Language Processing with Python: A Beginner’s Guide with Example Code and Output Introduction ‘Apr 25, 2023 NoNameDev Explainability in Deep Lear Demystifying the Black Box Deep learning models have achieved outstanding results in numerous fields, such as image recognition, natural language processing, and... hitps:fmedum.com/@nonamedevibulding-ful-stack-appiations-w it-mern-stack-a-comprehensive-guide-402e98d2e963 739/724, 21:58 MERN Stack | Mecium Jul 16, 2023 NoNameDev Deploying a MERN Stack Application with Docker and Kubernetes: A Complete Guide In the world of web development, the MERN stack (MongoDB, Express.js, React, and Node.js) has gained tremendous popularity. Paired with... ‘Apr 21,2008 tf nips:tmedum com/@nonamedevibulding-tul-stack-applications-w th-mern-stack-a-comprehensive-guide-402690d26959 anss9iri24, 21:58 MERN Stack | Mecium NoNameDev Advanced Django Techniques: Custom Authentication, Middleware, and Caching for High-Performance Web.. Django is a popular Python web framework that is known for its ease of use and robustness. It provides a rich set of tools and features for. Mar 28,2023 a C See all from NoNameDev +») Recommended from Medium ‘Alexander Nguyen in Level Up Coding The resume that got a software engineer a $300,000 job at Google. +-page. Well-formatted. + unt hitps:fmedium.com/@nonamedev/bulding-ful-stack-appications-w it-mern-stack-a-comprehensive-guide-402e98d2e963 ons9/724, 21:58 MERN Stack | Mecium Dominik Polzer in Towards Data Science 17 (Advanced) RAG Techniques to Turn Your LLM App Prototype into a Production-Ready Solution Acollection of RAG techniques to help you develop your RAG app into something robust that will last + na tt Lists Staff Picks 689 stories - 1139 saves Stories to Help You Level-Up at Work 19 stories - 692 saves Self-Improvement 101 20 stories - 2316 saves Productivity 101 20 stories . 2039 saves -nips:tmedum com/@nonamedevibulding-tul-stack-applications-w th-mern-stack-a-comprehensive-guide-402690d26959 10139/724, 21:58 MERN Stack | Mecium John Gorman Stop Wasting Your Time ASimple Framework for Making Better Decisions + una ti Benedict Neo in bitgrit Data Science Publication Roadmap to Learn Al in 2024 A free curriculum for hackers and programmers to learn Al Mar 11 tt nips:tmedum com/@nonamedevibulding-tul-stack-applications-w th-mern-stack-a-comprehensive-guide-402690d26959 nsy9iri24, 21:58 [MERN Stack | Mecium Abhay Parashar in The Pythoneers 17 Mindblowing Python Automation Scripts | Use Everyday Scripts That Increased My Productivity and Performance a + 4dago ‘Afan Khan in JavaScript in Plain English Microsoft is ditching React Here's why Microsoft considers React a mistake for Edge. nips:tmedum com/@nonamedevibulding-tul-stack-applications-w th-mern-stack-a-comprehensive-guide-402690d26959 sans9/724, 21:58 MERN Stack | Mecium + Juné tt C ‘See more recommendations ) -nips:tmedum com/@nonamedevibulding-tul-stack-applications-w th-mern-stack-a-comprehensive-guide-402690d26959 1983