Express: The Middleman
In this second installment of From Stack to App, learn about the E in NERD — Express!
What is Express?
Express is a popular, unopinionated Node web framework that provides middleware to address the web development tasks not addressed through Node including:
- handling different HTTP requests (eg. logging in, checking out a cart, entering information into an online form, etc.) for different URL paths,
- inserting data (eg. user information, items in your shopping cart, etc.) from our database onto the screen for users to see, and
- setting web application settings like where to locate certain files or connecting to servers.
In short it is the middleman of your app. Express will handle the communication between your frontend (the user interface or browser) and your backend (database and server). So let’s pick up where we left off.
Create a Server
Step 1: Start Express App
We need an entry point to our app. So we’re going to start our Express server by creating a server directory and starting an instance of an Express application.
makedir server // creates a folder called "server"
cd server // enter the server file
touch app.js // creates entry point file for our application
. code app.js // opens up file to edit
Step 2: Request and Send Index.html file to the Browser
We need to actually see our app, so let’s create a basic layout or HTML file. Make sure you are in your main directory (i.e. you are NOT in the server file).
In index.html, create a basic HTML file:
Now let’s “get” our HTML file so we can (eventually) display it on the browser.
Step 3: Start the Server
Let’s start our server, so we can see what our app looks like so far in the browser.
Add the following line to
"scripts" object. This tells node which file to go to in order to start running our server:
Step 4: Install Nodemon
Instead of having to kill and restart the server each time we make a change to our app, lets install nodemon. Now we’ll be able to make changes to our app and restart our server automatically.
npm i --S -D nodemon //installs nodemon as a development dependency
"dev" property to your
"scripts" object after
"start". This will tell nodemon which file to use to run and restart our server during development of our application:
npm run dev //starts server
Now go to your browser, go to http://localhost:3000/, and you should see “Placeholder Text” from your index.html. Go ahead and change it to whatever you like. We’ll be adding more to this file later!
In short it [Express] is the middleman of your app. Express will handle the communication between your frontend (the user interface or browser) and your backend (database and server).
Middleware are functions that process HTTP requests and responses to the HTTP client, then calls the next function in the stack — either another middleware or route handler (we’ll get to that later). It can execute any operation or code and can be organized based on your preferences (unless a middleware is dependent on another to run successfully).
Step 5: Logging Middleware
Not all middleware are built into the Express library. We call these third-party middleware. In order to use it, we need to first install their node package, require it in our application, then “use” it in our app. One such middleware is morgan, which logs HTTP requests.
npm install --save morgan //installs morgan node package
Step 6: Parsing Middleware
Express contains built-in middleware that allows us to parse or translate the body (information) that often comes with a request from the browser or client side. We can tell which parser will be needed based on the content type of the body (located in the header of the request). After the middleware parses the body, a new body object containing that parsed data is added to the request object. Otherwise, the parser will return an empty object.
Step 7: Static Files and Middleware
mkdir public // creates public folder for static files.
Step 8: Error Handling Middleware
The 500 Internal Server Error is a HTTP status code that means something has gone wrong on the web site’s server but we’re not sure why. We’ll add more error handling later when we build Express routes to the database, but for now, lets create this error handling middleware.
Middleware With Nowhere to Go
So now we have an Express application with a server. We can process HTTP requests and responses, serve static files and HTML to the browser, log HTTP requests, handle non-specific errors and listen to our server. Another cool feature of Express, is the ability to create routes to handle requests to and receive responses from our server(s). A route associates an HTTP verb (GET, POST, PUT, DELETE, etc.), an URL path/pattern, and a function that is called to handle that pattern. However, we have no database!
Originally published at http://github.com.