Skip to content

Instantly share code, notes, and snippets.

@georgebyte
Last active March 6, 2017 06:39
Show Gist options
  • Save georgebyte/9814423 to your computer and use it in GitHub Desktop.
Save georgebyte/9814423 to your computer and use it in GitHub Desktop.
Node, Express, Hogan, Compass: Create Node app with Express web aplication framework + Hogan and Compass

Create node.js app with Express web aplication framework + Hogan and Compass

Install express and nodemon.

sudo npm install -g express
sudo npm install -g nodemon

Create express project.

express MyProject --hogan
cd MyProject
npm install

Init compass project

compass init

Change config.rb to this.

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "public/stylesheets"
sass_dir = "sass"
images_dir = "public/images"
javascripts_dir = "public/javascripts"

# You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded # :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Start compass.

compass watch

Start Express server.

nodemon app.js

Additional: remove route definitions from app.js by changing app.js to this ...

/**
 * Module dependencies.
 */

var express = require('express');
var http = require('http');
var path = require('path');

var app = module.exports = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

var routes = require('./routes');

http.createServer(app).listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

... and routes/index.js to this ...

app = require('../app');

app.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});

require('./user');

... and routes/user.js to this.

app.get('/user', function(req, res) {
  res.render('index', { title: 'User page' });
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment