I am trying to dis displayt a simple variable in the browser using ejs.
the server.js file
const express = require('express');
const mongoose = require('mongoose');
const app = express();
const ejs = require('ejs');
app.set('view engine', 'ejs');
mongoose.connect('mongodb+srv://<username>:<password>#cluster0.asnad.mongodb.net/?retryWrites=true&w=majority');
app.get('/',(req, res) => {
let name = 'bl;ah';
res.render('index', {
userName: name
});
})
app.listen(4000, function() {
console.log('server is running');
})
the index.ejs file is in a directory called views in the home directory mongo-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.1">
<title>Document</title>
</head>
<body>
<h1>
<%= userName %> here
</h1>
</body>
</html>
The command to run the whole thing is,
nodemon server.js
Previously I installed Express and Nodemon.
I am following Marina Kim's tutorial from youtube https://www.youtube.com/watch?v=yH593K9fYvE
I don't know why this variable is not displaying.
Any help would be greatly appreciated.
Thanks,
Related
I'm using EJS for the first and I'm a bit confused. What's happening is that I have a list.ejs file created inside my views file. And a index.html outside I'm using a else if statement to do the logical thinking to the render my EJS file answer but when I call the res.render if I have the index.html, it displays it instead of my list.EJS, there are no errors or anything
app.js
const express = require('express');
const app = express();
const port = 3000;
app.set('view engine', 'ejs');
app.use(express.urlencoded({ extended: true }));
app.use(express.static(__dirname));
app.get('/', (req, res) => {
let today = new Date();
let currentDay = today.getDay();
let day = ""
if (currentDay === 6 | currentDay === 0) {
day = "Weekend"
} else {
day = "Weekday!"
}
res.render('list', {dayOfWeek: day})
})
app.listen(port, () => {
console.log('Listening on port ' + port);
});
list.ejs
<!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>To Do List</title>
</head>
<body>
<h1>To Do List</h1>
<h2>It's a <%=dayOfWeek%>
</h2>
</body>
</html>
The index.html is just a h1 Send Help..
What am I doing wrong?
I removed the index.html file and it works but it shouldn't be like that... Right?
Add this code:
const path=require("path");
app.set('views', path.join(__dirname));
I have some bool and string variable in the server side that should be passed to client side.
how can I implement this?
in my html file I want a h1 tag if my flag in the server side is true and if flag is false it just another work. at the first my flag is false.
server.js:
app.get('/' , (req, res) => {
res.sendFile(path.join(__dirname+'/views/UiOfServer.html'));
});
I found the anwser myself, the solution is useing EJS. because server rendering is so eazy with that.
I changed my html file to EJS file and my question solved. my code is:
index.ejs:
<!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>example of EJS</title>
</head>
<body>
<% if(flag){ %>
<h1><%= username %></h1>
<% }
else{ %>
<!-- some work -->
<% } %>
</body>
</html>
server.js:
let express = require('express');
let path = require('path');
let app = express();
let router = express.Router();
app.use('/', router);
app.set('view engine', 'ejs');
const port = 2020;
app.get('/' , (req, res) => {
res.render(path.join(__dirname+'/views/UiOfServer.ejs'), {flag: false, username: 'null'});
});
app.get('/click/' , (req, res) => {
res.render(path.join(__dirname+'/views/UiOfServer.ejs'), {flag: true, username: 'Hessam :) '})
}
app.listen(port, (err, res) => {
if(err){
console.log(`Server Error: ${err}`);
}
else{
console.log(`server started on ${port}`);
}
});
I'm trying to use jsPDF with Vue but I get a ReferenceError: jsPDF is not defined. See the snippet :
let jsPrint = () => {
const doc = new jsPDF()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<button onclick="jsPrint()">
print
</button>
The script is linked in the head tag :
<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><?= $site->title() ?> - <?= $page->title() ?></title>
<link rel="stylesheet" href="<?= url('assets') ?>/css/style.css">
<!--========== JSPDF ==========-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<!--========== VUE ==========-->
<!-- development version, includes helpful console warnings -->
<script src="<?= url('assets') ?>/js/libs/vue.js"></script>
<script src="<?= url('assets') ?>/js/app.js" type="module" defer></script>
</head>
Then in a component, I have a method that should be triggered on click on a button :
exportSimple: function() {
const doc = new jsPDF()
// const target = document.querySelector('#dialog-export-content')
// doc.html(target, {
// callback: function(doc) {
// doc.save()
// },
// x: 10,
// y: 10
// })
}
But i throws an error.
I tried alternative methods to link the library : local, npm, other sources like jspdf.es.min.js. Nothing works.
Any idea ?
Using CDN the jsPDF object is available as property of jspdf which is available globally :
const { jsPDF } = jspdf
let print = () => {
const doc = new jsPDF()
}
I wanted to test deepstream with express.
Found this template https://github.com/deepstreamIO/ds-tutorial-express
But when I run it I get the error message:
Connection closed before receiving a handshake response
Why isn't this example working?
Server.js
var Deepstream = require( 'deepstream.io' );
var http = require( 'http' );
var express = require( 'express' );
var deepstream = new Deepstream();
var app = express();
var server = http.createServer(app);
app.get('/hello', function ( req, res ) {
res.send( 'Hello to you too!' );
})
deepstream.set( 'httpServer', server );
deepstream.start();
server.listen( 6020, function(){
console.log( 'HTTP server listening on 6020' );
});
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Client</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- libraries -->
<script type="text/javascript" src="https://rawgit.com/deepstreamIO/deepstream.io-client-js/master/dist/deepstream.min.js"></script>
</head>
<body>
<script>
var ds = deepstream( 'localhost:6020' );
ds.login( {}, function( success, errorEvent, errorMessage ) {
console.log( 'Logged in to deepstream' );
});
</script>
</body>
</html>
BR
On the client, could you switch to this CDN link
<script src="https://cdnjs.cloudflare.com/ajax/libs/deepstream.io-client-js/1.1.1/deepstream.js"></script>
the rawgit one is pointing to the master branch which is already at 2.0 and incompatible with the 1.x server
I would like to use html2canvas but it is not clear enough how to use it in the documentation. What libraries I should include ? and then is this peace of code just what I need ? What about the proxy ? and How I could save the screen shot after it's taken ?
$('body').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL()
window.open(img);
For me, it was working this way:
$('#map').html2canvas({
onrendered: function( canvas ) {
var img = canvas.toDataURL()
window.open(img);
}
The current latest version works this way:
html2canvas($('#map'),
{
onrendered: function(canvas) {
cvs = canvas.toDataURL('image/png');
window.open(cvs)
}
});
Here's a minimal, complete example that shows how to convert the DOM to canvas with html2canvas, convert the canvas to base64, and finally trigger a download.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
<h1>Hello World</h1>
<script>
(async () => {
const canvas = await html2canvas(document.body);
const base64 = canvas.toDataURL();
const a = document.createElement("a");
a.href = base64;
a.download = "html2canvas-test.png";
a.click();
})();
</script>
</body>
</html>
I'm not sure what you mean about a proxy.