MERN stack introduction
MERN stack stands for MongoDB, Express, React and Node. It's widely popular due to the fact that you can use JavaScript on the backend and frontend, or TypeScript. It's also fast as scalable, with millions of developers writing code and contributing to the documentation and the ecosystem.
There are variations where instead of React for the frontend you will find Angular, Vue, or even Svelte nowadays, although this last one is still not as popular. Additionally you also have Next.js, Nuxt.js, Remix.js, etc. You can do everything with JavaScript or TypeScript nowadays.
This is the first article of the MERN stack series that will progress in complexity. At the end of it you will be able to create a full stack web app and deploy it anywhere with Docker. But now we will focus on building the simplest RESTful API with Node and Express.
NB: There's an 'older' stack, called LAMP) that consists of Linux, Apache, MySQL, PHP/Perl/Python, depending on your focus you might want to check it out
You can find the next chapters of this series here: RESTful API with Node.JS, Express and MongoDB.
Concepts and memes
Node.JS is a runtime environment for JavaScript, it basically allows you to ruin everything with JavaScript anywhere.
Express or Express.js is the most famous backend framework for Node.js. It allows you to build web applications and APIs.
Once you have your project you can put Express.js on top of Node.js in a machine and it will act as a server for requests, you can also connect it to a database and it will server you as an intermediary between user events and the information you want to show.
Write code, not docs - our first server
No, you should totally write documentation but let's start this tutorial.
The first thing we need to do is go to our directory and
npm init this will start the package.json, you can just press yes to everything. We will have all the dependencies stored in this file. Instead of npm you could also check out another package manager called Yarn.
Once that's done follow with
npm install express and make a index.js file, that's where our code is going to be.
If you are using git or any sort of version control remember to ignore the node_modules folder. That's where all your dependencies are, you shouldn't be touching that folder at all.
Let's write our first server, put this into index.js:
const express = require('express')
const app = express()
app.get('/', (req, res) => {
res.send('hello world!')
})
const PORT = 3001
app.listen(PORT, () => {
console.log(`server running on localhost with port ${PORT}`)
})
Once you have it you can run your server through CLI by typing node index.js in your terminal (remember you have to be in the folder where index.js is). We are using our Node runtime to execute the code in our index.js file.
NB: Every time you make a change in your code you need to restart your server, you exit it with CTRL+C from the terminal and every time you want to run it again you need to type 'node index.js'.
In order to get around this you could install nodemon
Afterwards in your browser go to http://localhost:3001/
You should see the following:
RESTful API
There are several discrepancies between the theory and the practice of building a RESTful API, as well as different definitions, here we will go with a CRUD example. Which stands for Create, Read, Update and Delete. We will build endpoints for all these operations.
Before starting make sure you have this middleware on top of your file
app.use(express.json())
and also make a "database" like this:
let infoDB = [
{
id: 1,
info: "example of information",
date: "2022-04-03T20:00:22.158Z"
},
{
id: 2,
info: "example of information2, put anything here",
date: "2022-03-03T20:00:22.158Z"
}
]
This is how the top of your file should look like:
Additionally I will be using Postman to make calls to my endpoints, it's free and simplifies the process of development, however there are many alternatives.
GET or Read
The code is very straightforward, we make a call to /api/info and get a response with all the data back in JSON format.
app.get('/api/info', (req, res) => {
res.status(200).json(infoDB)
})
The call to Postman should return:
We will also add a way to get a specific item from the database through the id but you can check it out later, first get familiar with the rest of the code.
app.get('/api/info/:id', (req, res ) =>{
const id = Number(req.params.id)
const infoObject = infoDB.find(info => info.id === id)
infoObject
? res.status(200).json(infoObject).end()
: res.status(404).json({
error: `an object doesn't exist with the id ${id} in our database`
}).end()
})
POST or Create
In order to make this endpoint we will need an additional helper function to generate ids for our data:
const generateId = () => {
const maxId = infoDB.length > 0
? Math.max(...infoDB.map(i => i.id))
: 0
return maxId + 1
}
If you are unfamiliar with the methods what you do here is first make an array of items with the ids through map then we use the spread operator (the three dots) to spread the array and pass it to Math.max which will return the maximum item.
Afterwards we use a ternary operator to assign either the maximum id or 0.
Here's the Express endpoint for a POST method:
app.post('/api/info', (req, res) => {
const body = req.body
if(!body.info) {
return res.status(400).json({
error: 'you need to type the information'
})
}
const infoObject = {
id: generateId(),
info: body.info,
date: new Date()
}
infoDB = infoDB.concat(infoObject)
res.status(201).json(infoObject)
})
In order to make a call to our post endpoint and send the data it needs we use Postman as follows:
Make sure to select all the parameters in the picture: body -> raw and JSON format.
After clicking the SEND button you should get back this:
DELETE
app.delete('/api/info/:id', (req, res) => {
const id = Number(req.params.id)
infoDB = infoDB.filter(i => i.id !== id)
res.status(204).end()
})
If we want to delete the information object with the id 3 this is our call on Postman:
PUT or Update
We will be using a helper function to obtain the object we want to modify and its id:
const getInfoObjectAndIndex = (id) => {
let infoToModify = {}
let indexOfInfo = 0
for(let i = 0; i < infoDB.length; i++){
if(id === infoDB[i].id) {
infoToModify = infoDB[i]
indexOfInfo = i
}
}
return [infoToModify, indexOfInfo]
}
The actual endpoint call is as follows:
app.put('/api/info/:id', (req, res) => {
const body = req.body
if(!body.info) return res.status(400).json({
error: 'the content is missing'
})
console.log(body)
const id = Number(req.params.id)
const [infoToModify, indexOfInfo] = getInfoObjectAndIndex(id)
console.log(infoToModify)
const modifiedInfo = {
id: infoToModify.id,
info: body.info,
date: infoToModify.date
}
infoDB[indexOfInfo] = modifiedInfo
res.status(200).json(modifiedInfo).end()
})
In order to update our data through Postman the call should be:
(that's the data you get after you press SEND, check through a GET call that you have all your data in the database)
GitHub and disclaimer
You can find the source code on my Github here you have the index.js alone.
Note that this is the first chapter in a series of guides, here I haven't followed the best practices and this guide was solely made for learning purposes. If you are developing a proper product remember to use the best security practices.
To get in direct touch with me you can hit me up on Twitter @tekbog
