Build a Node.js Server

Firing up a Node.js server, serving HTML and examining the request and response objects.

Scroll down...

Content

Resources

Comments

This assignment gives you the chance to build your very own Node.js server. Further, it dives into serving an HTML page as well as dynamically inserting the data from the request and response objects! Node.js is about to get served!

Getting Started

  1. Fork and clone the project's Github Repo.
  2. cd into the project directory
  3. Now we're ready to get started!

Setting Up the HTTP Server

The first step to creating a server in Node.js is to require the HTTP library. Then we can use the HTTP library to create our server.

  1. Create an app.js file
  2. Require the HTTP library in that file
  3. Create a server using the http.createServer method
  4. Use the .listen method to pass in the host and port on which the server will be listening
  5. Pass a callback to the .listen function as a 3rd parameter to output an informative message to the console that the server is now running and listening at the address http://localhost:3000
  6. Use the req and res objects to respond to any HTTP request with a message of "Hello World!"
    • Note this can be in an HTML or plain text content type for now
  7. Verify that your server responds to an HTTP request correctly by navigating to http://localhost:3000 in your browser
  8. Commit!

Outputting HTML

Now that the server is responding to requests we can set up the server to respond with an HTML document.

  1. Create a folder called public/ in the root directory of your project
  2. Create an index.html file in the public/ directory
  3. Now load the fs module in your app.js file
  4. Now in the callback to your http.createServer function use the fs module to read in the index.html file
  5. Now in the index.html file set up a basic HTML document
    • Create an h1 that outputs a message so you can tell the page loaded correctly
  6. Use the res object to send the HTML file as a response back to the client
    • Don't forget to set the Content-Type header and HTTP status code!
  7. Verify that the page properly loads and the response is the index.html file
  8. Commit!

Displaying the Request and Response Data

Now that you are serving HTML you can use the <pre> tag to output pretty formatted JSON data. Using this tag you now must output specific properties from the req and res objects.

  1. In your HTML file setup some markup that looks like this:

    <h2>Request:</h2>
    <pre>{{ req }}</pre>
    
    <h2>Response:</h2>
    <pre>{{ res }}</pre>
    
  2. Now in your createServer callback use String.prototype.replace and JSON.stringify to replace the {{ req }} and {{ res }} strings with the JSONified objects.

    • Note that JSON.stringify takes a 3rd argument that specifies spacing for pretty printing the JSON. To take advantage of this feature call it like this: JSON.stringify(object, null, 2)
    • IMPORTANT because the req and res are huge circular objects JSON.stringify won't work unless you map them to a more shallow object. You can do this by creating a new object and assigning only the properties you wish to view to it and passing the new object to JSON.stringify
  3. You should output the following properties from the req object:

    • req.url
    • req.method
    • req.httpVersion
    • req.headers
  4. You should output the following properties from the res object:

    • res.statusMessage
    • res.statusCode
    • res._header
  5. Verify that your HTML page now renders with the correct data displayed.

  6. Commit!

Submitting a Form

Reading a bare-bones HTTP request without any data being submitted is not very interesting. So next create a form that submits some login information.

  1. Create a form with username and password inputs
  2. Don't forget to give your form an action, a method of GET, and a submit button!
  3. Now verify that when you submit the form it outputs the data correctly in your HTML request and response
  4. Commit!

(Optional) Submitting and Processing Post Data

Posting data is a bit more complex to process on the server side. In order to accept post data, you will need to use asynchronous callbacks to the data event of the req object. You then must combine the chunks of data and only then can they be used as a whole. We won't give away everything, but remember that promises make asynchronous tasks much easier to deal with!

Finishing Up

  1. Commit, push, and submit a pull request back to the main repo
Pull request 300 Octocat 300


Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Introduction to Express