0: Hello Client and Server
Lets begin with making a web page (HTML, CSS, perhaps some JS) where we display a short text, and build a simple server with node.js so that it can be served.
You are ready to begin if you have installed the necessary software, forked, and cloned the repo.
Make sure you're in the terminal, and navigate to the 'every-bit-matters' folder:
$ cd every-bit-matters
Now we can start by checking out the first stage of the workshop: stage-0. Run the following command:
$ git checkout -f stage-0
Nice. You have now checked out the code required to start.
Open the /client directory, and locate index.html. Open it in your favourite text editor.
We provide the following boilerplate. Copy and paste it into index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Every Bit Matters</title>
<link href="css/client.css" rel="stylesheet">
<script src="client.js"></script>
</head>
<body>
<h1>Speed Test Logger</h1>
</body>
</html>Don't worry, we'll go at it in more detail later.
Now you can open the file in your favourite web-browser. This can be done by right-clicking the file, selecting the option "Open with", or you can do it directly from the browser: File -> Open File.
When the file is opened you should see something like this:
Opening files in the browser directly from a directory are ok in certain situations. But for serving files on the internet and accessing shared resources, it is not a good solution.
In order to successfully do that, we need a web server.
We need a program that can accept a request from a browser, or any other program, and return a HTML page, or any other information we would like to serve to the client.
Building a server is quite common, so a lot of different frameworks for different languages exist. In this tutorial we'll use Express.
When using node.js, it is common practice to use npm - the node package manager, to handle the installation of frameworks and libraries. You can use npm from the command line. Open a new terminal and run the command npm.
$ npm
Usage: npm <command>
where <command> is one of:
...
npm has a lot of commands, but the most common are init, install, uninstall and start. npm stores information about what packages that have been installed, and other information about the node project in a file called package.json.
For you to run npm-commands in the same directory as the package.json file. This is typically located in the root directory of the node project. The command npm init can be used to create a new package.json file when starting a new project.
We have already created a package.json file for this project, but let's use npm install to install Express. Navigate to the /every-bit-matters directory, and execute the following command.
$ npm install express --save
[email protected] node_modules/express
...
The option --save is used to tell npm that we want to save this to package.json. Open package.json and look for the "dependencies" section. We now have a line telling us that this project uses Express. In addition it gives us a default version number for Express. The actual code for Express is stored in the node_modules directory. If we want to install all dependencies for a given project on a new computer, we can use just npm install, and npm will install all dependencies declared in package.json. Because of this, the contents of the node_modules directory is very rarely checked into source control.
"dependencies": {
...
"express": "^4.13.4",
...
},
With Express installed, we can move on to program how our web server should work. Open the server.js file in the root project directory of /every-bit-matters. Add the following code and save the file.
var express = require('express');
var app = express();
var port = 3000;
app.use(express.static('client'));
app.listen(port, function () {
console.log('Server running on http://localhost:' + port + '/');
});The line var express = require('express'), tells node that we want to load the express package, and bind it to a variable called express. Then we use app = express() to create a new express server, and bind it to a variable called app. We then use app.use(express.static('client')); to tell express that we want to serve all files in the /client directory.
Finally, we use app.listen(...) to start the web server on the port we spesified, and print a message to the console when the server is up and running.
We can try our new server by running the following command, and opening a browser on the url http://localhost:3000/.
> node server.js
Server running on http://localhost:3000/
We can use npm to keep track of the command needed to start our server. This is a useful convention, as it allows us and other people to start the server by just running the command npm start. To do this, open package.json and add "start": "node server.js", to the scripts-section, if it is not already present.
...
"scripts": {
"start": "node server.js"
},
...
Now you can use the command npm start to start the server.
> npm start
Server running on http://localhost:3000/
Next assignment: Creating a Logger