I recently start learning node.js, and I got problem. I use express to acces my public file, everything work fine except css files. I did some research on the topic, and use everthing i found, but it dose not work.
My folder structure
app.js
pub
index.html
style.css
This is my html:
<!DOCTYPE html>
<html >
<head>
<title> Curriculum Vitae </title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
...
</body>
</html>
And my app.js file:
var http = require('http');
var url = require('url');
var fs = require('fs');
var express = require('express')
var app = express();
var path = require('path');
app.use(express.static(path.join('pub', 'public')));
http.createServer(function (req, res) {
var q = url.parse(req.url, true);
var filename = "." + q.pathname;
fs.readFile(filename, function(err, data) {
if (err) {
res.writeHead(404, {'Content-Type': 'text/html'});
return res.end("404 Not Found");
}
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
return res.end();
});
}).listen(8080);
I think your problem is on this line :
app.use(express.static(path.join('pub', 'public')));
You are setting "/pub/public" as public folder, and you just need to set "/pub"
Can you try with something like this ?
app.use(express.static(__dirname + '/pub'));
Hope it helps.
Related
Using express-handlebars#5.2.0 and express#4.17.1 using node on windows and still cant get it to render in the body:
File Setup:
testapp.js
[views]
main.handlebars
[views][layouts]
test.handlebars
//testapp.js
const express = require('express');
const exhbr = require('express-handlebars');
const app = express();
const port = 3031;
app.engine('handlebars', exhbr({}));
app.use(express.static('public'));
app.set('view engine', 'handlebars');
app.get('/', (req, res) => {
res.render('main', { layout: 'test' });
});
app.listen(port, () => console.log(`App listening to port ${port}`));
<!--test.handlebars-->
<h1>Test</h1>
<!-- main.handlebars -->
<!DOCTYPE html>
<html lang="en">
<body>
{{{body}}}
</body>
</html>
Only <h1>Test</h1> is returned and hasn't been inserted into the body.
I have also tried the following just to make sure its looking in the right spots.
res.render('doesnt_exist');
Error: Failed to lookup view "doesnt_exist" in views directory "c:\wamp\www\rethinkdb_rest\views\"
res.render('main', { layout: "doesnt_exist" });
Error: ENOENT: no such file or directory, open 'c:\wamp\www\rethinkdb_rest\views\layouts\doesnt_exist.handlebars'
Looks like I was putting the main.handlebars and test.handlebars in the wrong directories.
File Setup should be:
testapp.js
[views]
test.handlebars
[views][layouts]
main.handlebars
And the render function in testapp.js should be:
//testapp.js
const express = require('express');
const exhbr = require('express-handlebars');
const app = express();
const port = 3031;
app.engine('handlebars', exhbr({}));
app.use(express.static('public'));
app.set('view engine', 'handlebars');
app.get('/', (req, res) => {
res.render('test', { layout: 'main' }); //<----fixed
});
app.listen(port, () => console.log(`App listening to port ${port}`));
I'm using deno, oak, and view_engine.
Here is my file structure:
server.ts
routes
user.ts
view
index.ejs
/user
index.ejs
On my server.js this code works as expected:
router
.get("/", (context: any) => {
context.render("view/index.ejs");
});
But, in my routes/user.ts, the following code does NOT work:
router
.get("user/", (ctx: any) => {
ctx.render("../view/user/index.ejs")
});
Inside render, I tried:
${Deno.cwd}"/../view/student/index.ejs"
"/../view/user/index.ejs"
and out of desperation:
"/view/user/index.ejs"
I'm sure there's a super easy, most obvious thing I'm missing here.
Here is workaround,
import { Application, send, Router } from "https://deno.land/x/oak/mod.ts";
import { viewEngine, engineFactory, adapterFactory, ViewConfig } from 'https://deno.land/x/view_engine/mod.ts';
const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();
const app = new Application();
app.use(viewEngine(oakAdapter, ejsEngine, {
viewRoot: "./view",
viewExt: ".ejs",
}));
const router = new Router();
app.use(router.routes());
app.use(router.allowedMethods());
router
.get('/', async (ctx, next) => {
ctx.render("index", { data: { name: "Nikhil" } });
});
await app.listen({ port: 8000 });
Inside the view folder i have index.ejs
Run files as,
deno run --allow-net --allow-read server.ts
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>EJS HOLA</h1>
Hobbies of <%=data.name%>
</body>
</html>
For more resource to add, you can look at view_engine
Have problem in my express app. Have some ejs templates, where css style file applied correctly. For example "localhost***/page", but when i go to "localhost***/page/secondpage" my ejs doesn't see style even if i apply it.
A little bit of code
app.js
app.use(express.static(path.join(__dirname, 'public')));
//some code
app.use('/', require('./routes/index'));
app.use('/events', require('./routes/events'));
some routes
const express = require('express');
const router = express.Router();
router.get('/', function (req, res, next) {
let query = *db query*;
res.locals.connection.query(query, function (error, results, fields) {
if (error) throw error;
res.render('index', { title: 'Events', data: results });
});
});
router.get('/:id', function (req, res) {
let query = *db query*;
res.locals.connection.query(query, function (error, results, fields) {
if (error) throw error;
res.render('singleevent', { title: 'Event', data: results });
});
});
Head of localhost***/events page and of next page localhost***/events/singleevent
<head>
<meta charset="UTF-8">
<title>
<%= title %>|Minsk Events</title>
<link rel="stylesheet" href="css/style.css">
</head>
There are my dirs
You asked for css file related to the html file.
So if html file is placed under events, then css file should be at:
/events/css/style.css
etc.
I'm writing a test with AVA and jsdom.
This works:
const rp = require('request-promise-native')
const jsdom = require('jsdom')
const {JSDOM} = jsdom
const url = 'http://localhost:8000'
rp(url).then((body) => {
const options = {
url: url,
resources: 'usable',
runScripts: 'dangerously',
}
let dom = new JSDOM(body, options)
dom.window.document.addEventListener('DOMContentLoaded', () => {
setImmediate(() => {
console.log(dom.serialize()) // works, prints <html><head></head><body><h1>Hello world!</h1></body></html>
})
})
})
An external script adds an h1 to the document body.
// external.js
document.addEventListener('DOMContentLoaded', () => {
document.write('<h1>Hello world!</h1>')
})
This is the markup at http://localhost:8000:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSDOM test</title>
<script src="external.js"></script>
</head>
<body>
</body>
</html>
When I try the same thing in a test:
const rp = require('request-promise-native')
const test = require('ava')
const jsdom = require('jsdom')
const {JSDOM} = jsdom
const url = 'http://localhost:8000'
test('Check custom CSS', t => {
return rp(url).then((body) => {
const options = {
url: url,
resources: 'usable',
runScripts: 'dangerously',
}
let dom = new JSDOM(body, options)
dom.window.document.addEventListener('DOMContentLoaded', () => {
setImmediate(() => {
console.log(dom.serialize()) // nothing gets printed
})
})
t.pass('passed')
})
})
console.log isn't called. I would expect <html><head></head><body><h1>Hello world!</h1></body></html> to get printed, rather than there being no output.
In summary, I want to:
Grab the response body from a url
Create a new jsdom object from it
Execute the scripts linked to in the response body's head tags
Let the scripts change the markup
Print the resulting modified markup
What is the best way of going about doing this?
Here's a minimum working example: https://github.com/cg433n/jsdom-test
I am trying by first express web app and I am using html to render my web pages and css to style my pages.
My directory structure is as follows
app.js
routes/
index.js
views/
index.html
public/
stylesheets/
style.css
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Devices</title>
<link ref="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body>
<h1>DEVICES</h1>
<table>
<tr><th>#</th><th>DID</th><th>DeviceName</th><th>OS</th><th>Version</th><th>Numbers</th></tr>
</table>
</body>
</html>
I have linked the static CSS file using link tag
app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'styles')));
app.use('/', routes);
app.use('/users', users);
please note app.set('view engine', 'jade'); is left as it is as if i give html i am getting error.
index.js
var express = require('express');
var path = require('path');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.sendFile(path.resolve(__dirname , '../views/index.html'));
});
module.exports = router;
My issue is the static css file placed in public/stylesheets is not applied to my html when rendered.When I execute http://localhost:3000/stylesheets/style.css, I able to see the contents of style.css is returned.
I am not quite sure what I am doing wrong
Thanks
Try changing how you set the path to your static assets.
app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/styles'));