These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
Let's warm up our Express skills with the most straightforward of servers. We will first look at how to set up a new repo for our app, get Express installed, and finally create and serve up a jaw-dropping "Hello, World" page.
First, let's make a new directory and use npm init
to create our package.json
file.
mkdir hello
// This creates our package.json file.
// The -y flag tell it to use the default options
npm init -y
Next, we will use npm to install Express.
npm install express --save
The --save
flag will tell npm
to save the package under dependencies
(check out this link for a more detailed sxplanation of dependencies) in package.json
. Your package.json
file should now look something like this:
{
"name": "hello",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.14.1"
}
}
Now that we have Express installed, let's build the actual—very basic—application.
Let's begin by creating the JavaScript file that will house all of the Express code for this very simple application.
touch index.js
Now, open this file in your favorite text editor. It does not take very much code at all to get a basic Express application wired up. The following code—ripped directly from the Express docs with only minor branding adjustments—is all you need.
const express = require('express')
const app = express()
app.get('/', function (request, response) {
response.send('Hello Viking!')
})
app.listen(3000, function () {
// This function is run when the app starts up.
console.log('Kemst þó hægt fari.')
})
The express
function is first required using the magic of Node, and then calling it creates an application object which we store as the app
constant.
The app
is chock-full of functions corresponding to HTTP methods. They each allow you to bind a route handler function to a particular URL pattern for the given HTTP method. In this case, when our app
receives a get
request to the top-level path (/
), it will send
back the string "Hello Viking!"
as its response
:
// It's nearly English! Sort of...
app.get('/', function (request, response) {
response.send('Hello Viking!')
})
Simply run node index.js
and open http:///localhost:3000 in your browser. Voila:
Let's alter our program such that it greets a name encoded in the URL. So if we visit "/names/Odin"
, we should see "Hello Odin!"
displayed in the browser.
We will grab this information off of the URL by using Route Parameters. Express will pattern match the URL string, supplying any path components prefixed with a colon as parameters on the request object. Here's all the new code we need to add our new behavior:
app.get('/names/:name', function (req, res) {
const name = req.params.name
res.send('Hello ' + name)
})
As you can see, the :name
Route Parameter was automatically added to the params object under the given key. We then simply interpolate this value into our response (here using ES6's string interpolation).
With Express, you can create a simple web server in less than 10 lines of code—of course, we could make this even shorter if we were willing to sacrifice readability. Although this application is incredibly simple, it does exhibit the properties shared by nearly every web application. Most importantly, it responds to a request with dynamically generated data.
The beauty of Express lies in its simplicity. It merely handles the boundaries of our system, the request, and the response. The rest is simply JavaScript. We can replace the body of either of our callback functions with as much complicated business logic as we desire. While there are a few more details to express, like Templates and Middleware (which we'll get to in the next lessons), you have more than enough to build a web application of extraordinary complexity. Let's keep going!