We Keep Coding

using node.js and found this error > 'server' is declared but its value is never read.ts(6133) > from "var server = app.listen(3000, listening);"

been doing the 8.6 in api2 folder but got this error/bug then I look at my server.js and found the error/bug then I go back to api1 folder which is the 8.5 lesson, I have finish the 8.5 lesson and it doing correctly by save to json file and read json file just fine, but for some reason this happen when I go back to my api1??
The Coding Train
8.5: Saving Data to JSON File with Node.js - Programming with Text
https://www.youtube.com/watch?v=4zr8j-jeU_M&list=PLRqwX-V7Uu6Yyn-fBtGHfN0_xCtBwUkBp&index=6
The Coding Train
8.6: API Front End Client - Programming with Text
https://www.youtube.com/watch?v=4zr8j-jeU_M&list=PLRqwX-V7Uu6Yyn-fBtGHfN0_xCtBwUkBp&index=6
PS:I have been using Safari and vscode
I think the error/bug start from when I write the fs.writefile by using word or words don't know I got confuse on why it got different error from the video but when I write all the code by adding JSON.stringify and I got it right? so I just ignore the error because I got it right and the code run just fine, so I move on to lesson 8.6 then I got the error when I try to write the code from 8.6
or maybe I did not code correctly? I went to other code and I found the same error but not on
// This call back just tells us that the server has started
function listen() {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://' + host + ':' + port);
}
but on
// Callback
function showAll(req, res) {
// Send the entire dataset
// express automatically renders objects as JSON
res.send(words);
}
When I point my mouse on req it got the same error/bug 'req' is declared but its value is never read.ts(6133)
this is the website that I got the source code from
https://shiffman.net/a2z/server-node/
this is the other code
https://github.com/Programming-from-A-to-Z/A2Z-F16/blob/gh-pages/week4-node/06_save_JSON/server.js
//
This is my error/bug on project "api1" folder
var server = app.listen(3000, listening);
var server: Server
'server' is declared but its value is never read.ts(6133)
//
this is my file and folder
api1 //folder
node_modules //express folder
package-lock.json //file
package.json //file
{
"scripts": {
"start": "node server.js"
},
"name": "project-pj",
"version": "0.0.1",
"dependencies": {
"express": "^4.18.1"
}
}
server.js //file
var fs = require('fs');
var data = fs.readFileSync('words.json');
var words = JSON.parse(data);
console.log(words);
//console.log('server is starting');
var express = require('express');
var app = express();
var server = app.listen(3000, listening);
function listening () {
console.log("listening...");
}
app.use(express.static('website'));
app.get('/add/:word/:score?', addWord);
function addWord(request, response) {
var data = request.params;
var word = data.word;
var score = Number(data.score);
var reply;
if (!score) {
var reply = {
msg: "Score is required."
}
response.send(reply);
} else{
words[word] = score;
var data = JSON.stringify(words, null, 2);
fs.writeFile('words.json', data, finished);
function finished(err) {
console.log('all set.');
reply = {
word: word,
score: score,
status: "success"
}
response.send(reply);
}
}
}
app.get('/all', sendAll);
function sendAll(request, response) {
response.send(words);
}
app.get('/search/:word/', searchWord);
function searchWord(request, response) {
var word = request.params.word;
var reply;
if (words[word]) {
reply = {
status: "found",
word: word,
score: words[word]
}
} else {
reply = {
status: "not found",
word: word
}
}
response.send(reply);
}
website //folder
index.html //file
words.json //file
{
"rainbow": 5,
"unicorn": 3,
"doom": -3,
"gloom": -2,
"purple": 3,
"pink": 6,
"flower": 7
}

Finally after 1 month of going back and forth, I finally understand the express and how to save data by remove the Bug, for some reason I got this line of code that I don't even remember why I add it in the first place... probably too much coffee LOL
sketch.js "File"
const { text } = require("express");//bug right here
function setup() {
createCanvas(400, 400);
background(51);
loadJSON('all', gotData);
console.log('running');
}
function gotData(data) {
console.log(data);
var keys = Object.keys(data);
for (var i = 0; i < keys.length; i++) {
var word = keys[i];
var score = data[word];
var x = random(width);
var y = random(height);
fill(255);
textSize(64);
text(word, x, y);
}
}
Thank to this info I got to know a lot more about express and where to put all my Game Code to the Public folder, guess I should start with "2.1 Server-side with Node.js" first to understand "express and server side" but oh well, I just want to save data and I got it, and just finish the 8.6 and now I'm in 8.7 LOL Api is harder than I thought, at first I though it was some kinda code to work with other website, but now I know it was for save data and a lot more... :
//ExpressStartInfo
/*
const express = require('express');//Start1
const app = express();//Start2
app.listen(3000, () => console.log('listening at 3000'));//Start3
//node index.js
//search for package.json "main">index.js
//public folder
//index.html file
//nodemon index.js
app.use(express.static('public'));//Start4
//Run the folder that have html Website/p5.js project in it
//app.use(express.static('public/P5.js'));
*/
//Server Side
//BackEnd
//index.js
//Source:
//2.1 Server-side with Node.js - Working with Data and APIs in JavaScript
//https://www.youtube.com/watch?v=wxbQP1LMZsw
////////////////////////////////////////////////////////////
//"sketch.js" bug
//const { text } = require("express"); //due to error of text not show up errase this//AKA "Bug"
//nodemon node server.js
//npm start
//http://localhost:3000
//End at 5:52/13:49min
//8.6: API Front End Client - Programming with Text
//https://www.youtube.com/watch?v=4zr8j-jeU_M&list=PLRqwX-V7Uu6Yyn-fBtGHfN0_xCtBwUkBp&index=6
////////////////////////////////////////////////////////////
//package.json
/*
{
"scripts": {
"start": "node server.js"
},
"name": "project-pj",
"version": "0.0.1",
"dependencies": {
"express": "^4.18.1"
}
}
*/
//Second "package.json" file"
//npm init
/*
{
"scripts": {
"start": "node server.js"
},
"name": "project-pj",
"version": "0.0.1",
"dependencies": {
"express": "^4.18.1"
},
"main": "server.js",
"devDependencies": {},
"author": "",
"license": "ISC",
"description": ""
}
*/

What is the simplest way to link between .hbs files using handlebars?

I am a complete beginner to handlebars and am trying to modify the simple handlebars template taken from the example on glitch.com
I would like to be able to link between .hbs files as I would link between .html files but when I try however I am given the message cannot GET followed by whatever file I give to it.
Here is a grab of my overall structure for ref;
Here is the index.hbs files I am working with
<!DOCTYPE html>
<html>
{{> head }}
<body>
Link to second page
</body>
</html>
Which I would like to link to (for example) this secondpage.hbs file;
<!DOCTYPE html>
<html>
{{> head }}
<body>
Link back to index
</body>
</html>
Here is the code in my server.js file
// Generic node.js express init:
const express = require('express');
const app = express();
app.use(express.static('public'));
const hbs = require('hbs');
hbs.registerPartials(__dirname + '/views/partials/');
app.set('view engine', 'hbs');
app.set('views', __dirname + '/views');
app.get("/", (request, response) => {
let dt = new Date();
let data = {
projectName: process.env.PROJECT_DOMAIN,
luckyNumber: Math.floor(Math.random()*1000),
serverTime: new Date(),
ip: (request.headers["x-forwarded-for"]||"").split(",")[0]
};
data.json = JSON.stringify(data, null, 2);
response.render('index', data);
});
let listener = app.listen(process.env.PORT, () => {
console.log('Your app is listening on port ' + listener.address().port);
});
and the code in my watch.json
{
"install": {
"include": [
"^package\\.json$",
"^\\.env$"
]
},
"restart": {
"exclude": [
"^public/",
"^dist/"
],
"include": [
"\\.js$",
"\\.hbs$",
"\\.json"
]
},
"throttle": 100
}
If any of the details of the other files is necessary to assist let me know and I can provide.
I appreciate I am probably thinking about this in the wrong way, I have looked at handlebars in more detail and experimented with helpers etc. but it seems overly complicated for what I am trying to achieve, I thought you could write basic html within an hbs file? I am looking for the most straightforward, generic solution to the problem of linking between views in handlebars.
FWIW I want to use handlebars in a pretty simple fashion, basically just looking to have the equivalent of php includes using partials instead, so if there is a better way to approach the creation of the app with that in mind I would be grateful for advice.

Your code looks alright. What is the problem exactly? When you add {{> head}} partial to the index.hbs doesn't it render properly?
EDIT:
Okay, you have mainly 2 problems with your code:
You have no route defined on express linking to your /secondpage endpoint.
You are trying to link to a file Link instead of linking to an URL endpoint Link.
To fix your code you would have to define the endpoint linking to the handlebars file, so you need to change your server.js file to something like this.
const express = require('express');
const hbs = require('hbs');
const app = express();
app.use(express.static('public'));
app.set('view engine', 'hbs');
app.set('views', __dirname + '/views');
hbs.registerPartials(__dirname + '/views/partials/');
// 1st Page Route (URL Endpoint)
app.get('/', (request, response) => {
const data = {
projectName: process.env.PROJECT_DOMAIN,
luckyNumber: Math.floor(Math.random() * 1000),
serverTime: new Date(),
ip: (request.headers['x-forwarded-for'] || '').split(',')[0],
};
data.json = JSON.stringify(data, null, 2);
response.render('index', data);
});
// 2nd Page Route (URL Endpoint)
app.get('/secondpage', (request, response) => {
response.render('secondpage');
});
const listener = app.listen(process.env.PORT, () => {
console.log('Your app is listening on port ' + listener.address().port);
});
And then you need to fix your HTML links to this on index.hbs:
<!DOCTYPE html>
<html>
{{> head }}
<body>
Link to second page
</body>
</html>
And this on secondpage.hbs:
<!DOCTYPE html>
<html>
{{> head }}
<body>
Link back to index
</body>
</html>
Hope this helps you.

Instead of using handlebars I used express-handlebars
Terminal: npm i express-handlebars
Handlebars is a Middleware and functions as a Twig (Template Engine) so for your server I'd suggest:
// Generic node.js express init:
const express = require('express');
const app = express();
app.use(express.static('public'));
const exphbs = require('express-handlebars');
app.set('views', __dirname + '/views');
// added this part
app.engine('.hbs', exphbs ({
defaultLayout: 'main',
layoutsDir: ('views', __dirname + 'layouts'),
partialsDir: ('views', __dirname 'partials'),
extname: '.hbs'
}));
app.set('view engine', 'hbs')
app.get("/", (request, response) => {
let dt = new Date();
let data = {
projectName: process.env.PROJECT_DOMAIN,
luckyNumber: Math.floor(Math.random()*1000),
serverTime: new Date(),
ip: (request.headers["x-forwarded-for"]||"").split(",")[0]
};
data.json = JSON.stringify(data, null, 2);
response.render('index', data);
});
let listener = app.listen(process.env.PORT, () => {
console.log('Your app is listening on port ' + listener.address().port);
});
By doing this, you should have a file in your layouts folder named main.hbs where you will have that dynamic approach you're looking for. Something that stays the same for all pages. I will insert here a suggestion, feel free to adapt for your code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- CUSTOM CSS -->
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
{{> navigation }}
<main class="container p-5">
{{{ body }}}
</main>
</body>
</html>
Now when you create a navigation.hbs in your partials folder you will have the same frontend in all pages in the navigation. This is because we defined in the server.js our default template to be main.hbs. Whilst for your body, the triple hash ({{{}}}) inserts the components of the other .hbs files that you define. Don't forget to create a index.hbs file inside the views folder.
I learned the basics of hbs by following this tutorial (Note it's in Spanish). The tutorial produces this open-source project (which I am including in case it is useful).

How to create basic Node.js project with materialwebcomponents?

I am relatively new to Node.js. This is a very simple program so far, meant to just test the incorporation of material-components-web. I followed the instructions step-by-step in the readme, and this is what I have so far:
package.json
{
"name": "hello-polymer", "version": "0.1.0",
"description": "Intro to Polymer", "main": "index.js",
"scripts": { "start": "node index.js" },
"author": "vcapra1", "license": "ISC",
"dependencies": { "#webcomponents/webcomponentsjs": "^2.0.2" }
}
index.js
http = require('http')
fs = require('fs')
http.createServer((request, response) => {
response.statusCode = 200
response.setHeader('Content-Type', 'text/html')
let filename = "./" + request.url
if (request.url.startsWith("/#")) {
filename = "./node_modules/" + request.url
} else if (request.url == "/") {
filename = "./index.html"
} else {
response.statusCode = 404;
response.end("404 Not Found");
}
fs.readFile(filename, (err, data) => {
console.log("Request: ", request.url);
response.end(data)
})
}).listen(3000)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MWC Test</title>
<script src="#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="#material/mwc-icon/mwc-icon.js"></script>
</head>
<body>
Hello, World
<mwc-icon>sentiment_very_satisfied</mwc-icon>
</body>
</html>
Then I run the following command in the project folder:
polymer serve
I've also tried starting it with npm using:
npm start
Both commands allow me to go to the webpage at http://localhost:XXXX, but each time all I get is the text "Hello, World sentiment_very_satisfied", and the plain text stays there with no icon.
I'm not really sure what I'm missing. I find it strange that the script src attributes reference #webcomponents as a sibling folder while said folder is actually in the node_modules directory, so I tried changing that, but still no luck.

I got it working by running with
polymer serve --module-resolution=node --npm.
This tells polymer-cli to transform npm style references to relative references when serving files. Although it doesn't work for index.html for some reason, so relative paths are required there:
<script src="node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="node_modules/#material/mwc-icon/mwc-icon.js"></script>
You can read more here https://www.polymer-project.org/blog/2018-03-23-polymer-3-latest-preview#packagenames

Having trouble getting a counter reset function to work using sockets in express

I have a project I am working on for a coding bootcamp. For the project I need to create a website that has a button that when pressed adds +1 to a counter and displays how many times the button has been pressed. The project also needs a reset button that when pressed resets the count back to zero.
I created the project and everything is working well except for the reset function. Whenever I press the reset button nothing happens. I have looked over the code and I don't see any errors in the reset function that I wrote. Could anyone out there give me any tips on something I may be overlooking as a newbie coder?
Here is my index.js page:
module.exports = function Route (app, server) {
// this gets the socket.io module (below)
var io = require("socket.io").listen(server)
var counter = 0; //saves the count
io.sockets.on("connection", function(socket){
socket.on("push_button", function(data){
counter +=1;
io.emit("push_counter", {response: counter});
/* io.emit is a full broadcast, thus sends data to all connectd clients
will send counter number to index.ejs after increasing by 1 */
})
socket.on("reset_counter", function(data){
counter = 0;
io.emit("reset_response", {response: counter});
/* Will set counter to 0 and send to index.ejs */
})
})
// root route to render the index.ejs view (below)
app.get("/", function(request, response){
response.render("index");
})
};
Here is my index.ejs file that I have stored in a views folder. This page contains the reset function:
<!DOCTYPE HTML>
<html lang ="en US">
<head>
<meta charset="UTF-8">
<title>Epic Button Game</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type ="text/javascript" src="/socket.io/socket.io.js"></script>
<script type ="text/javascript">
$(document).ready(function (){
// alert("jquery loaded");
var socket = io.connect();
//lets emit an event when somebody pushes the button
$("#push").click(function(){
socket.emit("push_button", {action: "Somebody pushed the button"});
});
// this event will emit to the server to reset the counter into 0
$('#reset').click(function(){
socket.emit("reset_counter", {action: 'Resetting the counter'});
});
// listen to the push_counter event from server
socket.on("push_counter", function (data){
console.log(data); // <----- used to test if counter is working
$("#message").html("The button has been pushed " + JSON.stringify(data.response) + " time(s)");
// Will display message on local host page (above code)
});
// Will listen to the reset_response event from server
socket.on('reset_response', function (data){
console.log(data);
$('#message').html('');
});
})
</script>
</head>
<body>
<center>
<h2 id="message">Reset needs to be fixed!</h2>
<h4>Push the button to update the count!</h4>
<button id="push">Push this awesome button</button>
<button id="reset">Reset Count</button>
</center>
</body>
</html>
Here is my server.js page:
// require express, path, body-parser
var express = require("express");
var path = require("path");
var bodyParser = require('body-parser');
// create the express app
var app = express();
app.use(bodyParser.urlencoded());
// static content
app.use(express.static(path.join(__dirname, "./static")));
// setting up ejs and our views folder
app.set('views', path.join(__dirname, './views'));
app.set('view engine', 'ejs');
// tell the express app to listen on port 3000
var server = app.listen(3000, function() {
console.log("listening on port 3000");
})
//we're going to have /routes/index.js handle all of our routing
var route = require('./routes/index.js')(app, server);
Finally my package.json page which contains a list of dependencies I am using:
{
"name": "epic_button_game",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"ejs": "^2.5.5",
"express": "^4.14.1",
"socket.io": "^1.7.2"
}
}
Thanks for in advance for any suggestions.

Express.js connecting to Twitter

I am trying to Oauth authenticate with Twitter, using Express.js and Grant on my Windows 7 machine. When I run node app.js in command line I get the following:
The question is why doesn't MADE IT HERE also get outputted in the console.
Also, what secret should I be putting in app.js where I currently have 'very secret'? Does this need to be my consumer secret or just any string?
I am using Xampp and when I want to run in my browser (Chrome) I direct to: http://dummy.com:3000/ and I get 'This webpage not available'. If I instead direct to http://localhost/xampp/phptest/lions/idk/run.html then I get a blank web page. Which should I be using?
I was trying to follow alongside this: https://scotch.io/tutorials/implement-oauth-into-your-express-koa-or-hapi-applications-using-grant#configure-express
Here are all of my files:
app.js
var express = require('express')
, logger = require('morgan')
, bodyParser = require('body-parser')
, cookieParser = require('cookie-parser')
, session = require('express-session');
var fs = require('fs');
var obj = JSON.parse(fs.readFileSync('./config.json', 'utf8'));
var Grant = require('grant-express')
, grant = new Grant(obj) ;
var app = express();
app.use(logger('dev'));
app.use(grant);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(cookieParser());
app.use(session({
name: 'grant', secret: 'very secret',
saveUninitialized: true, resave: true
}));
app.get('/handle_twitter_callback', function (req, res) {
console.log('MADE IT HERE');
console.log(req.query);
res.end(JSON.stringify(req.query, null, 2));
});
app.listen(3000, function() {
//document.getElementById("holder").innerHTML="GOT HERE";
console.log('Express server listening on port ' + 3000);
});
config.json
{ "server": {
"protocol": "http",
"host": "dummy.com:3000"
},
"twitter":
{
"key": "myconsumerkey",
"secret": "myconsumersecret",
"callback": "/handle_twitter_callback"
}
}
package.json
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "node app.js"
},
"bin": "./",
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.13.2",
"cookie-parser": "^1.3.5",
"errorhandler": "^1.4.1",
"express": "^4.13.1",
"express-session": "^1.11.3",
"fs": "0.0.2",
"grant-express": "^3.3.3",
"jade": "^1.11.0",
"method-override": "^2.3.4",
"morgan": "^1.6.1",
"multer": "^0.1.8",
"serve-favicon": "^2.3.0"
}
}
run.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>run</title>
<meta name="author" content="stephen" />
<!-- Date: 2015-07-17 -->
</head>
<body>
<script src="app.js"> </script>
</body>
</html>

There's a few things to note here:
1) Its important to note that node.js is JavaScript as/on a server. If you're using node.js, you don't need xampp. Xampp is a server usually for running php. Node is creating a server itself, so you don't need to use xampp at all.
app.listen(3000, function() {
console.log('Express server listening on port ' + 3000);
});
Is your app.js file telling your server to run on port 3000. Just hit localhost:3000 to view whatever page you're serving from your app.js file.
2) If you're looking to print something out on your console, use console.log('something');, and you'll see it in the same console as your Express server... stuff. Note that you're using the server console, not your browser's console. It looks like you're trying with //document.getElementById("holder").innerHTML="GOT HERE"; to change stuff in the browser from you server file, which is probably not what you're looking to do. You'll need to include a file to be run client-side to manipulate dom stuff.
3)
app.get('/handle_twitter_callback', function (req, res) {
console.log('MADE IT HERE');
console.log(req.query);
res.end(JSON.stringify(req.query, null, 2));
});
You'll need to head to localhost:3000/handle_twitter_callback to reach that, and I believe you'll see what you're looking for.
I would suggest hitting a tutorial that explains node and express full through without anything extra to begin with, then trying OAuth stuff.