So I've built a site in my directory and it can call all the stylesheets I made up just fine but when I create a local host it posts the html without any of the stylesheet. So the node would look like this
app.listen(PORT, function() {
console.log("App listening on PORT " + PORT);
});
And my html like this
<head><link href="custome.css" rel="stylesheet"></head>
<body> /snip </body>
So when ever I open up the local host at PORT it's blank.
You should serve static files. You should give more detail about the issue.
If you're using something like express.js, you can do something like this;
const fs = require('fs');
app.get('/custome.css', function (req, res) {
res.send(fs.readFileSync(__dirname+'/custome.css'));
});
Related
I am learning to use ejs, express, node js. I am having probling my style sheet to my header here is my code and here is a . I am using header and footer as include. Here is my
My app.js-
const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const app = express();
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(express.static("public"));
app.get("/", function(req, res) {
res.render("home");
});
app.listen(3000, function() {
console.log("Server started on port 3000");
});
2 things to note here
style.css is an external css file. So you dont need style tags inside that file. It should only contain the css.
In your express app, you have to mention the public directory from which you are serving the static files. Like css/js/image
it can be done by
app.use(express.static(__dirname + '/public'));
assuming you put the css files in public folder from in your app root. now you have to refer to the css files in your tamplate files, like
<link href="/css/style.css" rel="stylesheet" type="text/css">
Here i assume you have put the css file in css folder inside your public folder.
So folder structure would be
.
./app.js
./public
/css
/style.css
close head tag appropriately
My dir looks like that :
|-project
-gulpfile.js
|-build
-index.html
|-js
-app.min.js
-vendors.min.js
|-styles
-all.css
-vendors.min.css
I inject the css file with:
gulp.task('index',function () {
return gulp.src('src/index.html')
.pipe(inject(gulp.src(['http://localhost:5000/styles/all.css'], {read: false})))
.pipe(gulp.dest('build'))
.pipe(livereload());
})
I set up a local server with Node.js, when I do the request , the HTML file loads up, but the .css file doesn't connect for some reason.
I use this task for setting the server :
gulp.task('connect', function() {
connect.server({
root: 'build',
livereload: true,
port: 5000
});
});
You can use express frame work to achieve this
Var express=require (express);
var app=express();
// Now here you can attach static files
app.use("../example.css",static("/..example"));
Hope it will work.
In order to serve up static files such as CSS, JS, or assets you will need to add them to your index.html, and your server will be responsible for serving up your assets. Gulp is a task runner, not a server, so you will need to set up a simple HTTP server to serve up your assets. You can certainty build an HTTP server with vanilla Nodejs, but the easiest way to do this is with Express. Your Express server
might look something like this:
const express = require('express');
const app = express();
// serve static files in public/build directory
app.use(express.static('./build'));
// start the server on port 3000
const server = app.listen(3000, function() {
console.log('Server started on http://localhost:3000');
});
Then in your index.html be sure to link your CSS files with the link tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple HTTP Server</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>Simple HTTP Server</h1>
</body>
</html>
To everyone that may encounter my problem,that would be the solution.
.pipe(inject(gulp.src(['build/styles/all.css'], {read: false}), {ignorePath: 'build'} ))
I am having trouble with serving a css file to the individual blog posts in the blog portion of my website.
So the way it works:
Go to /blog- you get the blog page and that works fine.
But when I am trying to get to, for example, /blog/post1 I am getting an error
http://localhost:4000/blog/static/css/style.css
I'd appreciate the help because I'm pretty new to express and routing files around and around. Cheers.
My file structure looks like this
blog
/node_modules
/src
/mock
/public
/css
style.css
/templates
/partials
_head.jade
_nav.jade
blog.jade
index.jade
layout.jade
post.jade
app.js
So the way it works:
Go to /blog- you get the blog page and that works fine.
But when I am trying to get to, for example, /blog/post1 I am getting an error
http://localhost:4000/blog/static/css/style.css
Here is what my respective files look like, maybe I'm missing something:
app.js
"use strict";
var express = require("express"),
posts = require("./mock/posts.json");
var postsLists = Object.keys(posts).map(function(value){
return posts[value]
});
var app = express();
app.use("/static", express.static(__dirname + "/public"))
app.set("view engine", "jade");
app.set("views", __dirname + "/templates");
app.get("/", function(req, res){
res.render("index");
});
app.get("/blog/:title?", function(req, res){
var title = req.params.title;
if (title === undefined) {
res.status(503);
res.render("blog", {posts: postsLists});
} else {
var post = posts[title] || {};
res.render("post", {post: post} );
}
});
app.get("/about", function(req, res){
res.send("<h1>About Page</h1>");
})
app.get("/projects", function(req, res){
res.send("<h1>Projects Page</h1>")
})
app.listen(4000, function(){
console.log("Frontend server is running on port 4000.")
});
_head.jade
head
meta(charset="UTF-8")
link(rel="stylesheet", href="static/css/style.css")
layout.jade
doctype html
html(lang="en")
include ./partials/_head.jade
body
block content
blog.jade
extends ./layout
block content
section(id="postHolder")
for post in posts
div.post
h2 #{post.title}
p #{post.body}
a(href="/blog/" + post.title)
button Read More
post.jade
extends ./layout.jade
block content
section
div.post
h2 #{post.title}
p #{post.body}
p This is the actual post page itself.
I guess doing this will get you there -
head
meta(charset="UTF-8")
link(rel="stylesheet", href="/css/style.css")
Okay so I want to draw your attention to my _head.jade file:
head
meta(charset="UTF-8")
link(rel="stylesheet", href="/static/css/style.css")
I needed to make a reference to the absolute path and add the "/" in front of "static"
It used to be static/css/style.css and now it's
/static/css/style.css I'm pretty new to this and I don't know if I explained the reference to the absolute path correctly.
This is how i construct it:
var fs = require("fs");
var jsdom = require("jsdom");
var htmlSource = fs.readFileSync("./test.html", "utf8");
var doc = jsdom.jsdom(htmlSource, {
features: {
FetchExternalResources : ['script'],
ProcessExternalResources : ['script'],
MutationEvents : '2.0'
},
parsingMode: "auto",
created: function (error, window) {
console.log(window.b); // always undefined
}
});
jsdom.jQueryify(doc.defaultView, 'https://code.jquery.com/jquery-2.1.3.min.js', function() {
console.log( doc.defaultView.b ); // undefined with local jquery in html
});
the html:
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<script src="./js/lib/vendor/jquery.js"></script>
<!-- <script src="http://code.jquery.com/jquery.js"></script> -->
<script type="text/javascript">
var a = $("body"); // script crashes here
var b = "b";
</script>
</body>
</html>
As soon as i replace the jquery path in the html with a http source it works. The local path is perfectly relative to the working dir of the shell / actual node script. To be honest i don't even know why i need jQueryify, but without it the window never has jQuery and even with it, it still needs the http source inside the html document.
You're not telling jsdom where the base of your website lies. It has no idea how to resolve the (relative) path you give it (and tries to resolve from the default about:blank, which just doesn't work). This also the reason why it works with an absolute (http) URL, it doesn't need to know where to resolve from since it's absolute.
You'll need to provide the url option in your initialization to give it the base url (which should look like file:///path/to/your/file).
jQuerify just inserts a script tag with the path you give it - when you get the reference in the html working, you don't need it.
I found out. I'll mark Sebmasters answer as accepted because it solved one of two problems. The other cause was that I didn't properly wait for the load event, thus the code beyond the external scripts wasn't parsed yet.
What i needed to do was after the jsdom() call add a load listener to doc.defaultView.
The reason it worked when using jQuerify was simply because it created enough of a timeout for the embedded script to load.
I had the same issue when full relative path of the jquery library to the jQueryify function. and I solved this problem by providing the full path instead.
const jsdom = require('node-jsdom')
const jqueryPath = __dirname + '/node_modules/jquery/dist/jquery.js'
window = jsdom.jsdom().parentWindow
jsdom.jQueryify(window, jqueryPath, function() {
window.$('body').append('<div class="testing">Hello World, It works')
console.log(window.$('.testing').text())
})
I created an application with signalR references in visual studio.
Created a hub. When running application on IIS Express, everything works
fine. When I transfer it to IIS8, in firebug I see that URL's of signalR are wrong,
for instance:
http://localhost/signalr/negotiate?connectionData=......
The problem that there is a missing site name, should be:
http://localhost/MYSITE/signalr/negotiate?connectionData=......
This is the script I am using to init connection:
<script type="text/javascript">
var proxy;
$(function () {
var connection = $.hubConnection();
proxy = connection.createHubProxy('chatHub');
proxy.on('newMessage', onNewMessage);
connection.start();
$('#send').click(onSend);
});
function onNewMessage(message) {
$('#messages').append('<li>' + $('#message').val() + '</li>');
}
function onSend() {
proxy.invoke('newMessage', $().val());
}
</script>
I tried to send connection to $.hubConnection(), but then site name is getting doubled:
http://localhost/MYSITE/MYSITE/signalr/negotiate?connectionData=......
Use a tilde to refer to the application root directory when including scripts/other resources. I have a similar setup and this works for me in development and production environments:
<script src="~/Scripts/jquery.signalR-1.1.2.js" type="text/javascript"></script>
<script src="~/signalr/hubs" type="text/javascript"></script>