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:
Dependencies List:
"dependencies": {
"cors": "^2.8.5",
"express": "^4.18.3",
"mongoose": "^8.2.0"
}
Code Example:
Node
const express = require(‘express’);
const cors = require(‘cors’);
const mongoose = require(‘mongoose’);
const app = express();
const PORT = 5000;
app.use(cors());
app.use(express.json());
// MongoDB connection
mongoose.connect(‘mongodb+srv://<username>:<password>
@mycluster.crwb89k.mongodb.net /? retryWrites = true & w=majority
& appName=mycluster’, {
useNewUrlParser: true,
useUnifiedTopology: true
});
const db = mongoose.connection;
db.on(‘error’, console.error.bind(console,
‘MongoDB connection error:’));
db.once(‘open’, () => {
console.log(‘Connected to MongoDB’);
});
// Define form schema
const formSchema = new mongoose.Schema({
username: {
type: String,
required: true
},
password: {
type: String,
required: true
}
});
// Create a model based on the schema
const Form = mongoose.model(‘Form’, formSchema);
app.post(‘/api/form’, async (req, res) => {
console.log(req.body); // Now req.body should be defined
const { username, password } = req.body;
// Create a new form document
const newForm = new Form({
username,
password
});
try {
// Save the form document to the database
const savedForm = await newForm.save();
console.log(‘Form saved successfully:’, savedForm);
res.status(200).json({ message: ‘Form saved successfully’ });
} catch (err) {
console.error(‘Error saving form:’, err);
res.status(500).json({ error: ‘Error saving form’ });
}
});
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
Note: In the MongoDB connection string, update replace the <username> and <password> with the username and password you created.
Frontend (mern-app-frontend)
Project Structure:
Dependencies:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Code Example:
CSS
/* 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:
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
- 2. Starting a Node.Js Project and Installing Dependencies
- 3. Create a basic server with Express.Js
- 4. Connect to MongoDB
- 5. Define a Schema
- 6. Defining a Route and Query in a Database
- 7. Create a React App
- 8. Create a Component to Make a Backend Request
- 9. Combining Everything to Make a MERN Application
Contact Us