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) & a Package Manager (NPM)

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, 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:

$ npm -v

And

$ 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
• Sublime Text
• Code

A Web Browser

Recommendations:

• Firefox Developer Edition
• Google Chrome

API testing tool

I've been using GetIt for a while, and I'm very happy with it, but Postman 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:

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 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?