Deploying a MERN(mongo-db, express, react-js, node-js) application using kubernetes.
This is a simple authentication application where the users can Register and Login. The login details of the users are stored in mongo-db database.
We are using React-js for the front end.
https://github.com/rohitreddyk33/dock
Registration page using React-js. The requests are made through API calls.
import {React,useState} from 'react'
function Register() {
const[name,setName]=useState('')
const[email,setEmail]=useState('')
const[password,setPassword]=useState('')
async function registerUser(event){
event.preventDefault()
const response=await fetch('http://<your service name after creating a service yaml file>.default.svc.cluster.local:7070/api/register',{
method:'POST',
headers:{
'Content-Type':'application/json',
},
body:JSON.stringify({
name,email,password
}),
})
const data=await response.json()
console.log(data)
}
return (
<div>
<h1>register</h1>
<form onSubmit={registerUser}>
<input type ="text" value={name} onChange={(e)=>setName(e.target.value)} placeholder="name"/>
<input type ="email" value={email} onChange={(e)=>setEmail(e.target.value)} placeholder="email"/>
<input type ="password" value={password} onChange={(e)=>setPassword(e.target.value)} placeholder="password"/>
<input type="submit" value="register"/>
</form>
</div>
)
}
export default Register;
Login page : If the users are already registered then they'll be able to view a page after logging in. Duplicate E-mails can't be used.
import { React, useState } from 'react'
import { useNavigate } from 'react-router-dom'
function Login() {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const navigate=useNavigate()
function loginUser(event) {
event.preventDefault()
fetch('http://<your service name after creating a service yaml file>.default.svc.cluster.local:7070/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email, password
}),
}).then(res =>{
return res.json();
}).then(res =>{
if(res.status==='ok'){
localStorage.setItem('user',JSON.stringify(res))
}
navigate('/home')
})
}
return (
<div>
<h1>Login</h1>
<form onSubmit={loginUser}>
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="email" />
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="password" />
<input type="submit" value="login" />
</form>
</div>
)
}
export default Login;
A basic home page after logging in:
import React from 'react'
function Home() {
return (
<div>Welcome User</div>
)
}
export default Home
Creating a schema and collection in the mongo-db database with the help of express
const mongoose=require('mongoose')
const User=new mongoose.Schema(
{
name:{type:String,required:true},
email:{type:String,required:true,unique:true},
password:{type:String,required:true},
quote:{type:String},
},
{collection:'userdata'}
)
const model=mongoose.model('userdata',User)
module.exports=model
We are using Node-js for backend. It receives the requests from users and performs functions accordingly. It also authenticates users through jwt authentication where it generates Tokens for the users.
const express = require('express')
const app = express()
const cors = require('cors')
const User = require('./models/model')
const jwt = require('jsonwebtoken');
app.use(express.json())
app.use(cors())
const mongoose = require('mongoose')
mongoose.connect("<your connection string which can be found in mongodb atlas after creating a cluster>")
mongoose.connection.on('error', err => {
console.log(err);
});
app.post('/api/register', async (req, res) => {
console.log(req.body)
try {
await User.create({
name: req.body.name,
email: req.body.email,
password: req.body.password
})
res.json({ status: 'ok' })
} catch (err) {
res.json({ status: 'error', error: 'duplicate email' })
}
}
)
app.post('/api/login', async (req, res) => {
const user = await User.findOne({
email: req.body.email,
password: req.body.password
})
console.log(user)
if (user) {
const token = jwt.sign({
name: user.name,
email: user.email
},
<Your secret key for tokenization>
)
console.log(token);
const userToken={name:user.name,email:user.email,token}
return res.json({"status":"ok",'user':userToken})
}
else {
return res.json({ 'status': 'error', user: false })
}
})
app.listen(7070, () => {
console.log("port 7070")
})
Creating deployment yaml files for back-end.
apiVersion: apps/v1
kind: Deployment
metadata:
name: mern-node
spec:
replicas: 1
selector:
matchLabels:
app: mern-node
template:
metadata:
labels:
app: mern-node
spec:
containers:
- name: mern-node
image:(your repository in docker hub where you built and uploaded the Image of the back-end code)
ports:
- containerPort: 7070
Creating deployment yaml files for front-end.
apiVersion: apps/v1
kind: Deployment
metadata:
labels:
app: mern-react
name: mern-react
spec:
replicas: 1
selector:
matchLabels:
app: mern-react
template:
metadata:
labels:
app: mern-react
spec:
containers:
- image: (your repository in docker hub where you built and uploaded the Image of the front-end code)
name: mern-react
ports:
- containerPort: 3000
creating a service file for back-end deployment
apiVersion: v1
kind: Service
metadata:
name: node-service
spec:
selector:
app: mern-node
type: ClusterIP
ports:
- port: 7070
targetPort: 7070
creating a service file for front-end deployment
apiVersion: v1
kind: Service
metadata:
name: node-service
spec:
selector:
app: mern-node
type: ClusterIP
ports:
- port: 7070
targetPort: 7070
Access your application through the service port of the node-port
Steps:
- kubectl describe service mern-service
- Get the port number for the node-port
- localhost: "node-port port number"
Top comments (8)
Hey, that was a nice read, you got my follow, keep writing 😉
sure
Hi I have greatest confusion how to connect mongodb in mern stack in kubernetes that is only eating my head please answer this
mongoose.connect("")
mongoose.connection.on('error', err => {
console.log(err);
});
you have to give a connection string after creating a cluster in mogodb atlas.
once you have this in your code( in the part where you are using express, mongoose to connect to the database) create an image for react and node js. upload the respective images in docker hub and mention that image (to create a container) in deployment yaml files
How does frontend talks to backend can you explain through cluster ip how it is done
bro, cluster IP is just a service type which is used to host the application. The front talks to back end through API requests. The deployment yaml files for front end and back-end codes create containers. These containers are nothing but your front-end and back-end codes.
clear?
Finally thank god....I find this article very useful. Now I have a clear idea of deploying MERN application using kubernetes.
I find this very helpful. Thank you so much😊