I have a folder called assets which have a styles.css and then I have index.html which I would want to reference styles.css but for some reason it can't.
My current solution is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My App</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>
And I have the node server running like this:
var webpack = require("webpack");
var config = require("./webpack.config.js");
var http = require('http');
var express = require('express');
var app = express();
var proxy = require('http-proxy-middleware');
var path = require('path');
const compiler = webpack(config);
app.use(require("webpack-dev-middleware")(compiler, {
noInfo: true,
publicPath: "/"
}));
app.use(require("webpack-hot-middleware")(compiler));
app.use('/auth', proxy('http://localhost:8081', {changeOrigin: true}));
app.use('/api', proxy('http://localhost:8081', {changeOrigin: true}));
app.get("*", function(req, res) {
res.sendFile(__dirname + '/index.html');
});
/**
* Anything in public can be accessed statically without
* this express router getting involved
*/
app.use(express.static(path.join(__dirname, 'assets'), {
dotfiles: 'ignore',
index: false
}));
var server = http.createServer(app);
server.listen(3000, function() {
console.log("express listening at localhost:3000");
});
This is not working for me it cannot find the css file, how can I make it so I can reference the css file from index.html. Also I have index.js on my src folder which is used as an entrance file for running the whole React App.
Add the route for styles.css before app.get("*",...)
app.get("/styles.css", function(req, res) {
res.sendFile(__dirname + '/styles.css');
});
Related
When running my app.js file
const express = require('express');
const path = require('path');
const app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'))
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '/index.html'));
});
const port = process.env.PORT || 5000;
app.listen(port, () => {
console.log(`Serving on port ${port}`)
})
this is my index.html file is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<h1> Testing CSS</h1>
</body>
</html>
then I can not observe the changes of CSS file on the page. But when I open the HTML file with live serever I can see the CSS changes why is this happening.
When I am running my app.js file css is not connecting. But when I open the HTML file with live server CSS file is connecting. What is the reason behind this ??
app.use(express.static(path.join(__dirname, 'public')));
include this in your app.js create a folder called public and put the style.css in your public directory.
your code would be
const express = require('express');
const path = require('path');
const app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'))
app.use(express.static(path.join(__dirname, 'public'))); //<-here
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '/index.html'));
});
const port = process.env.PORT || 5000;
app.listen(port, () => {
console.log(`Serving on port ${port}`)
})
I'm trying to include an icon as part of my website, currently my code looks like the following:
app.js
const http = require('http');
const fs = require('fs');
const express = require('express')
const path = require('path')
const hostname = '127.0.0.1';
const port = 3000;
const html_file = "./index.html";
var app = express()
app.use(express.static(path.join(__dirname, 'public')));
//app.use(express.static('public'));
console.log(path.join(__dirname, 'public'));
fs.readFile(html_file, function (err, html) {
if (err) {
throw err;
}
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
res.write(html);
res.end();
}).listen(port);
console.log(`Listening on http://${hostname}:${port}`)
});
While my html file looks like this:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<body>
<p>test text</p>
</body>
</html>
However, the icon is never loaded properly.
I can see that the request returns in the network inspection tab, and there are no errors from nodejs in the console, but no matter what it fails.
I've tried switching between adding and not including the /public/ in the link line too, as well as moving the HTML file to the public folder itself.
Any ideas?
You're starting a vanilla HTTP server that only serves your index.html file and nothing else.
I'd suggest moving index.html into the public folder and using app.listen() to start your Express app instead.
const express = require("express");
const path = require("path");
const app = express();
const port = 3000;
app.use(express.static(path.join(__dirname, "public")));
app.listen(port, () => {
console.log(`Listening on port ${port}`);
});
I highly recommend working through the Express Getting Started guide.
You should also use an absolute path to your icon in the HTML
<link rel="icon" type="image/x-icon" href="/favicon.ico">
I have question with express
server.js
const express = require('express')
const app = express()
const port = 8080
app.use(express.static('public'))
app.use('/css', express.static(__dirname + 'public/css'))
app.use('/js', express.static(__dirname + 'public/js'))
app.use('/img', express.static(__dirname + 'public/img'))
app.set('views', './views')
app.set('view engine', 'ejs')
app.get('/signin', (req, res) => {
res.render('signin')
})
app.listen(port, () => {
console.log('server is listening to port: 8080')
})
app.use(function(req, res, next) {
res.status(404);
// respond with html page
if (req.accepts('html')) {
res.end('404 - Not Found');
return;
}
// respond with json
if (req.accepts('json')) {
res.json({ error: 'Not found' });
return;
}
});
File structure
public
css
signin.css
img
js
views
signin.ejs
server.js
signin.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../public/css/signin.css">
</head>
<body>
<h1>works</h1>
</body>
</html>
signin.css
body{
color: yellow;
}
and the error is
http://localhost:8080/public/css/signin.css [HTTP/1.1 404 Not Found 4ms]
Can someone help me?
What is the error
I can identify two issues.
First is that the code just concatenates __dirname + 'public/css'. The __dirname does not include a trailing slash, so if your path is /home/foo, you'll get a path like /home/foopublic/css. Use path.join() instead.
Second, the HTML appears to refer to the CSS file relative to the location of the HTML on your disk. As there is already a handler for the path /css set which serves files from the css directory on your disk, the correct path would be /css/signin.css instead of ../public/css/signin.css.
So, on the node.js side:
const path = require('path')
app.use('/css', express.static(path.join(__dirname, 'public/css')))
app.use('/js', express.static(path.join(__dirname, 'public/js')))
app.use('/img', express.static(path.join(__dirname, 'public/img')))
Although you don't really even need these, as there app.use(express.static('public')) middleware already serves the files and directories from the public directory.
And the HTML:
<link rel="stylesheet" href="/css/signin.css">
I'm using the following node.js/express.js server,
index.js:
const express = require('express');
const path = require('path');
const app = express();
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(8000, function () {
console.log('Listening on port: 8000!');
});
and the following html file,
index.html:
<!doctype html>
<html>
<head>
<title>Will Alley</title>
</head>
<body>
<style type="text/css">
img {
width: 100%;
height: 100%;
}
</style>
<h2 id="myName">Will Alley</h2>
<img src="./DSC_1546_700_464.jpg" alt="an image.">
</body>
</html>
all my files (index.js, index.html, DSC_1546_700_464.jpg) are in the same directory.
when I start my server and navigate to "localhost:8000" all that is displayed is the heading, and the images alt text.
Any help is greatly appreciated.
You have only one route in express, the one for '/'.
Below are two additions, one that answers your specific question by adding app.use(express.static(__dirname)) which is dangerous. The safer way is to use something like app.use('/images',express.static(__dirname+'/images')) to serve just certain subdirectories where you put servable stuff.
const express = require('express');
const path = require('path');
const app = express();
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
// Static route for files in the current directory...
// Note that this serves all files relative to the given
// path, even ones you probably don't want.
app.use(express.static(__dirname));
// Note: you should really put these files in a subdirectory
// And use static like this:
app.use('/images', express.static(__dirname +'/images'));
app.listen(8000, function () {
console.log('Listening on port: 8000!');
});
I'm working on an app using the MEAN stack, and I'm having trouble getting my main index page to pick up my stylesheet. Running node server works fine, the index.html page is rendering, and there are no console errors. Hitting http://localhost:3000/public/css/app.css returns the CSS as expected. So the file is there and accessible, but the styles aren't being applied to the index page.
Any idea what's going on?
./server.js
var config = require('./server/config/environment');
var express = require('./server/config/express');
var app = express();
app.listen(config.port, function() {
console.log('Server is listening on port %d', config.port);
});
exports = module.exports = app;
./server/config/express.js
var express = require('express');
var path = require('path');
module.exports = function() {
var app = express();
app.set('view engine', 'ejs');
require('../server.routes.js')(app);
app.use("/public/css", express.static(path.resolve('public/css')));
app.get('/public/css/app.css', function(request, response) {
response.sendFile(path.resolve('public/css/app.css'));
});
return app;
};
./server/server.routes.js
module.exports = function(app) {
app.get('/', require('./server.controller').render);
};
./server/server.controller.js
module.exports.render = function(request, response) {
response.render('index');
};
./views/index.ejs
<head>
<base href="/">
<link rel="stylesheet" src="/public/css/app.css">
</head>
./public/css/app.css
body {
margin: 70px 20px 20px 20px;
}
Try this
./views/index.ejs
<head>
<base href="/">
<link rel="stylesheet" href="/css/app.css">
</head>
./server/config/express.js
var express = require('express');
var path = require('path');
module.exports = function() {
var app = express();
app.set('view engine', 'ejs');
require('../server.routes.js')(app);
app.use(express.static(path.resolve(__dirname, 'public')));
return app;
};
When you use express.static() you are registering that as a public folder, meaning the client doesn't need to actually know what the name of the folder is. Essentially what you were doing was calling
<head>
<base href="/">
<link rel="stylesheet" href="/public/css/public/css/app.css">
</head>
Usually people register a base folder and then put the css in the css/ subfolder and the js in the js/ subfolder
EDIT: #HydraHorn realized on his own that he was using <link src="..."> instead of <link href="...">. That said it still would not have worked without the changes to express.static(). I have made the changes above to not confuse future visitors