Express 10 Days guide | Day 1 - Environment Setup & First Application
Tags: express, expresscourse, backend, learning
Published: 2021-01-11 00:09:02

# Day 1: Getting Started

## Assumptions:
For this guide I suppose you're already familiar with JavaScript and some ES6 features, as well as some basic terminal commands (cd, ls, rm, mkdir, touch, echo).

## Environment Setup
In order to develop express applications you'll need some things to get started, maybe you already have two or three of them.

### A project folder

Go to a place you feel good with and create a new folder to save all your work. This folder's name can be 'workspace', 'projects', 'express-learning' or whatever you want to.

### A JavaScript Runtime ([Node JS](https://nodejs.org)) & a Package Manager ([NPM](https://npmjs.com))

Node JS is the way we'll run JavaScript code in our computer and NPM is something like the tool we use to copy code from others and put it into our own app (yes I know, is an interesting point of view).

Simply go to the [download page](https://nodejs.org/en/download), download the package for your operating system or install it from your terminal (Linux users) by using your distro's package manager sources.

Verify the installation with:
```bash
$ npm -v
```
And
```bash
$ node -v
```

### Text Editor

What editor I recommend?
Simple... AYL (Anyone you like).

Don't waste time in the 'best code editor', just take one and use it, if it doesn't make you feel comfortable writing code after one or two weeks, change it and repeat it.

Here is my little list of code editors, based in my own preferences.

- [Atom](https://atom.io)
- [Sublime Text](https://sublimetext.com)
- [Code](https://code.visualstudio.com)

### A Web Browser

Recommendations:
- [Firefox Developer Edition](https://www.mozilla.org/en-EN/firefox/developer)
- [Google Chrome](https://www.google.com/chrome/)

### API testing tool

I've been using [GetIt](https://getit.bartkessels.net) for a while, and I'm very happy with it, but [Postman](https://postman.com) is good too.

## Your first app

### Initial Setup

- Go to your project folder
- Create a new folder inside and name it `hello-express`
    - This name is just an example, you can name it however you want to
- Open the current directory in your terminal
    - Use `cd` to navigate
- exec `npm init -y` and `npm install express --save`
    - Those commands will initialize a new project (generate a package.json file with the data about our application) and save the framework source code for us, respectively.
- Create an app.js file inside
    - This is the file that will hold all application's code

### Finishing the project setup

- Open package.json in your code editor
- Delete the line `"main": "index.js",`
- Change the line `"test": "echo \"Error: no test specified\" && exit 1"` for `"start": "node app.js"`
    - This tells npm what we want it to do when we use the 'start' script, in this case, open app.js with node

### Adding code

In your app.js file write this code:
```js
const express = require('express');
const app = express();

app.get('/', (req, res, next) {
  res.send('Hello Express');
});

app.listen(3000, () => {
  console.log('Application listening on port 3000');
});
```

We're done!

### Running the application

Go to the terminal again and (being in the same directory) exec `npm start`.

Open [localhost:3000](http://localhost:3000/) in your browser and you'll see `Hello Express` in the rendered page.

Now, lets dive in.

## What did I build?

### express

In your app you have required `express`, the application's 'core'.

The first thing we do is to assign `app` to `express()`, this creates our app main object with all express methods.

Then we tell our `app` that it have to handle a `get` request in the root route (`'/'`) and return the message `'Hello Express'` using the method `send()` which is in the `res` parameter.

We can use `app.get` to match a get type request in the route we pass as the first parameter, for example, can be '/' (the root), '/home' or '/blog'.

Lastly we tell the app to listen on port 3000 for connections and once is ready to accept them put in the console the message 'Application listening on port 3000'.

Note we have three parameters in the `app.get` callback, those are the request made by your browser (`req`), the response from the server (`res`), and finally, the `next` parameter is a special function we'll cover in the next guide.

We'll review more in depth these and several more methods in the future.

Now you know the basic use of `app.get` so, this is today's homework:

1. Create a new express app
2. Match these routes '/', '/home', '/blog', '/services', and '/contact'.
3. Send a message with this content:
    - A greeting like 'Hello' or 'Hey!'
    - Route's name as 'You are in the XXXXX route', replacing the 'XXXXX' with route's name

## Summary

Today you:
- Create a development environment for express
- Create an empty project with `npm init`
- Create a simple express app
- Learn how to match get requests from clients
- Started the app using `npm start`

## Tomorrow's guide preview:

In the next guide you'll learn:
- 'req', 'res', and 'next'
- 'GET', 'POST', 'PUT', 'PATCH', and 'DELETE' methods

Any suggestions?
----------------