Check If Node.js Is Installed

If you see version numbers skip the next step on installing Node.js and go straight to the “Creating an Application” section.

Install Node.js On Windows

Install Node.js On a Mac

On a Mac there are a number of ways to install Node.js. The easiest way is to download the application from the Node.js website. While this is the simplest way it does have a disadvantage. It installs Node.js in a way that means you may need admin privileges to install supplemental modules and libraries. You can install these modules and libraries using the sudo command before the install command. The sudo command gives you admin privileges for that installation. sudo stands for Super-User DO and is used with UNIX-style operating systems. This allows you to install the package as an admin user.

Using sudo is not considered best practice as having admin rights means you can make unwanted changes to your computer. Using sudo can also affect how some of the modules work.

Another way to install Node.js is to use a Node version manager(NVM) ; it installs it so you don’t need admin privileges to install other modules and libraries. It is slightly harder to install as you need Xcode installed and you will need a .bashprofile file. There is another advantage: you can easily change between different versions of Node.js.

Using NPM Init To Create An Application

npm stands for node package manager. It hosts hundreds of thousands of packages of reusable code that you can download and use in projects.

npm also has a command called npm init, a useful way to create a Node.js application. It will ask a series of questions and then create a package.json file. You can press Ctrl+C to quit the process at any time.

Figure 2-3 shows an example of a package.json file.

package.json is an important file, it holds the metadata for the application and is used to handle the application’s dependencies. As you start to install libraries there will be a reference to them in the package.json file. If you share your application files you wouldn’t include all the libraries files. As the package.json has a reference to them, you can use npm install to install them at the copied location.

Note The name has to be in lowercase letters without spaces though you can use underscores and dashes.

Create A Node.js Server

In Node.js you create a JavaScript file that will start the server. It is stored in the root of the project and will be the entry point for the application. This file is often called app.js or index.js. When I used npm init to create the package.json, I kept the default for the entry script of index.js so now the index.js file needs to be created.

Create a new file at the root of your application called index.js. This can be created in your text editor or using the console. Make sure you are in the applications directory at the same level as package.json.

In the newly created index.js file write in the following code from Listing 2-1.

Listing 2-1 shows the basic code for setting up a web server using Express.js. Express.js is not part of the Node.js library so it will have to be installed in a minute, but first I will explain the code in Table 2-3.

The Code Explained

Using NPM To Install Libraries

If you get an error installing Express.js and are on a Mac it may be that you need admin rights to install it. Try installing again, this time type sudo npm install [email protected] --save then type in the computer’s password at the password prompt.

In the console you should now see the console log Listening on port 3000.

If you are using Windows you may see a security alert that Windows firewall has blocked some features of this app. Tick the box that says: Private networks, such as my home or work network.

If you open a web browser and type in localhost:3000 you should see: Cannot GET /

That is because there isn’t a route yet so the server does not know what page to serve to the browser. You will be creating routes in a minute.

If you look at your applications directory you will see there is a new folder called node modules. This is created the first time you install a new library into your application. If you look inside you will see that the files and folders for Express.js are in it.

Note You use--save to save a reference to the downloaded module in the package.json file.

In this book I will use @ to install new modules. This means you will install the same version I have been using. Without the @ it will install the latest module.

Set Up The Server

You should now be able to see ejs in your package.json file. It is just one line of code to include ejs in the project. Update your index.js file from code (Listing 2-1) with the line of code in bold:

This new line of code will allow you to use ejs in the project.

Up to now in the route you have used res.send. Using res.send in a route allows you to send simple data to a web page, but for most applications you would want to be able to send pages that can hold a lot more information. To do this you use the function res.render; this allows you to specify a file that will render in the browser and also send it new data.

Change your index.js file from code (Listing 2-1) with the code in bold; this adds a couple of variables and changes the route so it uses res.render instead of res.send:

The Code Explained

You should see an error on the page and in the console window that looks something like this:

Error: Failed to lookup view “index” in views directory “/Users/indie/Documents/web/book/chapter 2/03_set-up-ejs/views”

This is because now you are asking it to find an index page that doesn’t exist.

Set Up The Web Page

In Windows you might get a console response of Access is denied but the file should have been created.

In the newly created index.ejs file write in the code from Listing 2-2.

In a console window, make sure you are at the root of the project and restart the server. On the browser go to http://localhost:3000/ and there should no longer be an error. You should now see the text on the web page . You created this page with some simple HTML. HTML, which stands for HyperText Markup Language, is the common markup language used to create web pages. I will go into more detail about HTML in Chapter 4. It sets out the structure of the page and the elements within it.

Adding Data To The Web Page

The server has passed to the browser the data from res.render. It has passed a string called title that contains the text "Some Arduino components starting with P" and an array called components that contains ['potentiometer', 'piezo', 'phototransistor', 'pushbutton']. Using ejs the browser now has access to this data.

Update the index.ejs from Listing 2-2 with the text in bold:

The Code Explained

<% %>, or <%=  %> are part of the ejs library.

The <% %> tags are used when you are writing JavaScript, it will run the JavaScript inside the tags, and the text won’t appear on the page. Usually when you want to add JavaScript to a web page you have to wrap it in script tags <script></script> that you will be using later. EJS has its own version of the script tag, <% %>, which you use when writing code that accesses the data passed from the server.

Adding CSS

CSS stands for Cascading Style Sheet, and it is used to style elements on a web page. A web page without CSS looks very basic. While CSS can be added in the .ejs page it is best practice to create a separate .CSS file to hold the styles. You then need a link to the .css file in the .ejs page.

In a web application there are files called static files that are not created by the server and are used on the web page. These include CSS files, images, and JavaScript files. To use them in a .ejs file you need to know the path from the static file to the .ejs file. Express.js has a middleware function called express.static to help with this. You create a folder at the root of your application that will hold all your static files; this folder is normally called public. In the index.js file the express.static function is used to register the public folder. This means that the .ejs recognizes this folder as the root folder for your static files and you don't have to write the absolute path the to the .css file when you are calling it. You will write something like this: <link href="/css/main.css" rel="stylesheet" type="text/css">

Now update the index.js file from Listing 2-1 with the code in bold:

The Code Explained

Now open the main.css file you just created and add in the CSS (Listing 2-3):

You will also need to update the index.ejs file to tell it where to find the CSS file. Update the index.ejs file (Listing 2-2) with the HTML in bold:

So with the server running, refresh your web page, and you should now see the new style; it is using the HTML tags and an id to style the content.

Sending Data To a Web Page With Socket.io

You will now create a simple socket on the server and on the browser page that will pass information between them. There will be a button on the web page that will update a number when it is clicked. The message that the button has been clicked will be sent to the server via socket.io. The number will be changed and then socket.io on the server side will send the information back to the connected web pages.

In index.js add in the code in bold:

The Code Explained

The index.ejs from Listing 2-5 also needs to be updated with the code in bold:

The Code Explained