Code Your First API With Node.js and Express: Set Up the Server

How to Set Up an Express API Server in Node.js

In the previous tutorial, we learned what the REST architecture is, the six guiding constraints of REST, how to understand HTTP request methods and their response codes, and the anatomy of a RESTful API endpoint.

In this tutorial, we'll set up a server for our API to live on. You can build an API with any programming language and server software, but we will use Node.js, which is the back-end implementation of JavaScript, and Express, a popular, minimal framework for Node.

Installation

Our first prerequisite is making sure Node.js and npm are installed globally on the computer. We can test both using the -v flag, which will display the version. Open up your command prompt and type the following.

Your versions may be slightly different than mine, but as long as both are there, we can get started.

Let's create a project directory called express-api and move to it.

Now that we're in our new directory, we can initialize our project with the init command.

This command will prompt you to answer some questions about the project, which you can choose to fill out or not. Once the setup is complete, you'll have a package.json file that looks like this:

Now that we have our package.json, we can install the dependencies required for our project. Fortunately we don't require too many dependencies, just these four listed below.

  • body-parser: Body parsing middleware.
  • express: A minimalist web framework we'll use for our server.
  • mysql: A MySQL driver.
  • request (optional): A simple way to make HTTP calls.

We'll use the install command followed by each dependency to finish setting up our project.

This will create a package-lock.json file and a node_modules directory, and our package.json will be updated to look something like this:

Setting Up an HTTP Server

Before we get started on setting up an Express server, we will quickly set up an HTTP server with Node's built-in http module, to get an idea of how a simple server works.

Create a file called hello-server.js. Load in the http module, set a port number (I chose 3001), and create the server with the createServer() method.

In the introductory REST article, we discussed what requests and responses are with regards to an HTTP server. We're going to set our server to handle a request and display the URL requested on the server side, and display a Hello, server! message to the client on the response side.

Finally, we will tell the server which port to listen on, and display an error if there is one.

Now, we can start our server with node followed by the filename.

You will see this response in the terminal:

To check that the server is actually running, go to http://localhost:3001/ in your browser's address bar. If all is working properly, you should see Hello, server! on the page. In your terminal, you'll also see the URLs that were requested.

If you were to navigate to http://localhost:3001/hello, you would see URL: /hello.

We can also use cURL on our local server, which will show us the exact headers and body that are being returned.

If you close the terminal window at any time, the server will go away.

Now that we have an idea of how the server, request, and response all work together, we can rewrite this in Express, which has an even simpler interface and extended features.

Setting Up an Express Server

We're going to create a new file, app.js, which will be the entry point to our actual project. Just like with the original http server, we'll require a module and set a port to start.

Create an app.js file and put the following code in it.

Now, instead of looking for all requests, we will explicitly state that we are looking for a GET request on the root of the server (/). When / receives a request, we will display the URL requested and the "Hello, Server!" message.

Finally, we'll start the server on port 3002 with the listen() method.

We can start the server with node app.js as we did before, but we can also modify the scripts property in our package.json file to automatically run this specific command.

Now we can use npm start to start the server, and we'll see our server message in the terminal.

If we run a curl -i on the URL, we will see that it is powered by Express now, and there are some additional headers such as Content-Type.

Add Body Parsing Middleware

In order to easily deal with POST and PUT requests to our API, we will add body parsing middleware. This is where our body-parser module comes in. body-parser will extract the entire body of an incoming request and parse it into a JSON object that we can work with.

We'll simply require the module at the top of our file. Add the following require statement to the top of your app.js file.

Then we'll tell our Express app to use body-parser, and look for JSON.

Also, let's change our message to send a JSON object as a response instead of plain text.

Following is our full app.json file as it stands now.

If you send a curl -i to the server, you'll see that the header now returns Content-Type: application/json; charset=utf-8.

Set Up Routes

So far, we only have a GET route to the root (/), but our API should be able to handle all four major HTTP request methods on multiple URLs. We're going to set up a router and make some fake data to display.

Let's create a new directory called routes, and a file within called routes.js. We'll link to it at the top of app.js.

Note that the .js extension is not necessary in the require. Now we'll move our app's GET listener to routes.js. Enter the following code in routes.js.

Finally, export the router so we can use it in our app.js file.

In app.js, replace the app.get() code you had before with a call to routes():

You should now be able to go to http://localhost:3002 and see the same thing as before. (Don't forget to restart the server!)

Once that is all set up and working properly, we'll serve some JSON data with another route. We'll just use fake data for now, since our database is not yet set up.

Let's create a users variable in routes.js, with some fake user data in JSON format.

We'll add another GET route to our router, /users, and send the user data through.

After restarting the server, you can now navigate to http://localhost:3002/users and see all our data displayed.

Note: If you do not have a JSON viewer extension on your browser, I highly recommend you download one, such as JSONView for Chrome. This will make the data much easier to read!

Visit our GitHub Repo to see the completed code for this post and compare it to your own.

Conclusion

In this tutorial, we learned how to set up a built-in HTTP server and an Express server in node, route requests and URLs, and consume JSON data with get requests. 

In the final installment of the RESTful API series, we will hook up our Express server to MySQL to create, view, update, and delete users in a database, finalizing our API's functionality.



from Envato Tuts+ Tutorials

Comments

Popular posts from this blog

How to Build Self-Confidence: 10+ Steps to Improve Your Self-Esteem

Best of 2020: Great Landing Pages for Design Inspiration (Showcase Examples)

18+ Best Free PowerPoint Puzzle Pieces Templates (Infographic PPT Slides)