Horje
Getting Started with MERN Stack

M (MongoDB) E (Express.js) R (React.js) N (Node.js) stack is a popular JavaScript language-based stack for building full-stack applications, MongoDB, ExpressJs, and NodeJs being responsible for server building and React for client-side development. This article is going to be your guide if you want to get started with the MERN stack development.

Table of Content

1. Setting Up Node.Js Environment

Node.Js is a Javascript runtime environment that allows you to run javascript code outside the browser console. To install Node.Js, you need to visit the Node.Js website and download the installer. In this article, we are going with the Windows Installer package.

mern1

node.js installer

Proceed with the default installation. Once the installation is complete, close the installer and verify the node.js installation by writing the following command in the terminal.

node --version
npm --version
mern0

node –version

2. Starting a Node.Js Project and Installing Dependencies

Create a directory and enter into it to initialize a new Node.js Project. Further install the necessary dependecies for the MERN app (mongoose, express, cors, nodemon) using `npm` (node package manager). Here are the step by step explanation of how to do that.

Step 1: Create a new directory and enter into it by running the following commands.

mkdir mern-app-backend
cd mern-app-backend

Step 2: Intialize a new node.js project by running the following command.

npm init -y

Note: The above command will ask you for some basic details about the project. Fill them accordingly. It will also highlight the starting point of the project. You can give it any name. Here will will name it as `index.js`

Step 3: Install the required dependencies by running the following command.

npm install express mongoose cors

3. Create a basic server with Express.Js

Express.js is an application framework that simplies the creation of web servers and handling HTTP requests. We can create a we server by importing express, creating an app out of it, defining a port where the server will hold, and writing the basic `app.listen()` function.

Node

const formSchema = new mongoose.Schema({
    username: {
        type: String,
        required: true
    },
    password: {
        type: String,
        required: true
    }
});
 
const Form = mongoose.model('Form', formSchema);

6. Defining a Route and Query in a Database

The route functions (get, post, put, delete) receives a callback function. That callback function receives two parameters (request and response) when someone access the route parameter. Request holds the information about incoming request while response is used to send a response back to the client. Each route combined with the port addess serves as an endpoint through which, the frontend can communicate to the backend server, send request and receive response. Provided below is the syntax through which we can create a route to submit the form data received from the frontend.

Node

// App.js
 
import React, { useState } from 'react';
import './App.css';
 
function App() {
    const [formData, setFormData] = useState({
        username: '',
        password: ''
    });
 
    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData({
            ...formData,
            [name]: value
        });
    };
 
    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const response = await
                fetch('http://localhost:5000/api/form', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                });
            if (response.ok) {
                console.log('Form submitted successfully');
                setFormData({
                    username: '',
                    password: ''
                });
            } else {
                console.error('Failed to submit form');
            }
        } catch (error) {
            console.error('Error submitting form:', error);
        }
    };
 
    return (
        <div className="app">
            <h1>Getting Started with MERN Demonstration (Form) </h1>
            <input onChange={(e) =>
                handleChange(e)} className='ip-1'
                name='username' placeholder='Username' type='text'
                value={formData.username} />
            <input onChange={(e) => handleChange(e)}
                className='ip-2' name='password' placeholder='Password'
                type='password' value={formData.password} />
            <button onClick={handleSubmit}
                className='btn'>Submit</button>
        </div>
    );
}
 
export default App;

9. Combining Everything to Make a MERN Application

To summarize, we successfully installed Node.js, Express.js, created a database in mongoDB, and also create a react app to submit the data into the database. Provide below are the project structure and the code structures.

Backend (mern-app-backend)

Project Structure:

mern6

backend-project-structure

Dependencies List:

"dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.3",
    "mongoose": "^8.2.0"
  }

Code Example:

Node

/* index.css */
 
.app {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: auto;
    margin-top: 100px;
}
 
.ip-1 {
    padding: 12px 24px;
    margin-top: 20px;
}
 
.ip-2 {
    padding: 12px 24px;
    margin-top: 20px;
    margin-bottom: 20px;
}
 
.btn {
    background: rgb(35, 144, 188);
    color: white;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
}
 
.btn:hover {
    background-color: rgb(23, 105, 193);
}

Javascript

// App.js
 
import React, { useState } from 'react';
import './App.css';
 
function App() {
    const [formData, setFormData] = useState({
        username: '',
        password: ''
    });
 
    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData({
            ...formData,
            [name]: value
        });
    };
 
    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const response = await
                fetch('http://localhost:5000/api/form', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                });
            if (response.ok) {
                console.log('Form submitted successfully');
                setFormData({
                    username: '',
                    password: ''
                });
            } else {
                console.error('Failed to submit form');
            }
        } catch (error) {
            console.error('Error submitting form:', error);
        }
    };
 
    return (
        <div className="app">
            <h1>Getting Started with MERN Demonstration (Form) </h1>
            <input onChange={(e) =>
                handleChange(e)} className='ip-1'
                name='username' placeholder='Username'
                type='text' value={formData.username} />
            <input onChange={(e) =>
                handleChange(e)} className='ip-2'
                name='password' placeholder='Password'
                type='password' value={formData.password} />
            <button onClick={handleSubmit}
                className='btn'>Submit</button>
        </div>
    );
}
 
export default App;

To start the frontend run the following command on frontend path

npm start

To start the backend run the following command on backend path

node index.js

Output:

animations


 


Reffered: https://www.geeksforgeeks.org

MERN Stack

Related
5 Simple Steps for Authentication and Authorization in MERN Stack 5 Simple Steps for Authentication and Authorization in MERN Stack
Crafting a stunning CRUD Application with MERN stack Crafting a stunning CRUD Application with MERN stack
MERN Stack Development Roadmap for 2024 MERN Stack Development Roadmap for 2024
Understanding Modular Architecture in MERN Understanding Modular Architecture in MERN
5 Essential Tools Every MERN Stack Developer Should use 5 Essential Tools Every MERN Stack Developer Should use

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 15



 

Horje