3 Steps To Architect A Express Server
Tags: javascript, devops, node, webdev
Published: 2021-01-13 09:27:38

### Hey there fellas! I'm back with another interesting article that will help you become a full-stack developer. 

Let's get started!

![excited](https://media.giphy.com/media/oF5oUYTOhvFnO/giphy.gif)

----

A lot of young developers focus too much on making the code work than on the architecture of the project. However, when you work in large teams with potentially hundreds of people working on the same codebase it becomes important to understand and architect your projects so that it's easier for others to understand and maintain. 

So in today's post, I'm going to explain a popular pattern with the help of nodejs express server.

NOTE: I'M ASSUMING YOU KNOW BASIC NODEJS

-----

# STEP 1: INSTALL DEPENDENCIES
### _Start a Nodejs project_

```shell
npm init -y
```

The above step is going to create the package.json file that we need for a nodejs project. It stores all our dependencies that we will be installing.

### _Install nodemon_

```shell
npm install nodemon --save
```

We basically need this package because we want the nodejs server to automatically restart when we make any changes while development. We will come back to nodemon in a later step.

### _Install express_
![duh](https://media.giphy.com/media/fikcKja7O7MtzXzvQy/giphy.gif)

```shell
npm install express --save
```

STEP 2: CREATE FILES AND FOLDERS

In this step, we will create all the skeleton files and folders for the server.

But before that lets modify the package.json file a bit.

Right now _package.json_ looks like this

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4z82dwlp1qp5feh114d9.png)

But we are going to add a script to use nodemon for auto-restart of the server while development.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r8xcz8zzxutbifv7hnrv.png)

```json
"dev": "nodemon app.js"
```

We will create app.json soon which will house the starting scripts of the project.

## Now we are ready to start creating files and folders.

### app.js

Inside your project create a new file called __app.js__ that will be the starting point for the server.

### middleware folder

Create a folder in the project directory called middleware that will contain all the middleware your server is using (like auth).

### model folder

create a folder in the project directory called __model__ that will house all the files that will contain all the data models and will act as a point of contact with the database. No other part of the server will directly interact with the server but the files inside the model folder.

### view folder

Create a folder in the project directory called __view__ that will contain the business logic. Files inside views will interact with the models to get the data from the server.

### controller folder

Create this folder in the project directory and remember that you will have all your route callbacks here.



### route folder

Finally, create a route folder in the project directory that will contain all the routes in your server.

> another way to go about this is by combining controllers and routes as suggested by [Daniel Hillmann](https://dev.to/hilleer) in the comments

In the end, the folder structure looks like this: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q56jd9xitlwygaxqn12f.png)

-----

## STEP 3:

Now for the sake of demonstration, we will set up an end to end route that will serve a request.

Let's get right into it!!

First, open app.js and type out (or paste) the code

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v0loj9l66zeo3xdnb2b6.png)

```javascript
const express = require("express");

const app = express();

app.use("/", require("./route/index"));

const PORT = 3000;

app.listen(PORT, () => {
    console.log(`listening on port: ${PORT}`) // use ` not '
})
```

_line number 5_ will forward all requests to the server to the index.js (we will create it) from where we will make calls to the controller.

Next, let's create the __index.js__ file in __route__ folder

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z1tzkzui91o9irj02yok.png)

```javascript
const express = require("express");

const router = express.Router();

_hello = require("../controller/hello");

router.get("/hello", _hello.callback);

module.exports = router;
```

_Line number 7_ will call _hello.callback for every request that is made to _localhost:3000/hello_

Next up, let's create the controller callbacks. 

Create a file in __controller__ called _hello.js_ and type out this code:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/chxps82386ad2j444rqr.png)

```javascript
const helloView = require("../view/helloView");
// import your data model and use it 
// for your business logic
module.exports = {
    callback: (req, res, next) => {
        res.status(200).send("Hello There!");
    }
}
```

THAT'S IT!

now if you start the server by running the following command

```shell
npm run dev
```

you will be able to make a get request from your browser to __localhost:3000/hello__ and see a message saying _Hello There!_. 

In this post, I showed you how to structure your express server so that it's easier to maintain. If you found this post to be informative please consider following me and subscribing to my newsletter.


https://tinyletter.com/jha

Happy Learning,
Jha