Advanced Servers
Static File Server
One popular use case is to serve files directly from a directory on our machine.
For this, we will setup a configuration module at
config.js that contains:config.js
1
'use strict'
2
3
module.exports = {
4
staticPath: __dirname // process.cwd()
5
}
Copied!
Which our application will include via
require('./config') (extensions are optional).Read File
server-readfile.js
1
'use strict'
2
3
// Requires
4
const httpUtil = require('http')
5
const fsUtil = require('fs')
6
const pathUtil = require('path')
7
const urlUtil = require('url')
8
const config = require('./config')
9
10
// Server
11
httpUtil.createServer(function (req, res) {
12
const file = urlUtil.parse(req.url).pathname
13
const path = pathUtil.join(config.staticPath, file)
14
fsUtil.exists(path, function (exists) {
15
if (!exists) {
16
res.statusCode = 404
17
return res.end('404 File Not Found')
18
}
19
fsUtil.readFile(path, function (error, data) {
20
if (error) {
21
console.log('Warning:', error.stack)
22
res.statusCode = 500
23
return res.end('500 Internal Server Error')
24
}
25
return res.end(data)
26
})
27
})
28
}).listen(8080)
Copied!
Test it:
curl http://localhost:8080/server-static.jsHowever, readFile will read the entire file, then send the entire file. Take a moment to imagine how this not optimum.
Streams
server-stream.js
1
'use strict'
2
3
// Requires
4
const httpUtil = require('http')
5
const fsUtil = require('fs')
6
const pathUtil = require('path')
7
const urlUtil = require('url')
8
const config = require('./config')
9
10
// Server
11
httpUtil.createServer(function (req, res) {
12
const file = urlUtil.parse(req.url).pathname
13
const path = pathUtil.join(config.staticPath, file)
14
fsUtil.exists(path, function (exists) {
15
if (!exists) {
16
res.statusCode = 404
17
return res.end('404 File Not Found')
18
}
19
const read = fsUtil.createReadStream(path)
20
read.on('error', function (error) {
21
console.log('Warning:', error.stack)
22
res.statusCode = 500
23
return res.end('500 Internal Server Error')
24
})
25
read.pipe(res)
26
})
27
}).listen(8080)
Copied!
Test it:
curl http://localhost:8080/server-static.jsDirectories
Getting more advanced here. What about outputting the contents of directories too? For this, we can use fs.readdir
server-static.js
1
'use strict'
2
3
// Requires
4
const httpUtil = require('http')
5
const fsUtil = require('fs')
6
const pathUtil = require('path')
7
const urlUtil = require('url')
8
const config = require('./config')
9
10
// @TODO
11
// This is getting a bit big, how can we refactor this?
12
// Can we abstract it out?
13
// What considerations do we need to take into account?
14
// How would we add additional actions if we abstract?
15
16
// Server
17
httpUtil.createServer(function (req, res) {
18
const file = urlUtil.parse(req.url).pathname
19
const path = pathUtil.join(config.staticPath, file)
20
fsUtil.exists(path, function (exists) {
21
if (!exists) {
22
res.statusCode = 404
23
return res.end('404 File Not Found')
24
}
25
fsUtil.stat(path, function (error, stat) {
26
if (error) {
27
console.log('Warning:', error.stack)
28
res.statusCode = 500
29
return res.end('500 Internal Server Error')
30
}
31
32
if (stat.isDirectory()) {
33
fsUtil.readdir(path, function (error, files) {
34
if (error) {
35
console.log('Warning:', error.stack)
36
res.statusCode = 500
37
return res.end('500 Internal Server Error')
38
}
39
return res.end(files.join('\n'))
40
})
41
}
42
else {
43
const read = fsUtil.createReadStream(path)
44
read.on('error', function (error) {
45
console.log('Warning:', error.stack)
46
res.statusCode = 500
47
return res.end('500 Internal Server Error')
48
})
49
read.pipe(res)
50
}
51
})
52
})
53
}).listen(8080)
Copied!
Test it:
curl http://localhost:8080Applying Abstractions
Considering the static file server example is incredibly common. Lets think of ways we can abstract out the serving of static files so we can re-use that functionality easily.
Desiring a solution like:
server-static-module.js
1
'use strict'
2
3
// Requires
4
const httpUtil = require('http')
5
const serveStatic = require('./serve-static')
6
const config = require('./config')
7
8
// Server
9
httpUtil.createServer(function (req, res) {
10
serveStatic(config.staticPath, req, res)
11
}).listen(8080)
12
13
// Can even do this, due to the simplicity
14
// httpUtil.createServer(
15
// serveStatic.bind(null, config.staticPath)
16
// ).listen(8080)
Copied!
One could come up with the following:
serve-static.js
1
'use strict'
2
3
// Requires
4
const fsUtil = require('fs')
5
const pathUtil = require('path')
6
const urlUtil = require('url')
7
8
// Serve static
9
module.exports = function (root, req, res, next) {
10
const file = urlUtil.parse(req.url).pathname
11
const path = pathUtil.join(root, file)
12
fsUtil.exists(path, function (exists) {
13
if (!exists) {
14
if (next) return next()
15
res.statusCode = 404
16
return res.end('404 File Not Found')
17
}
18
fsUtil.stat(path, function (error, stat) {
19
if (error) {
20
console.log('Warning:', error.stack)
21
res.statusCode = 500
22
return res.end('500 Internal Server Error')
23
}
24
25
if (stat.isDirectory()) {
26
fsUtil.readdir(path, function (error, files) {
27
if (error) {
28
console.log('Warning:', error.stack)
29
res.statusCode = 500
30
return res.end('500 Internal Server Error')
31
}
32
return res.end(files.join('\n'))
33
})
34
}
35
else {
36
const read = fsUtil.createReadStream(path)
37
read.on('error', function (error) {
38
console.log('Warning:', error.stack)
39
res.statusCode = 500
40
return res.end('500 Internal Server Error')
41
})
42
read.pipe(res)
43
}
44
})
45
})
46
}
Copied!
Note the introduction of a
next callback. This allows us to chain additional or custom functionality.server-static-custom.js
1
'use strict'
2
3
// Requires
4
const httpUtil = require('http')
5
const serveStatic = require('./serve-static')
6
const config = require('./config')
7
8
// Server
9
httpUtil.createServer(function (req, res) {
10
serveStatic(config.staticPath, req, res, function () {
11
res.statusCode = 404
12
res.end('404 Not Found. 🙁 \n')
13
})
14
}).listen(8080)
Copied!
Introduction to Middlewares
In our previous example of writing the
serveStatic what we effectively did was create a middleware, albiet a basic middleware but a middleware nonetheless. Naturally, there are already plenty of other middlewares published as modules by other people. This is helped by the middleware framework Connect originally by TJ Holowaychuk.Before we can install anything, we need to first initialise our directory as a node.js project:
1
npm init
Copied!
That will create a
package.json file that will keep track of the dependencies we install.We can install connect like so:
1
npm install --save connect
Copied!
Using connect, our static file server example would become:
connect-static.js
1
'use strict'
2
3
// Requires
4
const connect = require('connect')
5
const config = require('./config')
6
7
// Server
8
const app = connect()
9
10
// Middlewares
11
12
// Use our local static middleware
13
app.use(require('./serve-static').bind(null, config.staticPath))
14
15
// Create the fallback middleware for when the route was not found
16
app.use(function (req, res) {
17
res.statusCode = 404
18
res.end('404 Not Found. 🙁 \n')
19
})
20
21
// Listen
22
app.listen(8080)
Copied!
Much simpler. Notice how the middlewares are like a waterfall, it hits the first, then if the first doesn't know what to do, the logic will flow through to the next middleware (accomplished by the previous middleware calling the
next callback inside it).Connect has plenty of other middlewares available for it. Official middlewares for connect are listed on its website with 3rd party middleware listed on GitHub.
There is even existing middlewares for what we've just accomplished. We can install them like so:
1
npm install --save serve-static serve-index
Copied!
And consume them like so:
connect-community.js
1
'use strict'
2
3
// Requires
4
const connect = require('connect')
5
const config = require('./config')
6
7
// Server
8
const app = connect()
9
10
// Middlewares
11
12
// Serve the files at the static path
13
app.use(require('serve-static')(config.staticPath))
14
15
// If a directory is requested, serve its index.html file if it has one
16
app.use(require('serve-index')(config.staticPath))
17
18
// If none of the previous middlewares matched, then fallback to 404
19
app.use(function (req, res) {
20
res.statusCode = 404
21
res.end('404 Not Found. 🙁 \n')
22
})
23
24
// Listen
25
app.listen(8080)
Copied!
Introduction to Web Frameworks
Perhaps by now you would have noticed the amount of individuals mentioned who have created awesome things, this is very much the case, anyone can have an impact.
Express can be thought of as a layer that sits ontop of connect and node's http module. It provides its own middleware and uses its own request and response objects that inherit from those of node's http module. The benefit over just using connect are:
- Addition of routing
- Common functionality provided through a friendly syntax
We can install express like so:
1
npm install --save express
Copied!
The following is what a simple hello world server would look like with express:
express-basic.js
1
'use strict'
2
3
// Requires
4
const express = require('express')
5
6
// Application
7
const app = express()
8
9
// Routes
10
// These make things easier
11
app.get('/', function (req, res) {
12
res.send('hello world')
13
})
14
15
// Fallback middleware
16
app.use(function (req, res) {
17
res.send(404, '404 Not Found. 🙁 \n')
18
// ^ this is different from connect
19
})
20
21
// Server
22
const server = app.listen(8080)
Copied!
It is important to note that the linevar server = app.listen(8080);is the same as doingvar server = require('http').createServer(app).listen(8080);. You will need to remember this when interfacing with other modules - some modules like to interface with the express instanceappwhile others like to interface with the node http server instanceserverinstead.
And this is what our static file server will look like with express:
express-static.js
1
'use strict'
2
3
// Requires
4
const express = require('express')
5
const config = require('./config')
6
7
// Application
8
const app = express()
9
10
// Middlewares
11
12
// Use our local one
13
app.use(require('./serve-static').bind(null, config.staticPath))
14
15
// Use the prexisting ones
16
// app.use(require('serve-static')(config.staticPath))
17
// app.use(require('serve-index')(config.staticPath))
18
19
// Fallback middleware
20
app.use(function (req, res) {
21
res.send(404, '404 Not Found. 🙁 \n')
22
})
23
24
25
// Server
26
const server = app.listen(8080)
27
Copied!
Notice the nicer syntax for setting the status code of the response. Before it was
res.statusCode = 404; now it is the first argument of res.send. This is what we meant by express providing a nicer syntax.