compile scss with nodemon and node-sass - javascript

I'm playing around with node.js, express and node-sass and watching for file changes with nodemon.
I added this bit to the app.js to compile the scss (according to the node-sass docs) but it's not doing anything. I would like for the sass to compile when nodemon runs app.js every time I make changes to the project.
I'm not sure if it will even work with nodemon like this but just running node app.js in the console without nodemon does nothing so it must be something I'm doing wrong.
APP.JS FILE
/**
* Module dependencies.
*/
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var sass = require('node-sass')
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.favicon(__dirname + '/public/favicon.ico'));
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')));
app.use(sass.middleware({
src: __dirname + '/public/scss',
dest: __dirname + '/public/css',
debug: true,
outputStyle: 'compressed'
}));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', routes.index);
app.get('/users', user.list);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
thanks for any help.

Related

Set the lookup path of view folder of ejs in express

I have app.js in Express_server folder.Full location of aap.js is I:\WEB Development\Node\Express_server\
and I made views folder at the location I:\WEB Development\Node\
How can I set the lookup path of views folder to above location(I:\WEB Development\Node)?
code of my app.js
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/',function(req, res){
res.render('index');
});
You can change your views default path:
app.set('views', path.join(__dirname, '../views'))
const express = require('express')
const app = express()
const port = 3000
require("./route/route.js")(app);
app.set('views', path.join(__dirname, '../views'))
app.set('view engine','ejs');
app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Unable to render index.html file from my view folder in angular2

I'm creating a MEAN Stack application where angular has setup in /client folder. I want that when I run npm start command in /client folder it should render index.html file from /views folder, what I'm doing wrong getting this error
Cannot GET /
Folder structure is as follows.
meanApp
----- client (angluar2 setup here but doesn't have an index.html file)
---------- app
----- views
----------index.html
----- routes
----- server.js
Codes in server.js
var express = require("express");
var path = require("path");
var bodyParser = require("body-parser");
var index = require('./routes/index');
var tasks = require("./routes/tasks");
var app = express();
//View engines
app.set("views", path.join(__dirname,'views'));
app.set("view engine", 'ejs');
app.engine("html", require("ejs").renderFile);
//Set static folder
app.use(express.static(path.join(__dirname,'client')));
// Body parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.use('/', index);
app.use('/index', index);
app.use('/api', tasks);
//listen
app.listen(3000, function(){
console.log("Server listing # 3000");
});
Here you need to define route for express server like :
app.set('appPath', 'client'); //this is a folder where your index.html is
app.route('/*')
.get(function(req, res) {
res.sendfile(app.get('appPath') + '/index.html');
});
This will cause every call in broweser to render index file.
const http = require('http');
fs = require('fs');
var express = require('express');
var bodyParser = require('body-parser');
var expressValidator = require('express-validator');
var app = express();
app.set('appPath', 'views');
app.use(express.static(__dirname + '/views'));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(expressValidator());
app.use('/*', function(req, res, next) {
res.sendfile(app.get('appPath') + '/index.html');
});
http.createServer(app).listen(3001, function() {
console.log(`Express server listening on port 3001`);
});
exports = module.exports = app;

node.js TypeError: Object has no method get

I'm trying to separate server initiation and other calls from the core file(app.js) but when I try to run it, it issues me error that
http.createServer(app).listen(app.get('port'), function(){
^
TypeError: Object function (){ all code from app.js file }
has no method 'get'
This is app.js file.
/**
* Module dependencies.
*/
module.exports = function(){
var express = require('express');
var routes = require('./routes');
var path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 4000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
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());
}
app.get('/', routes.index);
return app;
};
and this is server.js file.
var http = require('http'),
app = require('./app');
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
using express#3.4.0
what am I missing OR doing wrong.. please help.
You have no reason to return a function into your app.js file, just return the express object:
var express = require('express');
var app = express();
// ... more variables
// ... the rest of your code
module.exports = app;
Then, the rest of your code into server.js will work fine.
Remember that module.exports works like a "return" into CommonJS (and therefore NodeJS).
See documentation.
You're passing a function to module.exports, so when you require('./app'), you need to call it like a function:
var http = require('http'),
app = require('./app')();
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});

Using Socket.io with Node.js, Express and Jade

I have some trouble to use Socket.io even just to test if a client is connected. I've tried many things and I think that my mistake is, maybe, when I do the app.get function. I have also tried to do this in an route js file but it wasn't conclusive neither. So here are my different codes :
App.js
/**
* Module dependencies.
*/
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('mongodb://xxxxx:xxxxx#ds051067.mongolab.com:51067/jdo');
var app = express(),
server = http.createServer(app) ,
io = require('socket.io').listen(server);
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(express.cookieParser('This is secret'));
app.use(express.session());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
io.sockets.on('connection', function (socket) {
console.log('Un client est connecté !');
});
// app.get('/', routes.index);
app.get('/users', user.list);
app.get('/deplacement',routes.deplacement);
app.get('/monCompte', routes.compte);
app.get('/connexion', routes.connexion);
app.get('/', function(req, res) {
res.render('index.jade');
});
server.listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
Index.jade
extends layout
block content
script(src="/socket.io/socket.io.js").
var socket = io.connect('http://localhost:3000');
});
PS : Sorry if my english is bad ^^
You can't use inline javascript in the same script tag as an included script.
extends layout
block content
script(src="/socket.io/socket.io.js")
script.
var socket = io.connect('http://localhost:3000');

Node.js Express/less-middleware & Bootstrap 3

I've recently started learning Node.js and I am trying to set up an express install with less-middleware and want to use Bootstrap 3 less files. I've had a look around but can only find tutorials for Bootstrap 2.
This is my code so far:
/**
* Module dependencies.
*/
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(express.cookieParser('your secret here'));
app.use(express.session());
app.use(app.router);
app.use(require('less-middleware')({
dest: __dirname + '/public/stylesheets',
src: __dirname + '/public/stylesheets/less',
prefix: '/stylesheets',
compress: true,
debug: true,
force: true
}));
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', routes.index);
app.get('/users', user.list);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
When I run the server, I get the following:
GET / 200 190ms - 180b
source : /home/user/www/website.com/public/stylesheets/less/bootstrap.less
dest : /home/user/www/website.com/public/stylesheets/bootstrap.css
read : /home/user/www/website.com/public/stylesheets/less/bootstrap.less
render : /home/user/www/website.com/public/stylesheets/less/bootstrap.less
GET /stylesheets/bootstrap.css 200 565ms - 97.43kb
But the styles I have changed don't seem to take effect. Could someone tell me where I'm going wrong please?
Thanks
Used this instead from the less-middleware github page and it's working fine now.
var less = require('less-middleware');
app.configure(function(){
// ...
var bootstrapPath = path.join(__dirname, 'node_modules', 'bootstrap');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use('/img', express['static'](path.join(bootstrapPath, 'img')));
app.use(app.router);
app.use(less({
src : path.join(__dirname, 'public/stylesheets', 'less'),
paths : [path.join(bootstrapPath, 'less')],
dest : path.join(__dirname, 'public', 'stylesheets'),
prefix : '/stylesheets',
debug: true
}));
app.use(express['static'](path.join(__dirname, 'public')));
// ...
});

Categories