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!");
Related
I am trying to include a partial on the page with my backend coming later. I want to use an event listener button. It dosent work. I am using express.ejs and node.js with vanilla js.
I am using this for my vanilla js
const button = document.getElementById('button')
button.addEventListener('click',()=>{
const hi = document.createElement(`<%-require('../views/partials/hi.ejs')%>`)
document.appendChild(hi)
})
this for my html
<!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>hi</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<button id="button">Im a button</button>
<script src="main.js" type="module"></script>
</body>
</html>
and this for my node
const express = require('express')
const app = express()
app.set('view engine','ejs')
app.use(express.static('public'))
app.get('/',(req,res)=>{
res.render('layout')
})
app.listen(5000,()=>{
console.log('server listening')
})
I get this error when i try to use the partial with the button
main.js:4 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('<%-require('../views/partials/hi.ejs')%>') is not a valid name.
at HTMLButtonElement.<anonymous> (http://localhost:5000/main.js:4:25)
this comes from client side....why and how to fix?
I have a bucket in s3 : http://www.sentencex.com.s3-website-us-east-1.amazonaws.com/
The root page is index.html.
Now I use vscode write a new html file, hello world from local.html,use AWS console upload to my bucket.
When Url route to:
http://www.sentencex.com.s3-website-us-east-1.amazonaws.com/hello%20world%20from%20local.html
it return the 'hello world from local' page from browser.
But When I use lambda to create a file called hello world from lambda.html.
This is My code in lambda:
const AWS = require('aws-sdk')
const s3 = new AWS.S3()
exports.handler = async (event) => {
let html = `
<!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>
</head>
<body>
<h1 class="sayHello">Hello</h1>
<script src="./app.js" type="module"></script>
</body>
</html>
`
let putHtmlParam = {
Body:html,
Metadata: {
'Content-Type': 'text/html'
},
Bucket:'www.sentencex.com',
Key:'hello world from lambda.html',
}
let putHtmlResult = await s3.putObject(putHtmlParam).promise()
return putHtmlResult
};
I can upload this hello world from lambda.html to my s3.
But when the url route to
http://www.sentencex.com.s3-website-us-east-1.amazonaws.com/hello%20world%20from%20lambda.html
It can not open the page in the browser directly.It has to download the page and read it from local.
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?
I'm trying to use nodejs to read the IP address and display on a html page, here is what I've done so far:
app.js
const express =require('express')
const app = express();
var os = require( 'os' );
var path = require('path')
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'))
})
var networkInterfaces = Object.values(os.networkInterfaces())
.reduce((r,a)=>{
r = r.concat(a)
return r;
}, [])
.filter(({family, address}) => {
return family.toLowerCase().indexOf('v4') >= 0 &&
address !== '127.0.0.1'
})
.map(({address}) => address);
var ipAddresses = networkInterfaces.join(', ')
console.log(ipAddresses);
app.get('/DHCP',(req,res)=>{
return networkInterfaces[1];
});
app.listen(1000)
and the index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<p id="DHCP" align="middle"> DHCP:</p>
</body>
</html>
I'm new to web dev world so I just don't get how can I do it !
thanks in advance !
You need to pick a template engine (e.g. pug), then call res.render() with an html template modified according your template engine's syntax.
use something like this:
<p id="DHCP" align="middle">{{DHCP:}}</p>
This works if you previously set your application to use HTML instead of any View Engine.
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!')
});