4

I've recently built a quick one page app using express.js, and this is really my first js framework (actually, my first js project, so I'm really new to this). I've got a subscription to the new typography.com cloud fonts, and I'm having trouble locating the "fonts" folder that I place in the public folder. Is there a way I need to add the folder and specify a route?

Here's my app.js file:

/**
 * Module dependencies.
 */

var express = require('express'),
    routes = require('./routes'),
    user = require('./routes/user'),
    http = require('http'),
    path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
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('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'));
});

I haven't made any changes to the routes at all, so they are just default.

Spentacular
  • 235
  • 1
  • 3
  • 13

2 Answers2

12

Please use express.static setting:

app.use(express.static(process.cwd() + '/public'));

And place your fonts folder in that public folder.

moka
  • 22,846
  • 4
  • 51
  • 67
  • 1
    I added that to my app.js, and also replaced the line app.use(express.static(path.join(__dirname, 'public'))); (I tried both ways), but neither were able to locate the fonts folder in the public, or even if I put it in the stylesheets folder. – Spentacular Jul 03 '13 at 13:45
  • Do you use any proxying or accessing node process directly on port it listens? – moka Jul 03 '13 at 13:48
  • (Sorry, I don't quite understand). All I've done is add web: node app.js to my Procfile, so it could host on heroku. Other than that, I modified the default template and stylesheet, nothing else. – Spentacular Jul 03 '13 at 13:52
  • Could you please share CSS where you load `@font-face`? As well could you please share url and where you've uploaded locally fonts? – moka Jul 03 '13 at 14:03
  • That's the problem, I'm not able to use @font-face yet. The site is [here](http://spencerhamm.com), but it's referencing the main css file from typography.com, and it's technically called in "development" mode. To put the fonts in production, I have to move them to a folder on my server, which I don't know how to reference haha. – Spentacular Jul 03 '13 at 14:36
  • Here you go: http://pastebin.com/0LMqETW1 you need to replace file.woff with appropriate file based on what files you can get from typography.com. This list of `@font-face` is based on list of `@font-face`'s in link that is for 'development'. As well place all files in `public/fonts/` and it should work. – moka Jul 03 '13 at 15:48
  • I still can't even get the public/fonts folder to view locally :/ – Spentacular Jul 03 '13 at 16:18
  • Please share the node.js code of how you are setting up express and `static`. – moka Jul 03 '13 at 17:03
  • i updated the question with my file. Thanks for your help!! It's most likely a noob mistake, I really don't know what I'm doing with the JS frameworks, thought I would try something new. – Spentacular Jul 03 '13 at 18:34
  • Try changing this: `app.use(express.static('public'));` to this: `app.use(express.static(__dirname + '/public'));`. I can see that the code is a bit messy, you might refactor it later :) – moka Jul 03 '13 at 19:38
3

If you are using Heroku, you may want to look at this thread: Deploy Nodejs on Heroku fails serving static files located in subfolders

The guy explain that he struggled with "__dirname" until he specified the last version of NPM in his package.json:

"engines": {
    "node": "0.10.11",
    "npm": "1.2.25"
}

If that doesn't work, you might try:

// At the top of your web.js
process.env.PWD = process.cwd()

// Then
app.use(express.static(process.env.PWD + '/public'));

Instead of "__dirname"

Though, all that is probably useless if you already struggle localy.

Community
  • 1
  • 1
Aurélien Thieriot
  • 5,853
  • 2
  • 24
  • 25
  • man, I didn't declare that, but sadly I can't get it to work locally. It's almost at a point where I have to stop using node, or just use typekit instead :/ – Spentacular Jul 03 '13 at 15:03
  • You are experiencing not a node problem. Could you put any file in /fonts/ dir, and navigate directly in browser to that file? If that working, then public static files working perfectly, and you having problem with the way you trying to reference them. – moka Jul 03 '13 at 15:50