Since Twitter Bootstrap 2 is out, I wanted to integrate that into my Node.js project. Unfortunately, there's something wrong with the less compiler and I can't get it to work. I put all files into the public folder and set up a new project with express -c less newproj. and added the lines for less
less = require('less');
app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] }));
All Node tells me is:
Express server listening on port 3000 in development mode
undefined
On the client side I get a 500 (Internal Server Error) for the bootstrap.css file, which should be compiled by lessc.
lessc bootstrap.less
Works fine.
Anybody knows how to solve the issue?
For posterity, this has changed a lot in recent Express:
app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, 'public')));
// This is just boilerplate you should already have
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
Ok, here is what I have found for you.
First you need both the compiler and the static middleware. The compiler compiles your less and recompiles on changes, the static middleware does the actual serving of the css
app.use(express.compiler({ src : __dirname + '/public', enable: ['less']}));
app.use(express.static(__dirname + '/public'));
Second, for some reason when the compiler runs it is losing the current path information, so it can't find the includes. So I had to go through the bootstrap.css and add the path to each import.
#import "/public/stylesheets/reset.less";
This is clearly odd, I am going to dig into it further.
Edit: While odd, a deep look through the code shows me no simple way around it. A bit more searching found this pull request on the connect repo https://github.com/senchalabs/connect/pull/174 which offers a fix for this, but the devs don't seem to want it.
There are also some workarounds in that thread, but it seems the best idea is to absolute path your includes.
Related
I'm trying to make a virtual static path using express but there was some problem I can't deal with.
That's what I found in doc of Express:
// Serve static content for the app from the “public” directory
// in the application directory:
// GET /style.css etc
app.use(express.static(__dirname + '/public'));
// Mount the middleware at “/static” to serve static content only when
// their request path is prefixed with “/static”:
// GET /static/style.css etc.
app.use('/static', express.static(__dirname + '/public'));
Here is the directory structures:
disk
static
css
js
img
index.html
server.js
If I just try the code below, nothing go wrong. And I can find the same directory structures in Sources option in Chrome DevTools;
app.use(express.static(__dirname + '/dist'));
But when I try to make a virtual directory using code below, it went wrong.
app.use('/music', express.static(__dirname + '/dist'));
My site can not show correctly and console show errors of getting static files .That's what i found in Chrome DevTools:
errors,
directory structures
I thought the directory structures should like this "music/static/css".
Can anyone tell me what's wrong. Thx!
Stylus and CoffeeScript middleware automatically compile any Stylus and CoffeeScript code for you without having to restart your app, eg you can edit a .styl file and just refresh the page in your browser and your changes will be there. I find this to be very convenient while developing, but would that severely effect the end-user's page load time in production?
My Express setup is usually something like this (CoffeeScript):
app = express()
app.set 'views', __dirname + '/views'
app.set 'view engine', 'jade'
compile = (str, path) -> return stylus(str).set 'filename', path
app.use stylus.middleware {
src: __dirname + '/stylus',
dest: __dirname + '/assets/css',
compile: compile
}
app.use coffee {
src: __dirname + '/coffee',
dest: __dirname + '/assets/js',
encodeSrc: false
}
app.use express.static __dirname + '/assets'
It will definitely be slower than serving the pre-compiled files statically (if Stylus and CoffeeScript don't support caching which I don't know). The question is, whether this matters. And this depends on the intensity of the traffic your app receives.
In general, I would suggest to pre-compile your files and serve it statically. For the deployment, I would suggest to use something like Gulp.js and watch your files. With gulp your files can be automatically compiled on file changes which is most of the time better than compiling it when the files are requested.
I'm getting used to Express and various other node-related frameworks as I find it interesting and more lightweight than the ASP MVC world.. and one of the first things I'm trying to do is get SASS files automagically compiling into CSS files.
I've gotten some ways into it and installed node-sass and followed a few tutorials but I'm not quite getting the result I want. First of all, here is my directory structure.
app.js
static/
stylesheets/
images/
js/
sass/
index.sass
views/
index.jade
So my plan is fairly simple: when I visit views/index.jade in the browser, I want index.jade to render static/stylesheets/index.css - obviously, this doesn't exist at compile time, but we have the corresponding index.scss file inside of sass.
My set up currently is that /css/index.css will refer to __dirname/static/stylesheets. So, inside of my jade view, I have the following block:
block head
link(href='/css/index.css', rel='stylesheet')
The intention is that this link will refer to the compiled sass file. Here's the portion of app.js concerning the compilaton of sass and serving of static content:
// Enable SASS compilation
app.use(sass.middleware({
src: __dirname + '/sass',
dest: __dirname + '/static/stylesheets',
debug: true,
outputStyle: 'compressed'
}));
// Add static content
app.use('/js', express.static(__dirname + '/static/js'));
app.use('/img', express.static(__dirname + '/static/img'));
app.use('/css', express.static(__dirname + '/static/stylesheets'));
My issue is that what's actually happening is that SASS appears to be compiling the css just fine, but it's prepending everything into a /css/ folder (which doesn't exist) because of the /css route I've used above. Maybe the debug output will make more sense:
source : E:\project\sass\css\index.scss
dest : E:\project\static\stylesheets\css\index.css
read : E:\project\static\stylesheets\css\index.css
Obviously, this is not intended, and ends up 404ing as the browser thinks we are requesting css/index.css but the SASS file is being compiled into, effectively, css/css/index.css.
What should I do here? I assume I am making a glaring mistake but I can't see it as I am new to node/express.
I fixed this by changing the extension of my sass file to scss. That was the only issue. |: slightly annoying given that the package is named node-sass.
I have my code locally working well, but when I pull my code on my digitalocean web server, my code doesn't work like locally.
app.configure(function(){
app.use(express.bodyParser());
app.use(express.static(__dirname + '/dynamicApp'));
app.use(express.static(__dirname + '/staticApp'));
});
When I try to access content in /staticApp it works locally, but it doesn't on my digital ocean server. Content in the /dynamicApp work properly.
Both environment have the same node.js version (0.10.17), I have loaded with Vim my server files, and they are the same. I have done ls in all folders, and the structure is the same. I tried in incognito mode in Chrome to see if it were caching issues, and the issue is still there.
Anyone has a clue why this could happen ?
try setting the paths that serve the static content like:
app.configure(function(){
app.use(express.bodyParser());
app.use('/dynamicApp', express.static(__dirname + '/dynamicApp'));
app.use('/staticApp', express.static(__dirname + '/staticApp'));
});
express 4.x , like this:
app.use('/public', express.static(__dirname+'/public'));
app.use('/data', express.static(__dirname+'/data'));
I have two Less files in the public/stylesheets. I am using Express.js to serve them as CSS files.
The first file, one.less looks like this:
#import "another.less";
h1 {
color: red;
}
The second file, another.less looks like this:
p {
color: red;
}
When I try to load the page, the server quits with the error:
file 'another.less' wasn't found.
I have also tried an absolute path, but it didn't work.
This is my Express.js configuration:
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] }))
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
You should be using connect-less for this now.
The original less compiler you're using above is a part of connect, actually, and if you check out the current issue list, you'll see that TJ opted to not support less any further in connect due to the compilers being too different (a case of "can't make everyone happy") :
https://github.com/senchalabs/connect/pull/174
You can look up connect-less here :
https://github.com/MartinodF/connect-less
I'll put the steps for install here, but understand they could become dated (check the github page if this doesn't work, and let me know and I'll sync up):
Use NPM to install connect-less
npm install connect-less
Then load it in your app, specifying the source (and optionally destination) directory
app.use(require('connect-less')({ src: __dirname + '/public/' }));
This worked flawlessly for me on an armv7/Trimslice linux box with expressjs 2.5.2 and node 6.6
Edit:
'#import "/public/stylesheets/two";'
Original proposal did not work.