How to start with Express

Introduction

Every new step in my career as a developer I feel like I have to google too much to find simple answers. Documentation for many frameworks or dependencies are extremely convoluted and feel like they take longer to read, than the project would take to complete. The purpose of these blogs is for me to show a basic lay out to help beginners start with a new program.

Side-note: I use WSL with Ubuntu so some tips and commands I mention may not be the same for everyone else.

NodeJS

I am going to assume anyone starting with Express already has NodeJS, but if you do not then these links will get you on the right track.

Linux download with a package manager here

Windows and Mac downloads here

Starting Out

Setting up Node

Once you have NodeJS, we are ready to get started with Express. First we need to install express in a new directory. Open up a new directory and name it whatever your heart desires. First step is to initialize an npm(node package manager) so that any dependencies we download will only be for this one project (If you have used other languages that create a virtual environment, this is essentially what we are doing). Only command needed for this is npm init.
Command will look like this:
$ npm init

And a questionnaire about file name and other options will pop up in your CLI. If you have no preference or reason to change any of the default information you can just press Enter until complete.
That's what I did below.

After running this command your directory should contain a package.json file that will look like the below example.

Installing and Importing Express

Once you have Node set up it is now time to install and set up express. Just like any node package we will just use npm i express to download this in to our current project. The command in your CLI and the updated package.json examples are below.

$ npm i express

If you are using Ubuntu and run in to permission errors when trying to install packages, you can use sudo in front of any npm i command.

Now that we have express in our package.json, we need to import it in to our file. Create an app.js file and the first line will be:

const express = require('express');

If you know ES6 and want to import the file instead of using require you can easily put import express from 'express'; instead of the above example. Be wary as some browsers do not support ES6 yet.

Now we can instantiate express by assigning it:

const app = express()

At the bottom of the app.js file we will need to set up an app.listen() to set up a port for the server to run on. Most commonly used port with express is 3000, but this can be any port you choose.

app.listen(3000, ()=>{
    console.log('Server at port 3000');
});

Now we can start the server with running $ node app.js in your CLI and opening up a browser to 'localhost:3000/'. You should also see your console.log() in your CLI to confirm your server has started.

Setting up routes

At this point we can start creating routes (Remember to use RESTful conventions). All routes can be created with app.get(), app.post(), etc... The common method used will be name(path, callback) where name is the request method used (get, post, delete, etc...). The first value passed in to app.get will be a string of the path. All will begin with '/'. The callback function will pas in a request and a response variable, that can be used to retrieve data from the url query or paraments, and respond with data based on the request. To respond with different data types we can use res.send() or res.json(). Below is an example of a common home route.

app.get('/', (req, res)=>{
    return res.send('Hello World');
};

This will return a basic string of 'Hello World' which while boring is the first stepping stone to building and understanding a route with express. Creating a route that can pass a parameter while performing an HTTP GET operation can be created with '/:name'. The semi-colons allow this to be used as a variable to pull information from using request.params. When visiting 'localhost:3000/testName' with the below route you can pull 'testName' from the parameter string.

app.get('/:name', (req, res) =>{
    const {name} = req.params;
    return res.send(name);
}

The above example will return whatever is in the url route such as 'testName' in the above example. To retrieve data from a query string, the syntax will be very similar, but instead of using req.params, we will use req.query. The below example will return the same string as the above example. The only difference is where the data is pulled from.

Visit : localhost:3000/name?name=testName

app.get('/name', (req, res) =>{
    const {name} = req.query;
    return res.send(name);
}

Whatever is passed in the the query string '?name=testName' will be returned with req.query. What you do with this data is endless.

In Closing

This is the beginning of how to set up use routes with express. There are many options that can be used to retrieve form data or json data as examples, and obviously this only shows GET routes. This is written to help a beginner get started with express and set up an easy style and layout to begin creating their own back-end in easy to understand language.