I'm trying to learn how to use node.js, and I've started with this tutorial. When I start node directly with node app.js, everything works fine. When I run node as a service under PM2 with pm2 start app.js, everything also works fine.
However, if I try to get PM2 to automatically restart my node app when I change my file(s) using pm2 start app.js --watch, it stops correctly serving my CSS, and I get ERR_EMPTY_RESPONSE in Chrome when trying to view the CSS file's route.
The PM2 error log is empty. The output log only records a GET request for the website root, with a 304 response code. If I use node directly, the console logs a 200 response for the root, a 200 response for the style.css the first page load, and a 304 response for the CSS on each subsequent page load for the same nod session.
I've tried specifying exactly what files to watch with PM2 using processes.json as detailed in Express 4 + pm2 watch not working, but it doesn't seem to affect the results.
// ./app.js
var express = require('express'),
stylus = require('stylus),
nib = require('nib'),
app = express();
function compile(str, path) {
return stylus(str).set('filename', path).use(nib());
}
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.logger('dev'));
app.use(stylus.middleware({ src: __dirname + '/public', compile: compile }));
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res) {
res.render('index', { title: 'My Title' });
});
app.listen(3000);
//- ./views/layout.jade
doctype
html
head
title #{title}
link(rel='stylesheet', href='/stylesheets/style.css')
body
header
h1 #{title}
.container
.main-content
block content
.sidebar
block sidebar
footer
p Running on node with Express, Jade, and Stylus
/* ./public/stylesheets/style.styl */
@import 'nib'
@import url('http://fonts.googleapis.com/css?family=Quicksand')
global-reset()
main-color = #fa5b4d
background-color = #faf9f0
body
font-family 'Georgia'
background-color background-color
color #444
header
font-family 'Quicksand'
padding 50px 10px
color #fff
font-size 25px
text-align center
background-color main-color
border-bottom 1px solid darken(main-color, 30%)
text-shadow 0px -1px 0px darken(main-color, 30%)
.container
width 500px
margin 50px auto
overflow hidden
.main-content
float left
width 300px
p
margin-bottom 20px
.sidebar
float left
width 200px
.widget
border-radius 3px
border 1px solid #ccc
margin-left 20px
background-color background-color
box-shadow inset 0px 0px 0px 3px rgba(#fff, 0.8), 0px 3px 0px -2px rgba(#000, 0.1)
h1
font-family 'Quicksand'
margin 13px 10px 4px
padding-bottom 10px
border-bottom 1px dotted #ddd
border-radius 2px 2px 0px 0px
margin-bottom 10px
p
font-size 13px
padding 0px 10px
margin-bottom 10px
p
line-height 1.0
footer
width 500px
margin 50px auto
border-top 1px dotted #ccc
padding-top 5px
font-size 13px
<!-- generated html (whitespace added for readability) -->
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<header><h1>My Title</h1></header>
<div class="container">
<div class="main-content">
<p>Vivamus hendrerit arcu sed erat molestie
vehicula. Sed auctor neque eu tellus
rhoncus ut eleifend nibh porttitor. Ut in.</p>
<p>Donnec congue lacinia dui, a porttitor
lectus condimentum laoreet. Nunc eu
ullamcorper orci. Quisque eget odio ac
lectus vestibulum faucibus eget in metus.
In pellentesque faucibus vestibulum. Nulla
at nulla justo, eget luctus tortor.</p>
</div>
<div class="sidebar">
<div class="widget">
<h1>Widget</h1>
<p>Sed auctor neque eu tellus rhoncus ut
eleifend nibh porttitor. Ut in nulla enim.</p>
<p>Vivamus hendrerit arcu sed erat molestie
vehicula.</p>
</div>
</div>
</div>
<footer>
<p>Running on node with Express, Jade and Stylus</p>
</footer>
</body>
</html>
