Revolutionizing Web Development with Node.js Part 2

Hi guys! Last week we went over six steps for building a simple full stack Node.js app. Today is time to finish it! Let’s get started.

Step 7. Modules and NPM

A module is nothing more than a JavaScript file that exports its code. Node.js has a lot of built-in modules like fs and events that I talked about last week. There is another list of modules beyond that. The traditional way to import a module in Node.js is to use require() function. However recently Node.js added support for ES modules which use import/export syntax.

Let’s look at how we can use modules in our own code base. Let’s create a new file and call it my_module.js Now let’s go to our index.js file, create a variable for the module and import it using require

const myModule = require('./my-module')

When we console.log it we notice that it is just an empty object for now. In order to make a module useful we need to export some code from it. In our my_module.js file we can reference this object with module.exports

module.exports 

We can add new properties to the object or redefine it as a new object. In either case, whatever you have here, will now be available to use in the other file

module.exports = {
  hello: 'world'
}

When we console.log the module now the object is no longer empty. But at some point you might want to use someone else’s code there and the best place to do that is via NPM. Let’s open the command line and run npm init with a ‘y’ flag to use default options

npm init -y

That will create a package.json file in the root of the application. This file can contain meta data about your project but, most importantly, it keeps track of the dependencies that you can use here. At this point we haven’t installed anything yet. Let’s do it by running this command

npm install express 

Express is a web application framework and one of the most popular third party Node.js modules. After running the command we notice that a few things have been added to our package.json file — Express framework has been added to the dependencies object. This dependencies object allows you to manage multiple dependencies in the project and reinstall them all at once on a different system.

Now, that we have this package installed, we can import it in our index.js file by simply requiring Express

const express = require('express')

Now we have reached the point where we ready to put the seven steps together to build a real full stack application. What we are building here is just a typical full stack web application. Our server will live on the url and when a user makes a request to this url in the browser the server will respond with some HTML.

In our index.js file let’s create an instance of an Express app. An Express app allows us to create different urls and endpoints that a user can navigate to in the browser, and we define the code for the server to handle those request

const express = require('express')
const app = express()

When a user navigates to a url in the browser it is known as ‘GET’ request which means we are requesting some data on the server and not trying to modify or update anything on the server.

In Express, we can set up a request like that

app.get('/', (request, response) => {
  ...
})

The first argument is the url that the user will navigate to. The second argument here is a callback function. You can think of every request to this url as an event, and you handle the event with this function. Express gives us two parameters to make use of — request and response. The request is an incoming data from the user. At this point we need to implement the code to handle the request. What we wanna do is read some HTML from our file system and then send it back to the browser. Let’s create an HTML file with some boiler plate code and call it home.html Now let’s connect this file with our get request url we created above

app.get('/', (request, response) => {
  readFile('home.html', 'utf8', (err, html) => {
    if (err) {
      response.status(500).send('sorry, out of order')
    }
    response.send(html)
  })
})

Now we have a way to send HTML from the server to the client. Now we need to tell our Express app to start listening to incoming requests. We do that by defining a port which will normally come from the Node.js environment variable

app.get('/', (request, response) => {
  readFile('home.html', 'utf8', (err, html) => {
    if (err) {
      response.status(500).send('sorry, out of order')
    }
    response.send(html)
  })
})
app.listen(process.env.PORT || 3000, () => console.log('App available on http://localhost:3000'))

We can start the server by typing ‘node’ in the current working directory. If you go ahead and open the url in the browser you should see you HTML returned back to you.

We have just built a Node.js app! How exciting!

Happy coding!