Hmm, ...can't figure this one out. My custom fonts aren't working in the css file. For some reason, the css file accepts the custom fonts only if they are placed in the system font folder. But, I want them in the project's "fonts" folder.
Project:
|-theProjectFolder
|-css
|-style.css
|-fonts
|-expansiva-bold.otf
|-views
|-index.hbs
index.hbs:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Site</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
.........
</body>
</html>
style.css:
/* Custom Fonts */
#font-face {
font-family: expansiva;
src: url("../fonts/expansiva-bold.otf"); }
/****************/
.line1 {
color: black;
text-align: center;
margin-top: 150px;
font-family: expansiva, Arial, sans-serif;
font-size: 56px;
}
So with this setup, all I get is the "Arial" font--no "expansiva". I looked around and found mention of converting the font to "web" font?? But, when I did that, there was no change either.
Your font name for the custom font should be in quotes, try:
font-family: 'expansiva';
If it's only loading when you give it a local path, it isn't properly on your server or your url is incorrect (yours looks fine though).
The problem was the "/fonts" folder was not reachable by the server. Since this is a Node/Express project, the solution was to add the fonts folder to Express (index.js):
const express = require('express');
const hbs = require('hbs');
const app = express();
hbs.registerPartials(__dirname + '/views/partials');
app.set('view engine', 'html');
app.engine('html', require('hbs').__express);
app.use('/css', express.static(__dirname + '/css'));
app.use('/img', express.static(__dirname + '/img'));
app.use('/fonts', express.static(__dirname + '/fonts')); // <--added
app.get('/', (req, res) => res.render('index'));
app.get('/about', (req, res) => res.render('about'));
app.get('/contact', (req, res) => res.render('contact'));
app.listen(3000, () => {
console.log('App listening at port 3000!')
});
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 try to make an HTML page with a video. I launch my application on windows 7. All application operates as expected except media. The media file layouts in the 'public' folder in my project. But it doesn't play. The browser console gives the error: "GET http://localhost:8000/1.webm 404 (Not Found)". How can I launch the video in my application?
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>
<body>
<video src="public/1.webm" controls>
</video>
</body>
</html>
index.js:
var express = require("express");
var path = require("path");
var app = express();
app.get("/", function(req, res) {
res.sendFile(__dirname + "/views/index.html");
});
app.use(express.static(path.join(__dirname, "public")));
app.listen(8000);
console.log("Server has started!");
I am setting up a web server with exprss.js and socket.io. I set up a static folder so I can link my stylesheets without having to send every single file. But I am getting this error
Refused to apply style from 'http://localhost:3000/public/styles/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
this is my app.js file
const express = require("express");
const app = express();
var server = require('http').Server(app);
var io=require('socket.io')(server);
app.use(express.static('public'));
app.get('/', function (req, res) {
res.sendFile(__dirname + '/public/views/index.html');
});
io.on('connection', function(socket){
socket.emit('chat message', {hello: 'world'});
socket.on('chat message', function (data){
console.log(data);
});
});
server.listen(3000);
the index.html page looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="/public/styles/index.css">
</head>
<body>
<p>yo</p>
</body>
</html>
the file structure is the following
|-public
|-styles
-index.css
|-views
-index.html
-app.js
I think there is something wrong with my server setup
This is my first time using node
You get this error usually when there is no CSS file under that link.
When you use app.use(express.static('public')); directly express serves everything under root endpoint.
So you can use <link type="text/css" rel="stylesheet" href="/styles/index.css">.
If you would like to use /public/xxx.css you can use
app.use('public', express.static('public'));
When you use static, the original folder is not included in the path url, try something like this :
<link type="text/css" rel="stylesheet" href="/styles/index.css">
I am trying to render HTML with res.sendFile using absolute path but it is sending encoded HTML in a pre tag so the response shows HTML unrendered in a pre tag.
Here is my express code
app.get('/', (req,res) =>{
res.sendFile(__dirname+'/a.html');
});
and here is my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>I am Html</h1>
</body>
</html>
and here is the result when I navigate to localhost:8800/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>I am Html</h1>
</body>
</html>
It prints the html as it is without rendering it.
You need to use res.render() to actually render the html.
I can't post a comment because I don't have enough reputation, but what I was going to say is that I ran your code on my system (OSX Mojave 10.14.6, Node v12.13.0, latest versions of Firefox and Chrome) with some additions to make it work (posted below), and didn't run into your problem. Perhaps you have some other code or middleware that you haven't posted. Also, you are correct that res.render is for templates.
const express = require('express');
const app = express();
const port = 3000;
const path = require('path');
app.get('/', (req, res) => {
res.sendFile(__dirname + '/a.html');
// better to use the path API, but both work
// res.sendFile(path.join(__dirname, 'a.html'));
});
app.listen(port, () => console.log(`Example app listening on port ${port}!`));
The HTML is the same. Folder structure is:
.
├── app.js
├── a.html
Could you post more details?
Working on frontend and backend using NodeJs for server side and ejs template for frontend. Came across a feature while using ejs scriplets to display data send from server while loading page.
Used <%console.log()%> over ejs, thought this log will be seen on inspect element logs, however got message over server terminal. How did this information is send over to server without any form submit or API call?
Server app.js:
/*jshint multistr: true, node: true, esversion: 6, undef: true, unused: true, varstmt: true*/
"use strict";
// NPM Modules
const express = require('express'),
path = require('path');
const app = express();
// Setup views directory, file type and public filder.
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', (req, res) => {
res.render('index', {message:'Welcome'});
});
const port = process.env.PORT || 3000;
console.log('server listening at http://127.0.0.1 over port: ', port);
app.listen(port);
EJS template index.ejs:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<!-- All these CSS files are in plublic directory, as we had made all the content of public directory available for anyone from app.js -->
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/app.css" />
<link rel="shortcut icon" href="logo.jpg" />
<title>Sign-Up/Login Form</title>
</head>
<body>
<%console.log(message)%>
<%=message%>
<%console.log("anything")%>
</body>
</html>
How can all the <%console.log()%> are send over server terminal and <%=message%> is displayed over browser. Even <%console.log("anything")%> is displayed over server terminal even though this has nothing to do with server. How ejs scriplets communicate with server and not browser?
Had anyone else tried this before or observed it.
Your question is about how ejs templates work. This is an answer for that question. I think you might also have something wonky going on with your express setup causing you problems.
EJS is a server-side rendering system. It's job is done before the html is sent to the client, so it has nothing to do with the browser.
The scriptlets inside <% %> run on the server to insert content into the template before sending to the client.
If you want to print something out on the browser console, don't put it in a scriptlet, just put it into a <script> tag, like this:
<script>
console.log("foo");
</script>
If you want the browser console to print something generated by the server, you could use ejs to put the value of message into what it generates:
<script>
console.log("<%=message%>");
</script>
The server will put the value of message into a console.log() statement that gets delivered to the browser.
This example prints "Wellcomes" to the browser console:
server:
const bodyParser = require('body-parser'),
express = require('express'),
path = require('path');
const app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', (req, res) => {
res.render('index', { message: 'Wellcomes' });
});
const port = process.env.PORT || 3000;
const listener = app.listen(port, function() {
console.log('platform listening on', listener.address().port);
});
index.ejs:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Sign-Up/Login Form</title>
</head>
<body>
<script>
console.log("<%=message %>");
</script>
</body>
</html>
If you show page source in your browser, you should see:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Sign-Up/Login Form</title>
</head>
<body>
<script>
console.log("Wellcomes");
</script>
</body>
</html>