Understanding MVC Pattern And Setting Up The Express App And Project Directory

So let's begin, You should create a project folder at this point to house all the source code for the backend part of this application. I'll call my todo-app-backend. Feel free to use the todo-app-backend as your directory. It's not patented : )

I am Using VS code as my editor to code the project you can feel free to choose any other editor

So we will follow MVC pattern (model, View, Controller) for our project which is an industry standard. So don't worry about this heavy term its basically means we are going to create some folders and we keep relative code in the respective folders. Simple!. Lets talk little about MVC before going ahead.

MVC Architecture Pattern:

The Model-View-Controller (MVC) is an architectural pattern that separates an application into three main logical components: the model, the view, and the controller. Each of these components are built to handle specific development aspects of an application. MVC is one of the most frequently used industry-standard web development framework to create scalable and extensible projects.

In our case, we will only focus on Model and Controller, the View can be separately handled by frontend frameworks like React Js, Vue JS, ect. With the help of REST APIs. In this way we are creating a decoupled Web application where backend is written in Node JS and Frontend can be written separately using react or any other framework of your choice, both the application will talk with each other via API calls.

We'll create just 3 folders in the directory you created above.

models: This houses our entity (Todo data structure).
routes: A route is an entry to your application. This folder contains a file that defines what should happen when a user accesses a particular route.
controllers: This file basically contains functions which hold actual execution logic and each function is linked with a route specifying which controller(function) present in this file needs to be executed when a particular route is matched inside the route file.

So we have setup our project directory, lets setup the Express server now.

Setting Up The Express App

Let's setup our Express server to handle HTTP request made by any client.

Now, open the terminal in your project folder to create a package.json file using the below command, this file will store the basic info about our project and our project dependencies

npm init -y

-y flag will skip all the question asked by npm init command and directly create a package.json file you can also run npm init

so, once we have our package.json file we can now move on to installing some packages.

npm install express dotenv

We had installed express to create a backend server and dotenv to load and read environment variables.

npm install -g nodemon

We are installing the nodemon package globally because nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected. So that we don't need to manually restart the server for any changes in the code.

Next, create a file called app.js and lets create an express application server which is running on PORT 3000 and also we will store this PORT value inside the .env file and read using dotenv package.

// .env file

PORT=3000

app.js

// import express 
const express = require("express");

// import dotenv
const dotenv = require("dotenv");

// load environment variable
dotenv.config({ path: ".env" });

// read env variable using process.env.<your_env_variable_name>
const PORT = process.env.PORT;

// initialize express app

const app = express();

// sending a hello response on visiting http://localhost:3000/
app.get("/", (req, res) => {

  res.status(200).json({ message: "Hi I am Server", data: "no data on this endpoint" });

});

// listening for any HTTP requests on PORT 3000
app.listen(PORT, () => {

  console.log(`Server is running at http://localhost:${PORT}`);

});

So our express app is Setup. Run the below command and open your browser and visit http://localhost:3000 to see the response from server

nodemon app.js

Output:

{ message: "Hi I am Server", data: "no data on this endpoint" }

You should see similar output on your browser on visiting http://localhost:3000