node.js - Loading static assets in Nodejs -
what correct approach loading static files. i'm trying use semantic ui. have followed basic steps here: http://semantic-ui.com/introduction/getting-started.html. have node installed, npm installed, ran gulp process , built files. have required files this:
link(rel='stylesheet', type='text/css', href='/semantic/dist/semantic.min.css') script(src='semantic/dist/semantic.min.js')
my project structure this:
server.js views/ index.jade semantic/ dist/ semantic.min.css semantic.min.js
i have checked in browser , there no console error files aren't listed resource. have checked server logs , there's no error.
the thing can think of, need set public directory serve static files like:
app.use(express.static(path.join(__dirname, 'public')));
edit have attempted this:
app.use(express.static('public'));
and have moved files public directory. loads because can navigate them in browser aren't being applied.
is there anyway require them semantic folder? them built , required same space.
edit
view:
<!doctype html> <html lang="en"> <head> <title>title <script src="js/jquery.min.js"></script> <link rel="stylesheet" href="css/semantic.min.css"> <script src="js/semantic.min.js"></script> </title> <body> <button class="ui button"> follow</button> </body> </head> </html>
serverjs:
var express = require('express'), ejs = require('ejs'), path = require('path'), app = express(); app.use(express.static(path.join(__dirname, 'public'))); app.set('view engine', 'ejs'); app.set('views', './views'); app.get('/', function(req, res) { res.render('index'); }); var server = app.listen(8080, function() { var host = server.address().address; var port = server.address().port; console.log('node listening @ http://' + host + ':' + port); });
add line in app.js file.
app.use(express.static(path.join(__dirname,'public')));
then create folder named public in project root directory , move css , js files folder. better way of organising things create folders named css , javascript inside public directory , place css , js files in these folders.
then in template file, include these adding :
link(rel='stylesheet', type='text/css', href='css/semantic.min.css') script(src='javascript/semantic.min.js')
Comments
Post a Comment