High level overview of Steps to make a MERN stack app(CRUD) - PART 1

Chapter 1 : The Set-up

1) Create 2 folders named backend & frontend in project directory.

2) In backend-> Create a file server.js(gateway to our backend).

3) go to your backend dir. using cd (in git bash) then run npm init -y to create package.json

4) install express package (npm i express) and import it in server.js, using require.

5) Create an instance of express() in app and then call app.listen(port_num,callback_fun) - to start listening to all http requests on port_num

const express=require('express')
const app=express()
// Here comes the rest of code
app.listen(4000, () => {
 console.log('listeneing on port 4000!!!')
})

6 ) To run your server.js on port_num or 4000(in our case), while in backend directory use command node server.js

6 a) install nodemon globally using npm i -g nodemon and then while in backend directory use command nodemon server.js

NOTE-> go to package.json and in scripts add ''dev'':''nodemon server.js'' then use npm run dev instead of nodemon server.js

7) using app we can give response to various types of requests (sent from browser via different URLs) via various route methods/middlewares like app.get('/route_name',(req,res)=>{ })

const express=require('express')
const app=express()
// routes
app.get('/',(req,res)=>{ 
  res.json({apoo:'cxhxxn'}) 
})
app.listen(4000, () => {
 console.log('listeneing on port 4000!!!')
})

8) We don't want port_num to be visible so -> create a .env file (note it's not a .js file) in backend folder (this .env will be later added to gitignore file) and in that write:

PORT=4000

Then install dotenv using npm i dotenv (in backend dir. in git bash) and then call require('dotenv').config() at top of server.js file and use- process.env.PORT to access PORT from .env

//call dotenv config function
require('dotenv').config()

const express=require('express')
const app=express()
// routes
app.get('/',(req,res)=>{ 
  res.json({apoo:'cxhxxn'}) 
})
app.listen(process.env.PORT, () => {
 console.log(`listeneing on port ${process.env.PORT}!!!`)
})

9) To do API testing & Saving different APIs of our project (having various req.method like get,post,delete,patch,put and various routes/API endpoints/req.path) we use POSTMAN

NOTE- methods/functions that act b/w a req & res (of an API) like app.post('/as',(req,res)=>{}) are middlewares.

10) Add the global middleware- app.use((req,res,next)=>{

//code

next()

})

in server.js below app object declaration [it's like middlewares app.get('/route_name',(req,res)=>{ }) but executes after each request from browser since it's global]

//call dotenv config function
require('dotenv').config()

const express=require('express')
const app=express()
// global middleware
app.use((req,res,next) => {
console.log(req.path, req.method)
// calling next tells the control to go to next middlewares
next()
})
// middlewares with various routes
app.get('/',(req,res)=>{ 
  res.json({apoo:'cxhxxn'}) 
})
app.listen(process.env.PORT, () => {
 console.log(`listeneing on port ${process.env.PORT}!!!`)
})

.......... to be cont. in PART 2

High level overview of Steps to make a MERN stack app(CRUD) - PART 1

Chapter 1 : The Set-up

Grepper

Documentation

Social

Legal

Contact