im trying to reference socket.io in my login.html but it gives following error:
GET https://localhost:3000/socket.io.js net::ERR_ABORTED 404 (Not Found)
i think its because this code line in my login.html :
<script src='/client-dist/socket.io.js'></script>
i was trying other reference the script in other ways, but those doesnt work. it worked when my server.js was a http connection, but now i need a https connection.
its also dont possible to reference oder javascript refrences.
login.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>Login</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<section>
<h1>Login</h1>
<p>
username:<input id="username">
<br>
password:<input id="password">
<br>
</p>
<p>
<button onclick="window.location.href='/register'">Create Account</button>
</p>
<button id="submitButtonLogin" onclick="onClick()">submit</button>
</section>
<script src='/client-dist/socket.io.js'></script>
</body>
</html>
server.js:
const express= require('express')
const app= express();
//const path= require('path')
const https= require('https')
const io=require('socket.io')(https,{maxHttpsBufferSize:1e8})
const fs=require('fs')
const sslServer =https.createServer({
key: fs.readFileSync('cert/key.pem'),
cert: fs.readFileSync('cert/cert.pem')
},app)
const PORT=process.env.PORT || 3000
sslServer.listen(PORT, ()=>{
console.log(`listening to port ${PORT}`)
});sslServer.setTimeout(0)
app.get('/test', (req,res)=>{
res.sendStatus(200);
})
app.use(express.static(__dirname + '/public'))
app.use(require('./routes/posts'));
app.use(require('./routes/users'));
app.get('/',(req,res)=>{
res.sendFile(__dirname + '/login_register/login.html')
})
app.get('/register',(req,res)=>{
res.sendFile(__dirname + '/login_register/register.html')
})
app.get('/chatroom',(req,res)=>{
res.sendFile(__dirname + '/index.html')
})
my hierarchy:
chatapplication
-cert
cert.pem
csr.pem
key.pem
-login_register
login.html
register.html
-model
user.js
-node_modules
(included when setup)
-public
client.js
style.css
-routes
users.js
database.js
index.html
package-lock.json
package.json
secret.json
server.js
Related
I have a nodejs app with handlebars, and an nginx reverse proxy sitting on an ubuntu server. No matter what combination of app.use(express.static('public')) and linking stylesheets I use, I only get a 404 on the stylesheet. Here's my code:
const express = require('express')
const path = require('path');
const hbs = require('hbs');
const app = express();
app.set('view engine', 'hbs');
app.use(express.urlencoded({ extended: true }))
app.use(express.static('public'));
hbs.registerPartials(path.join(__dirname, 'views/partials'));
app.get('/', async (req, res) => {
if (req.query.prompt) {
prompt = req.query.prompt;
}
res.render('index', {
prompt: prompt,
});
})
app.listen(8080, () => console.log('Listening on port 8080.'))
And this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<img src="profile.jpg" alt="photo">
</body>
</html>
Any help would be much appreciated! And yes, there are a lot of potential duplicates to this question but nothing has helped me :/
I've tried all combinations of /public, /index.css, /public/index.css etc.
My file structure looks like this:
I found the fix, and it wasn't nodejs or handlebars--it was removing the following line in my server block:
try_files $uri $uri/ =404;
I'll leave this here for anyone who might find this useful.
I am creating a blog. Here I am using EditorJS as my blog-post editor. I am using nodejs, express and ejs. I can't see the EditorJS interface on my screen.
Here is my code.
code for app.js:
const express = require('express')
const app = express()
app.use(express.json())
app.set('view engine', 'ejs')
app.get('/', function(req, res) {
res.render('index.ejs')
})
app.listen(3000, function(){
console.log('Server is running on port 3000.')
})
code for index.ejs file:
<!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>Home | Editor JS</title>
</head>
<body>
<form action="/create-post" method="POST">
<label for="title">Title</label>
<input type="text" class="form-control" name="title" placeholder="Title" required>
<label for="content">Content</label>
<input type="text" id="editorjs" name="content" placeholder="Content" required>
<button type="submit">Create</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<script>
const editor = new EditorJS('editorjs')
</script>
</body>
</html>
How to make the EditorJS interface to be appeared in the ejs file?
An error message would be helpful.
Did you start your express server? Your app.js seems to be missing app.listen(8080);
Also your app.get() call is missing the closing bracket.
The following code is working for me:
const express = require('express')
const app = express()
app.use(express.json())
app.set('view engine', 'ejs')
app.get('/', function(req, res) {
res.render('index.ejs')
})
app.listen(8080);
Did you install express and ejs correctly?
npm i -s ejs express
Also the view engine seems to expect your ejs-files to be in the "views" folder. When you open the page in your browser, you should see an error message if it is still not working.
After several researches I found that, instead of using <input id="editorjs"> if I use <div id="editorjs"></div>, EditorJS interface shows up.
I have deployed my web app on Heroku, but Heroku's sever can't find my image file located in the static folder.
This is my app.js file....
const express=require("express");
const body=require("body-parser");
const http=require("http");
var path = require('path');
const app=express();
var temp="";
var des="";
var city_name="";
var src="";
var cn="";
var temp_max="";
var temp_min="";
app.use(express.static(path.join(__dirname, 'public')));
app.use(body.urlencoded({extended:true}));
app.set('views', path.join(__dirname, 'views'));
app.set("view engine","ejs");
app.get("/",(req,res)=>{
res.sendFile(__dirname+"/index.html");
})
app.post("/",(req,res)=>{
var city=req.body.city;
var country=req.body.country;
var date = new Date();
var api_key="4aa7299408553a0ec003e1dd56d73cf5";
var url="http://api.openweathermap.org/data/2.5/weather?units=metric&q="+ city +","+country+"&appid=";
http.get(url+api_key,(response)=>{
console.log(response.statusCode);
response.on("data",(data)=>{
var s=JSON.parse(data);
temp=s.main.temp;
city_name=city;
temp_max=s.main.temp_max;
temp_min=s.main.temp_min;
cn=country;
console.log(s);
des=s.weather[0].main;
src=des+".png";
console.log(src);
res.redirect("/weather");
})
})
})
app.get("/weather",(req,res)=>{
res.render("weather",{temp: temp,city: city_name,des: des,src: src,country: cn,temp_max: temp_max,temp_min: temp_min});
})
app.listen(process.env.PORT || 3000,()=>{
console.log("Port 3000");
})
My file structure....
|--public
|--images
|--css
|--views
|--weather.ejs
|--app.js
|--index.html
|--package.json
My weather.ejs file--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weahter</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/weather.css">
</head>
<body>
<div class="box">
<p><h2><%= city %>, <%= country %></h2></p>
<p><img src='images/<%= src %>' alts="Des"></p>
<p><h4><%= temp %>°C</h4></p>
<p class="temp"><span><%= temp_min %>°C</span> <span><%= temp_max %>°C</span></p>
<p><h3><%= des %></h3></p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
It gives the following error....
Failed to load resource: the server responded with a status of 404 (Not Found)
Its works fine on my localserver.
I am very much worried about this problem.
Please help me.
try this code
<p><img src='./public/images/<%= src %>' alts="Des"></p>
My folder structure is :
APP
-public
main.js
-views
index.html
index.js
I am trying to serve the static file to express server but its not working. The code for this in my index.js file is:
const express = require('express'),
app = express();
app.use(express.static(__dirname+'/public'));
I have also tried using path.join syntax
In my index.html file in the views folder , I am using the src tag as 'main.js'
<script type="text/javascript" src="main.js"></script>
I get the error net::ERR_FILE_NOT_FOUND.
I can also see that path src is referring to is wrong.
It is looking for main.js file in views directory instead of looking in public directory.
I have looked at other answers. I understand the syntax theoretically but am not able to find what I am doing wrong
Please point out the issue in my code. Thanks
Here is a working example:
index.js:
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;
app.use(express.static(__dirname + '/public'));
app.get('/', (req, res) => {
res.sendFile(path.resolve(__dirname, './views/index.html'));
});
app.listen(port, () => console.log(`server is listening on port ${port}`));
./public/main.js:
window.onload = function() {
console.log('onload');
};
./views/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
This is template
</body>
</html>
I have a nodejs app that acts as a remote control for Cmus music player. It uses a route for each function ie /play /next etc. This works fine, but with each button click I must call res.redirect("index.html") which obviously causes the page to reload. How can I perform this so that each button click is still able to send the command to the server but not reload the page?
server.js
var express = require('express');
var app = express();
var path = require('path');
var exec = require('child_process').exec;
var Commands = require('./commands.js');
var child;
app.use(express.static(__dirname + '/public'));
//Routes
app.get('/', function (req, res){
res.sendFile(path.join(__dirname + '/index.html'));
});
app.get('/play', function(req, res){
// console.log(req);
handleCommand(Commands.PAUSE);
res.redirect("index.html");
});
var server = app.listen(8080, function () {
console.log("Server online");
console.log(commands.NEXT);
});
function handleCommand(command) {
child = exec(command, function (error, stdout, stderr) {
// sys.print('Stdout ' + stdout);
// sys.print('Stderr ' + stderr);
if (error !== null) {
console.log('ERROR: ' + error);
}
})
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cmus Remote</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="client.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body id="body">
<form action="/play">
<input id="play" type="submit" value="⏯">
</form>
</table>
</body>
</html>
Instead of using a form to "submit" the button, you can attach event handlers to the button that will do a POST request without reloading the page. Then, you won't need to send any redirects at all. Since you have JQuery on the page, I'll give an example with JQuery.
Index.html
<button id="play">Play</button>
<!-- Other code -->
<!-- Script or external JS code -->
<script>
$('#play').click(function(){
$.post('/play');
});
</script>