# 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.

![](https://lh6.googleusercontent.com/zu8awAQBKh4Njpz6dZ4SzO8TVHN-e8AkfYuSGQml7WKNvbzR-gdu93Gt9btGa5z9XyZ-lnke34XnFrcfQBqo4ET7BKgpnc2KNVsx6MyODQDeyVhdITrFJxij_PFuEXXvyETDJY2m)

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.`

![](https://lh6.googleusercontent.com/bgbN_ok1zNWonfCW7zL-Y5o6r41t566ii9XrrhTllShvU4V4qc8kvo2E2xHWTA5JYP4FTSbhVaGE3k9D3YZS8BIP80M1bwWxtKTCDSI46ruuB-3fR3T6yLtYgpDdqS92FsNm4JoX)

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

1. `models:` This houses our entity (Todo data structure).

2. `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.

3. `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>

​