Understanding the Simple Express App | Node.js
Tags: beginners, node, express, codenewbie
Published: 2020-08-31 18:15:06

You're familiar with the concept of modularity from OOPS, right? So, my introduction is not in this post. :laughing:

{% post dsp9107/how-did-i-start-my-tech-journey-53ia %}

---

# Introduction

Express is a framework which makes it quite easy to build an API rapidly.

> Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

> With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy.

The agenda is to understand each line of code it took to develop the [Simple Express App](https://github.com/dsp9107/Simple-Express-App) :seedling:

{% github dsp9107/Simple-Express-App no-readme %}

# Contents

- [Introduction](#introduction)
- [Setup](#setup)
  - [Windows](#windows)
  - [Linux](#linux)
- [Usage](#usage)
  - [Starting the Server](#starting-the-server)
  - [Interacting with the Server](#interacting-with-the-server)
- [Explanation](#explanation)
- [Conclusion](#conclusion)
- [References](#references)
- [Further Reads](#further-reads)

# Setup

Before getting down to the development part, let's set up our development environment.

### Windows

- Get [VS Code](https://code.visualstudio.com/download)
- Get [Node.js](https://nodejs.org/en/download)
- Download [Simple Express App](https://github.com/dsp9107/Simple-Express-App) by clicking here : [:arrow_down:](https://github.com/dsp9107/Simple-Express-App/archive/master.zip)
{% github dsp9107/Simple-Express-App %}
- Unzip it and open the folder in VS Code for a convenient experience :grin:

### Linux

- Install VS Code
```
sudo snap install --classic code
```
- Install Node.js and npm
```
sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm
```
- Clone [this repo](https://gist.github.com/dsp9107/07cb6b779c016f29c93c6606414961e3)
```
git clone https://github.com/dsp9107/Simple-Express-App.git
```
- Open the directory with VS Code for a convenient experience :grin:
```
cd Simple-Express-App
code .
```

# Usage

We'll get the server running and then move to the interaction part.

### Starting the Server

- Once VS Code opens, open the integrated terminal with `` Ctrl + ` `` if you do not see it at the bottom
- Install the dependencies
```
npm install
```
- While the dependencies are being installed, let's tweak our VS Code a bit :grinning:

{% post dsp9107/setting-up-vs-code-for-javascript-development-4a8b %}

- Once done, let's start the server
```
npm start
```

We can see `Listening At somenumber ...`, in the terminal, which we'll call `PORT` from here on.

### Interacting with the Server

- Open any browser
- Go to `localhost:PORT/pathVars/helloWorld`

You can see the response on the page. Try replacing `helloWorld` with `somethingElse` in the URL. Those are path variables that are explained [below](#explanation).

> Using the URL bar of browsers, you can only make GET requests.

- In this post, I've explained how you can use Postman to interact with our Simple Express App. :smile:

{% post dsp9107/interacting-with-the-simple-express-app-using-postman-594m %}

Check out [Postman](https://learning.postman.com/docs/getting-started/introduction) for a broader set of HTTP methods and API testing functionalities.

# Explanation

There are comments which explain the most basic stuff.

This is `api.js` explained!

{% gist https://gist.github.com/dsp9107/07cb6b779c016f29c93c6606414961e3 file=api.js %}

There are [links](#references) down below which you can use to explore further. :smile:

And whenever you save either of the files with or without any changes, the server will restart, thanks to [nodemon](https://www.npmjs.com/package/nodemon) :fire:

# Conclusion

It's easier to catch up with a framework when you are familiar with its base programming language than to directly jump to the framework.

# References
- [Node.js](https://nodejs.org)
- [Express.js](https://expressjs.com)
- [Morgan Middleware](https://www.npmjs.com/package/morgan)

# Further Reads
- [Interacting with an Express App using Postman](https://dev.to//dsp9107/interacting-with-the-simple-express-app-using-postman-594m)
- [VS Code Productivity Tips](https://dev.to/dsp9107/setting-up-vs-code-for-javascript-development-4a8b)