Using Express

As we've discussed, JavaScript in the backend is incredibly useful for creating web applications and harnessing the power of JavaScript on both the front- and back-end. One of the most fundamental tools for a server-side application that interacts with the frontend is a basic web server. In order to provide APIs, database access, and other functionality that is not designed to be handled by the browser, we first need to set up a piece of software to handle these interactions.

Express.js (or just Express) is a web application framework, considered the de facto web server of Node.js. It enjoys both high popularity and ease of use. Let's use it to build a full-blown web app.

The following topics will be covered in this chapter:

• The scaffold: Using express-generator
• Routes and views
• Controllers and data: Using APIs in Express
• Creating an API with Express

...

Technical requirements

Be prepared to work with the GitHub repository at https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-13. All you'll need is a code editor and a browser. In the Routes and views section, we'll discuss a few best practices for working with code editors.

The command-line examples are presented in macOS/Linux style. Windows users might need to consult the documentation to understand a few nuances of the Windows command line.

The scaffold: Using express-generator

To get started, we'll need to get on our command-line interface (CLI) again. If you remember Chapter 2, Can We Use JavaScript Server-Side? Sure!, we took a look at Node and npm on the command line. Let's check our version again so we can make a few decisions about our application. On your command line, run node -v. If you have v8.2.0 or greater, you have the option of using npx to install certain packages that are designed to be run only once in the lifespan of a project, such as express-generator. However, if you have a lower version, you can use npm to install one-time-use packages as well as packages that are used in your project.

We'll move forward with npx in this chapter, so if you need to take a quick look at the documentation for npm versus npx, be sure to give yourself some time to do that. In essence, to use npm for one-time packages that shouldn't live inside your code base, for example, a scaffolding tool such as an...

Routes and views

Routes and views are the foundation of how a RESTful application's URLs act as pathways to its logic and how content is presented back to the user. Routes will determine what parts of code correspond to the URLs of the application's interface. Views determine what is displayed, either to a browser, another API, or other programmatic access.

To further understand the structure of an Express application, we can examine its routes and views:

1. First of all, let's open our Express application in your favorite IDE. I'm going to be working with VS Code. If you use VS Code, Atom, Sublime, or another IDE that has command-line tools, I highly recommend installing them. For example, with Atom, you can launch a multi-panel Atom editing interface by typing atom . in the command prompt and opening that directory in Atom.

2. Similarly, VS Code will do this with code .. Here's what this looks like:

Figure 13.4 - VS Code

I've expanded the directories on...

Controllers and data: Using APIs in Express

As you may have heard around the web, Express is great because it's not very opinionated on how you use it, and at the same time, people say that Express is hard to work with because it's not opinionated enough! While Express isn't typically set up as a traditional Model-View-Controller setup, it can be beneficial to split functionality out of your routes and into separate controllers, especially if you may end up having similar functionality between routes and want to keep your code DRY.

If you're not very familiar with the Model-View-Controller (MVC) paradigm, don't worry—we won't go into it in too much detail, as it's a very weighty topic, complete with its own debates and conventions. For now, we'll just define a few terms:

• A Model is a part of the application that deals with data manipulation, especially communication to and from a database.
• A Controller deals with logic from routes (that...

Creating an API with Express

Who doesn't like a nice starship battle, like in Star Wars or Star Trek? I happen to be quite a fan of science fiction, so let's play along and construct a RESTful API using storage, routes, controllers, and models to keep track of our gameplay. While we'll be focusing on the backend of this application, we'll stand up a simple frontend for the population of data and testing.

You can find a work-in-progress example app at https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-13/starship-app. Let's start there, and you can finish it using the following steps:

1. Clone the repository if you haven't already.
2. Navigate into the directory with cd starship-app and run npm install.
3. Start the project with npm start.
4. Open http://localhost:3000 in a browser. If you already have any projects running on port 3000, the start command may prompt you to use a different port. Here's our basic frontend...

Summary

We covered a lot in this chapter, from routing to controllers to models. Keep in mind that not every application follows this paradigm, but it's a good baseline with which to start your approach of backend services as they relate to the frontend.

We should remember that using express-generator can help scaffold out applications, using npm or npx. Routes and views are our front line of the application, dictating where code is routed and what is viewed by the end client (whether it's JSON or HTML). We worked with APIs to explore the inherently asynchronous behavior of APIs, and also created our own API!

In the next chapter, we will discuss what makes Express a different type of framework than Django or Flask. We'll also examine how to join our frontend and backend frameworks.

Further reading

• Tutorial: REST Verbs and Status Codes: https://hub.packtpub.com/what-are-rest-verbs-and-status-codes-tutorial/
• How to enable ES6 (and beyond) syntax with Node and Express: https://www.freecodecamp.org/news/how-to-enable-es6-and-beyond-syntax-with-node-and-express-68d3e11fe1ab/
• Handling GET and POST Requests in Express 4: https://codeforgeek.com/handle-get-post-request-express-4/
• How to design a REST API: https://restfulapi.net/rest-api-design-tutorial-with-example/