I was trying to implement a simple player with a web server on a VM when I stumbled across this issue.
server.js
const express = require('express');
var app = express();
var path = __dirname + '/views/' ;
app.get("/",function(req,res,next){
res.sendFile(path + "index.html");
});
app.listen(1823);
console.log('listening');
index.html
<!DOCTYPE html>
<html>
<head>
<title>Alpha</title>
</head>
<body>
<iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/N0dbGGvsjf8?enablejsapi=1&origin=http://192.168.150.129">
</iframe>
</body>
</html>
Accessing the site locally with http://localhost:1823 works just fine.
However, accessing the site from the local network such as http://192.168.150.129:1823 the iframe(?) stops working.
Screenshot
Same video works on JSFiddle.
NB: This only happens on certain videos.
e.g. with this iframe
<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/PfYnvDL0Qcw?enablejsapi=1&origin=http://192.168.150.129">
</iframe>
Both localhost and IP work the same.
All seems to point towards Node doing something?
Why some videos work and others do not?
Related
When I open the html file from the browser it consumes the following:
But when I send the same file from an Express server, the memory consumption is noticeably higher:
It is true that this is not a huge memory consumption, but it is a VERY noticeable difference, Why is this happening?, is Express sending the client something that I do not know (headers, cookies, something?)?
From the server I just have a single JavaScript file with a single route that sends the html file using Express's sendFile function:
const express = require('express');
const { join } = require('path');
const server = express();
server.get('/', (_, res) => {
res.sendFile(join(__dirname, 'render.html'));
});
server.listen(3000, () => {
console.log('Server is running in port 3000');
});
whereas the HTML file you send to the client simply contains the following:
<!DOCTYPE html>
<html lang="es">
<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>
<header>
<h1>This is Header</h1>
</header>
<main>
<section>
<h1>Section 1</h1>
</section>
<section>
<h1>Section 2</h1>
</section>
</main>
<footer>
<h2>This is Footer</h2>
</footer>
</body>
</html>
there is nothing else.
I tried it from Google Chrome and Edge, I hope you can help me understand c:
They were neither HTTP headers, nor cookies ... much less the server, the problem was the extensions for the browser !!!
Apparently when I open the HTML file locally (using the 'File:' protocol) the extensions were not running.
This is interesting for me, I don't know how the browser extensions work and their life cycle, but apparently the extensions share the processes and the memory in the current tab, that is, they share the process and the memory with the application that is being currently running, it wasn't my memory consuming application, it was browser extensions processes.
I have an incredibly basic node.js server test app running on port 3000 in VSCode. The server appears to work via node on localhost or deployed to Azure, and hosts an index.html file. I have clients happy to talk to it.
/* Server.js */
const express = require('express');
const app = express();
app.use(express.json());
app.get("/", function(request, response){
response.sendFile(__dirname + "/index.html");
});
app.post("/", function(request, result){
console.log(request.body["itema"] + " " + request.body["itemb"]);
result.send("Pong!!");
});
app.listen(3000, function(){
console.log("Server started on port 3000");
});
<!-- Index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Simple App</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<h1>Test!</h1>
</body>
</html>
/*style.css*/
h1 {
color: tomato;
}
Azure Configuration Settings
The index.html links to a css file which doesn't appear to be linked when deployed. I've tried deploying the app to azurewebsites.net through VSCode, however I'm seeing the same results. Only index.html is present in the sources view. I get an error claiming it can't render the source it didn't find.
"Refused to apply style from https://<appname>.azurewebsites.net/style.css because its MIME
type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is
enabled."
If I view the advanced page (.scm.azurewebsites.net), again I can see only index.html.
Index only
But .scm.azurewebsites.net/wwwroot/ shows me the css file has been uploaded correctly.
Index and linked sources
I'm convinced it'll be a simple solution to someone and that the PATH variables will need to be set...somehow... but I've hit a brick wall and my Google-Fu has finally been exhausted.
Thanks!
Adding the following to server.js resolved the issue.
app.use(express.static("./"));
This is further explained here and is required in express to serve static files.
https://expressjs.com/en/starter/static-files.html
I am currently studying node.js and pretty new still so I apologize in advance for probably having an inefficient or terribly formatted first question. I am uploading a one-page test to figure out how to use A2's node.js service.
So far I have followed the A2 tutorial "How to create a Node.js application with cPanel using Node.js Selector" (https://www.a2hosting.com/kb/cpanel/cpanel-software/create-application-with-nodejs-selector) and this tutorial on syncing git repositories (https://medium.com/#pampas93/host-your-node-js-app-on-shared-hosting-go-beyond-localhost-73ab923e6691) and I have been able to get everything working except the main page
(Located in dirname/repositories/test/views/home-visitor.ejs)
will not read the CSS file I have uploaded
(Located in: dirname/repositories/test/public/main.css)
and some of the images do not load. No file name typos or forward slash "/" syntax inconsistencies, all images share the same folder path.
(Located in: dirname/repositories/test/public/images)
So the node.js app shows up as plain HTML only. I have uploaded the exact same app/git repository to Heroku and the CSS is read and all images show up, so I am trying to figure out what pathing issues I am having when uploading specifically to A2's hosting service.
When I check 'inspect' on the browser for the non-working app page, I get these console messages:
"Refused to apply style from 'http://domainname.com/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
Failed to load resource: the server responded with a staus of 404 () nonWorkingImageExample.png:1
Failed to load resource: the server responded with a staus of 404 () anotherNonWorkingImageExample.png:1
http://domainname.com/test/main.css sends to a 404 page
app.js:
const express = require("express")
const app = express()
let port = process.env.PORT
if (port == null || port == "") {
port = 3000
}
app.use(express.static("/public/"))
app.set("views", "views")
app.set("view engine", "ejs")
app.get("/test", function (req, res) {
res.render("home-visitor")
})
app.listen(3000)
The page I am testing: home-visitor.ejs:
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<header>
<div class="forMobile mobileHeader">
<div class="mobileLogo">
<a href="#"><img src="images/workingImageExample.png" alt="Image Description">
</a>
</div>
</div>
</header>
<div class="forDesktop centerContent tempMssg">"Lorem flexitarian salvia offal umami. Sartorial swag drinking portland cray. Godard jianbing retro thundercats hella tilde. "
<br><br>
<a href="#" target="_blank" rel="noopener noreferrer">
<img src="images/nonWorkingImageExample.png" alt="Twitter Logo Link" width="35px" height="35">
</a>
</div>
<div class="forMobile mobileUpperBG">
<img src="images/anotherNonWorkingImageExample.png" alt="upper left bg image">
</div>
</html>
I am hoping someone familiar with hosting node.js apps on A2 can help, and thank you for the time reading this question regardless.
Full credit for this solution goes to VictoryFlame's video
https://www.youtube.com/watch?v=BAD5JyOymRg.
I ended up editing the way app.js pathed my public folder and updated how I linked the CSS and image files in my .ejs file:
app.js:
const express = require("express")
const app = express()
const path = require("path")
app.set("views", path.join(__dirname, "views"))
app.set("view engine", "ejs")
app.use("/test1/static", express.static("public/"))
app.get("/test1", function (req, res) {
res.render("home-visitor")
})
app.listen()
I re-formatted the style link to the CSS page and used this pathing syntax for images:
home-visitor.ejs:
<link rel="stylesheet" href="https://domainname.com/test1/static/home.css">
<a href="#" target="_blank" rel="noopener noreferrer">
<img src="/test1/static/images/imageWorksNow.png" alt="Twitter Logo Link" width="35px" height="35"></a>
Now everything is properly served/linked and showing up. I hope this helps someone else some day!
I am developing an E - Commerce website in React and Node.js. I am facing two problems described below.
I have two different master .html files for admin side and front end side. Hence I am using builtin React admin template in which index.html is loading on project start. My problem is how can I load another master .html for front end design?
I want to use Node.js as the back end. Hence I can not integrate node.js with React front or admin side which will run if the React application runs.
Any suggestions or solution steps will be highly appreciated.
Here's a very basic concept of the first idea:
const AdminIndexPage = children => (<section className="AdminIndexPage">{children}</section>)
const PublicIndexPage = children => (<section className="PublicIndexPage">{children}</section>
const App = props => {
if(props.indexPageToShow === 'admin'){
return <AdminIndexPage {...props} />
}else{
return <PublicIndexPage {...props} />
}
}
Here's a very basic concept of the second idea:
index.html
<html>
<head>
<script src="index.js"></script>
</head>
<body>
<div id="AdminPageIndex"></div>
<div id="PublicPageIndex"></div>
</body>
</html>
index.js
import {AdminPageIndex, PublicPageIndex} from './pages'
ReactDOM.render(AdminPageIndex, document.getElementById('AdminPageIndex'))
ReactDOM.render(PublicPageIndex, document.getElementById('PublicPageIndex'))
In my express app, I am keeping the below config:
var express = require("express");
var path = require("path");
var jsonServer = require("json-server");
var app = express( );
app.use(express.static('public'));
app.get("/", function( req, res ) {
res.sendFile( express.static( path.join(__dirname, "/public/index.html" ) ) );
});
app.use('/api', jsonServer.router('./db.json'));
app.listen( 3000 );
All this is works fine. the problem is, I am not able to add the jquery from node_modules. here is my HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Promise Defined</title>
<script src="node_modules/jquery/dist/jquery.js" type="text/javascript"></script> //not working sibling folder of public
<link rel="stylesheet" href="styles/app.css"> //works fine. inside public folder
</head>
<body>
<h1>New Title</h1>
</body>
</html>
What is the correct way to fix this? or how to handle this kind of scenario?
Thanks in advance.
node.js does not serve any files by default (unlike some other web servers). So, if you want node_modules/jquery/dist/jquery.js to work, then you have to either make sure that your express.static() line of code will include that file or you have to define a route specifically for that file. Also, it is sometimes dangerous to use a relative path with no leading / because that makes it relative to the path of your page which is generally not necessary and can make things difficult if you want to serve the same file in lots of different pages on your site.
For example, you could do this in the web page:
<script src="/jquery.js" type="text/javascript"></script>
And, this:
app.get("/jquery.js", function(req, res) {
res.sendFile(path.join(__dirname, "node_modules/jquery/dist/jquery.js"));
});
Personally, I would probably move jquery.js to a public/scripts directory on my server so I'm not serving anything out of the node_modules directory, so all my publicly served files are centralized in one place so it's entirely clear what can be served to a client and what cannot and so I could design one or two express.static() statements to serve all my public files.