i am a beginner in node.js
i have 3 files
cal.js
cal.html
style.css
neither my node.js is accessing css file nor html is accessing it .
earlier when i used internal css html file was perfect but node was not .
help me in refrence to this below code
const express= require("express");
const bodyparser =require("body-parser");
const app=express();
app.use(bodyparser.urlencoded({extended:true}))
app.get("/",function(req,res){
res.sendFile( __dirname+"/cal.html");
console.log(__dirname);
});
app.post("/",function(req,res)
{
var n1=Number(req.body.num1);
var n2=Number(req.body.num2);
var n=n1+n2;
res.write('<h1 class="result">sum is='+n+'</h1>');
res.send();
})
app.listen(2000,function()
{
console.log("server is running");
});
html file
<!DOCTYPE html>
<html>
<head>
<title>server </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form action="/" method="post">
<input type="text" name="num1" placeholder="number1">
<input type="text" name="num2" placeholder="number2">
<button type="submit" name="button">calculate</button>
</form>
<script src="cal.js"></script>
</body>
</html>
css file
body{
width: 100%;
height: 100%;font-family: cursive;
background-color: pink;
}
.result{
color: green;
background-color: yellow;
}
You need to use express.static middleware in order to serve static files.
I see in you code that the HTML file is located in __dirname, so this line should work for you:
app.use(express.static(__dirname));
try to add a dot in here
res.sendFile( __dirname+"./cal.html");
and in here
<link rel="stylesheet" type="text/css" href="./style.css">
This is the standard way of doing it:
CSS and JS file should be placed in folder in the following structure:
project_root
|
----index.js(or)app.js {node.js file}
|
----shared
|
----css
| |
| ----<CSS Files>
----js
|
----<JS Files>
in your express app file, after app.use(bodyparser.urlencoded({extended:true})), add
app.use(express.static('shared'))
Access necessary CSS and JS files from html by using /css/<filename> /js/filename
Example
Related
In my directory I have created a public folder in which I have put another folder named css in which is located styles.css. In another folder in my directory named views I have put my ejs file, with which I want to link styles.css like this:
<link rel="stylesheet" type="css/text" href="css/styles.css">
However this does not work.
I dont even get an error in my browsers console.
If you are using npm and Express, we need to set up a public folder for the static content (like your css file):
1) In your root folder, create a folder called 'public', then another one inside called 'css' and place your styles.ccs file in there.
2) In your JS application file (e.g. app.js), we need to have something like this:
//jshint esversion:6
const express = require('express');
const ejs = require("ejs");
const app = express();
app.set('view engine', 'ejs');
app.use(express.static("public"));
app.get('/', (req, res) => {
res.render('index', { foo: 'FOO' });
});
3) In your root folder, create a folder called 'views' and inside place the EJS file you want to render (e.g. index.ejs), stablishing the link like this: <link rel="stylesheet" href="/css/styles.css">:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/css/styles.css">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
In this case, you should be able to see the css code applied in the home route "/", rendering the index.ejs file. I hope it help you!
I am sorry, I am quite new in IT and I tried almost everything, I am frustrated that I am impossible to import correctly my .css file to my .html file. I looked on many other stackoverflow questions, for example: (1), (2), (3) and found no help. If I import my .css to html with <style></style> - it works, but with include file as "link href stylesheet" - it does not. I use Chrome browser Version 69.0.3497.100 (Official Build) (64-bit).
I tried to make html page with my openstreet map and that map has its own stylesheet included too. It not works because I can't include multiple css files to one html? I have .html file and .css file in the same folder. Why this: <link href='/styles.css' rel='stylesheet' /> is not working please?
My code(client.html):
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>The mapbox tutorial</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<link href='/styles.css' rel='stylesheet' />
</head>
<body>
<div>
<h1>MY new page</h1>
<div id="data">
Write me something: <input type="text" id="inputData">
<button id="myButRun">Send</button>
</div>
</div>
<div style="margin-left:10px; height: 500px; margin-top: 20px; width: 400px; " id='map'></div>
<script>
mapboxgl.accessToken = 'myPrivateKey';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10',
center: [42.10, 57.14],
zoom: 11
});
map.on('load', function () {
map.addLayer({
"id": "data-update",
"type": "line",
"source": {
"type": "geojson",
"data": "empty"
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#faff00",
"line-width": 8
}
});
});
</script>
</body>
</html>
My code(styles.css):
body { margin:0; padding:0; }
#map{
border-style: solid;
border-width: 5px;
}
The / when using /styles.css indicates that the file is located in the web-root of the website. The web-root is the actual main directory served by the web-server for a configured website. When there's no web-server running, there's no actual web-root, from which the file can be read and deliverd to the browser.
In this case, where no web-server exists, the file was accessed directly from the local file system and using <link href='styles.css' rel='stylesheet'> will correctly reference the CSS file, which is located in the same directory as the HTML file.
I have a html file called myfile.html that displays 'Hello World'. My css file called myfile.css is used to insert background image. My bootstrap files are used to insert a image in the form of a circle.
The HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<title>MY FILE</title>
<link rel="stylesheet" type="text/css" href="public\css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="public\myfile.css">
</head>
<body>
<h1>Hello World!!</h1>
<img src="public\pinky.jpg" class="img-circle">
</body>
</html>
My CSS file is as follows:
body {
background-image: url('fishy.jpg');
}
My node.js file called new.js is as follows:
const express = require('express')
const app = express()
app.use(express.static('public'))
app.get('/',function (req,res) {
console.log(__dirname)
res.sendFile(__dirname+"/myfile.html")
})
app.listen(3000, function() {
console.log('Example app listening on port 3000!')
})
My main folder is called Bootsstrap and it has the following contents:
Bootsstrap
-myfile.html
-public /*Folder*/
/*inside public folder*/
-myfile.css
-css
-js
-fonts
-fishy.jpg /*background image*/
-pinky.jpg /*circular image*/
I open Command Prompt from Bootsstrap folder and run
node new.js
I get the message as:
'Example app listening on port 3000!'
When I open Chrome Browser and type localhost:3000, I get only 'Hello World'.The images are not getting displayed. I get an Error 404.
What can I do in order to run my HTML file in server using node.js by including all my css and bootstrap files?
You must not use the public path in your html. Also, in URLs use always forward slashes. Backslashes are just for Windows directories.
<!DOCTYPE html> <html> <head> <title>MY FILE</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
</head> <body> <h1>Hello World!!</h1>
<img src="pinky.jpg" class="img-circle"> </body> </html>
replace
<link rel="stylesheet" type="text/css" href="public\css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="public\myfile.css">
by
<link rel="stylesheet" type="text/css" href="css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
If you want to serve static files, such as html files, css, images, you need to make them available for the public. In your existing setup, only myfile.html is available for the public. Since you use css and other files from your server, you need to make them available also. The best way to achieve is to create a public folder and let express to make all the files available in the public folder.
Add to node.js
app.use('/', express.static('public'));
and rename your myfile.html to index.html
and in your index.html file
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
For example, your node.js should look like something
const express = require('express');
const app = express();
app.use('/', express.static('public'));
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
For more info Serving static files in Express
Edit
Your folder structure should be. no need of bootstap folder
public //public folder
-index.html
-myfile.css
-css
-js
-fonts
-fishy.jpg
-pinky.jpg
I am using node.js to run a local website and am having trouble linking the css to html.
The html is:
<!DOCTYPE html>
<html>
<head>
<title> Name </title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="background">
<h1> My Website </h1>
<span style="float:right">
Google
</span>
</body>
and css is:
#background {
background-color: #0099FF;
}
I have not been able to view the effects of the css on the website and am not able to change the background color.
I have checked online resources and it seems as if the syntax is correct. The css file style.css is in the same directory as the html. The html is working on the local website but not the css.
update: i am adding the app.js file
var http = require('http'),
fs = require('fs');
fs.readFile('./header.html', function (err, html) {
if (err) {
throw err;
}
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(8080);
});
Your syntax looks correct. Definitely check the browser console to see if there is error with finding the css file. I would check to make sure that the css file is indeed named "style.css".
try doing class="background"
and then in css do .background instead of #background
Try putting this code at the line under your title tag
<base href="/">
This thread might help you more
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Literally Canvas</title>
<link href="css/literallycanvas.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="react-with-addons.min.js"></script>
<script src="underscore-min.js"></script>
<script src="js/literallycanvas-core.min.js"></script>
<script src="js/literallycanvas.js"></script>
</head>
<body>
<div class="literally"></div>
<form class="controls export">
<input type="submit" data-action="export-as-png" value="Export as PNG">
</form>
<script>
$(document).ready(function(){
//initial without jQuery
var lc = LC.init(
document.getElementsByClassName('literally')[0],{
imageURLPrefix:'img',
primaryColor:'#fff',
backgroundColor:'#ddd',
toolbarPosition:'top',
tools:
[
LC.tools.Pencil,
LC.tools.Eraser,
LC.tools.Line,
LC.tools.Rectangle,
LC.tools.Text,
LC.tools.Polygon
]
});
//export as png
$('.controls.export [data-action=export-as-png]').click(function(e) {
e.preventDefault();
window.open(lc.getImage().toDataURL());
});
});
</script>
</body>
</html>
I have download literallycanvas-0.4.11 and added the files under css/ and img/ to my project, as well as the appropriate file from js/.
I can see the initial is worked because I can see the primaryColor was changed but I can't find my tools.
I followed the literally canvas however it still something wrong.
Anybody can help me??
I changed imageURLPrefix option and it worked for me. Just write path to your img folder there.
var lc = LC.init(
document.getElementsByClassName('my-drawing')[0],
{
imageURLPrefix: 'path/to/your/img',
.....
.....
});