I'm just starting out with Express and I'm trying to figure out why, when I run my app, the Bootstrap font isn't rendered (it's showing the text in simple Times New Roman). I'm pretty sure I'm using the correct paths because when I open my index.html in my browser the font is rendered correctly. I also tried this with a Bootstrap navbar, and Bootstrap doesn't appear to work correctly when I try to run it through Node, but it works, again, when I view the HTML file in my browser independently. Changing the path of the Bootstrap directory to "/public/bootstrap..." causes it to render incorrectly both ways. How do I fix this?
index.html:
<html>
<head>
<title>X</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../public/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container">
<h1>Under Construction</h1>
<p>This website is under construction. Come back soon!</p>
</div>
</body>
</html>
web.js (my main app file):
var express = require('express')
var app = express()
app.set('view engine', 'ejs')
app.engine('html', require('ejs').renderFile)
app.get('/', function(req, res) {
res.render('index.html')
})
var port = process.env.PORT || 5000;
app.listen(port, function() {
console.log("Listening on " + port);
})
1) bootstrap and express have nothing to do with each other. Bootstrap runs on the client side completely, and express is a server middleware lib over node.js
2) Why are you serving bootstrap yourself? better use a CDN :
http://www.bootstrapcdn.com
http://hostedbootstrap.com/
3) if you insist on serving it yourself add a static directory so that express can serve static files (adding a static will also serve you when you try and serve js / css for yoursite but still prefer to serve bootstrap from a CDN.
app.use(express.static(path.join(__dirname, 'public')));
then no need to use public, just use the root path right to your css:
bootstrap/css/bootstrap.min.css
i.e.
<link href="../public/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen"
You need an actual static middleware. Express itself doesn't do anything by default.
app.use(express.static(__dirname + "/public"));
Don't use "public" in the paths in your HTML. That's the directory where the static assets live, but from the browser's perspective that's the root. And don't use relative paths, either
.
<link href="/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
Related
Website loads well css,js,imgs when I uploaded it to Github, but when I start it at local server it loads only html without css,js, and images.
Because it was not loading and I've read a bit in internet I decided to add "public" folder and pack everything inside. Also I added in server.js
app.use(express.static('public'));
Errors:
For CSS
Refused to apply style from 'http://localhost:3000/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
For imgs
Failed to load resource: the server responded with a status of 404 (Not Found)
JS functions doesn't work as well.
var express = require("express");
var app = express();
app.use(express.static('public'));
app.get("/", function(req,res){
res.sendFile(__dirname + "/index.html");
});
app.listen(3000, function(){
});
index.html
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<link rel="stylesheet" href="/styles.css">
<title>Workout Programmer</title>
<!-- <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght#700&display=swap" rel="stylesheet"> -->
</head>
I've tried to change path to ./ or ../ or without "/" or /public etc... nothing worked.
and at the bottom index.html
<script type="text/javascript" src="/app.js"></script>
img link:
<img src="/images/workoutman.png" alt="workoutman"
All files are stored in folder called "public" , and images are in public/images
OK so the I finally fixed the problem.
In file server.js I used
app.use(express.static(__dirname));
Other problem was styles.css actually wasn't in public folder as I thought. VisualStudio interface lost me a bit.
To find it out lead me this tip:
https://stackoverflow.com/a/60821720/14340165
I've an angular project that I can run without issues with ng serve. But I have to use node.js to have access to a DB.
I've created a file server.js:
var express = require('express');
var path = require('path');
var app = express();
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, './','index.html'));
});
var port = process.env.PORT || 4800;
app.listen(port, (req,res) => {
console.log(`RUNNING on port ${port}`);
});
And this index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngNode</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script>
</body>
</html>
When I run the server.js file I got the RUNNING on port 4800 but when I open the browser I got nothing but a blank page and no error. I tried to add a Hello World before the <app-root></app-root> and it's been displayed on the window but that's all.
I don't have any error on my console or on the browser so I don't know how to correct it.
Thank you
The problem is that your angular application is not running under 4800 but under 4200 (by default) so although you are not getting js errors you are probably getting 404 in the request tab.
You need to setup a proxy in your angular application (for development see https://juristr.com/blog/2016/11/configure-proxy-api-angular-cli/) or, in case you want to deliver the files from the express server, you need to compile the app, deploy the bundled version and configure your express to correctly deliver the files you need depending on the path.
Have difficulties linking my css files when using EJS.
Already looked into other answer but can't figure it out
This is the code I used reference for my css file.
EJS
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<header>
<% include header %>
</header>
</body>
</html>
The css file is in the same directory as the ejs files, the views directory. Can this cause any problems? The header is just another ejs file with some static html.
server:
const express = require("express");
const path = require('path');
const app = express();
app.set("views", path.resolve(__dirname, "views"));
app.set("view engine", "ejs");
app.use(express.static(__dirname + 'public'));
app.get('/', (req, res) => {
res.render("index");
})
app.listen(3000);
I Eventually want to move my css files in another folder but I was really wondering why this doens't work. Since the files are in the same folder I expected the relative path <link rel="stylesheet" href="index.css"> to work.
You specified that the static files (css, images, etc) are on the folder "public" :
app.use(express.static(__dirname + 'public'));
Read : http://expressjs.com/en/starter/static-files.html
Just move your css on this folder ;)
edit :
You can specify multiple static folder :
app.use("/public1", express.static(__dirname + "/public1"));
app.use("/public2", express.static(__dirname + "/public2"));
But you can add folders in your static folder :
/public1/css
/public1/lib
and use it like that in your ejs file :
<link rel="stylesheet" href="/public1/css/index.css">
The reason it doesn't work is simply because the folder containing your .ejs files is not actually being served. When rendering a view, express will locate your .ejs file locally on the server and read its contents, but it will not make it available over a HTTP connection.
You can verify this by trying to access the .ejs file directly via your browser.
I have a problem from client side with my path for a image or css, my image and css are in the same folder with index.html but index don't see it.
My folder structure:
index.html
image.jpeg
main.css
server.js
In index.html I ask the path for image and css so:
<img src="/image.jpeg">
<link rel="stylesheet" type="text/css" href="/main.css">
In server.js I ask the path for index so:
var app = require('express')();
app.get('/',function(req,res){
res.sendFile(__dirname + '/index.html');
});
Read Express docs before use it: serving static files in Express
You problem is that you have no way of serving static files.
Include this:
app.use(express.static(__dirname + '/public'));
And use the directory 'public' to store your files.
There is a question posted here that is similar to yours and which may provide further clarification. Basic webserver with node.js and express for serving html file and assets
I am trying to work on a sample web application using HTML5 boostrap express js angular and jquery. I have been fighting with the source tags to the js and css files I am trying to include and just cannot get them to work unless I use one that is hosted online. If any one has some spare time here is what my header code looks like
index.html
<script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.css"/>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
------------------------------------------------------------------------------------
app.js
var express = require('express');
var path = require('path');
var app = express();
//config
app.set('views', __dirname + '');
app.engine('html', require('ejs').renderFile);
//routes
app.get('/',function(req,res){
res.render('index.html')
});
//server
app.listen(1337,function(){
console.log('ready on port 1337');
})
This is a screenshot of of my file stucture
My server is running in the app.js located in the root folder. I have tried many variations of ../ and no slash and even the ~ to attempt to get this to operate. Thank you for your time in advance.
EDIT So while I have been messing around I realized if I open the index.html file without running it on my express server it works just fine. I have updated the code portion above to include my app.js.
SOLVED
A big thanks to suchit,dfsq,and Anubhav.
So since I was using express I needed to tell express how to properly path to my static src files "aka the js and css" inside of my app.js. So the answer I provide is only relevent if you are running your application on an express server. I will provide the code that was added to my app.js file and to my index.html file to come to a solution.
app.js
app.use(express.static(__dirname + '/bower_components'));
--------------------------------------------------
index.html
<script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/bootstrap/dist/css/bootstrap.css"/>
<script type="text/javascript" src="/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
Sincerely,
Fred K
Add app.use(express.static(__dirname + '/bower_components')); to app.js (it is a configuration) then link to the static files can be written as <script type="text/javascript" src="/bootstrap/dist/js/bootstrap.js"></script>
This assumes all your static files such as javascript and CSS files reside in your /bower_components folder.
The statement instructs the app to make /bower_components the root for all the static files.
app.js now looks like
var express = require('express');
var path = require('path');
var app = express();
//config
app.set('views', __dirname + '');
app.engine('html', require('ejs').renderFile);
app.use(express.static(__dirname + '/bower_components'));
//routes
app.get('/',function(req,res){
res.render('index.html')
});
//server
app.listen(1337,function(){
console.log('ready on port 1337');
})