We Keep Coding

Cannot connect javascript to pug file in node express app

I am trying to connect a pug file to a javascript file using script. However I do not see anything viewed in the console in-spite of the console.log that I have placed there.
The following is the structure of my app.js file.
const app = express();
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "pug");
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));
I have placed the pug file under the views directory and js file in the public/js folder.
I am able to render and view the pug file on load but it does not seem to be connected to the js file.
The following is the script tag I have added on my pug file.
.script(type='text/javascript', src='js/game-client.js')
This is the folder structure of my app with public and views being in the root directory
public/js/game-client.js
views/gameroom.pug
Please help me on how to proceed this. Any help is appreciated. Thank you!

How to route HTML Node js Express js

I am trying to route multiple HTML pages. It loads index.html file, but when I want to load raw.html, it says
Error: Failed to lookup view "error" in views directory
app.js
var routes = require('./routes/index');
var users = require('./routes/users');
var raw = require('./routes/raw');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
app.use('/raw', raw);
/routes/index.js
var express = require('express');
var router = express.Router();
var path = require('path');
router.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/public/index.html'));
});
module.exports = router;
/routes/raw.js
var express = require('express');
var router = express.Router();
var path = require('path');
router.get('/raw', function(req, res) {
res.sendFile(path.join(__dirname + '/public/raw.html'));
});
module.exports = router;

You are configuring express to use the pug (formerly known as jade) template engine.
A template engine enables you to use static template files in your
application. At runtime, the template engine replaces variables in a
template file with actual values, and transforms the template into an
HTML file sent to the client. This approach makes it easier to design
an HTML page.
The error you mention above is because you do not have a template file named error.pug in the views directory. The template engine catches the first error, which is:
Error: ENOENT: no such file or directory,
and then tries to render the error template.
res.sendFile(path.join(__dirname + '/public/index.html'));
The line above in your file routes/index.js will try to send routes/public/index.html and that file do not exists.
You can fix your express configuration using a correct path in your request handlers, i.e:
router.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/../public/index.html'));
});
You should also remove the template engine configuration, since you do not seem use it.

You mentioned in the comments that you want to use Angular, so...
You dont need a view engine if you want to use Angular.
When using Angular, the "main" part of your website is located on the clients' side, in the index.html file (this is not 100% correct, just an example).
That part (in the users browser) has JS code (Angular) that sends http request to the server - $http.
The server part basicaly just operates these requests and sends back data to Angular on the clients side, and then you do what ever you want with that data on the clients side.
You can respond to these requests with Node, PHP and etc.
This is similar to the idea behind AJAX, when only small parts of the page are changed without reloading the whole page.
On the other hand, if you are using view-engines, when the server gets a request, for example:
app.get('/',.routes.views.home);
The server renders an entire html page and sends it to the client, as it works with PHP.

Localhost not working with node js

Following is a small server (app.js) which is is simply calling index.jade file to add jquery.js, underscore.js and backbone.js for later use. But its not working.
My directory structure is:
base
app.js
public
jquery.js
underscore.js
backbone.js
theapp.js
views
index.jade
My app.js file is:
var express= require("express"),
http = require("http"),
path = require("path");
var app= express();
app.use(express.static(__dirname+ "/public"));
app.get("/", function(req, res){
res.render("views/index.jade");
});
app.listen(3000);
My index.jade file is:
#main
script(src= "jquery.js")
script(src= "underscore.js")
script(src= "backbone.js")
script(src= "theapp.js")
When I run localhost:3000 in the browser, it says: Error: Failed to lookup view "views/index.jade"
(Localhost is working fine with another node.js program)
Please help. Thanks a lot!

Dont include the .jade
res.render("views/index");
Assuming your view engine is already setup to use Jade. (app.set('view engine', 'jade');)
You also probably dont need to specify the "views" folder, check for the line
app.set('views', path.join(__dirname, 'views'));
in your app.js - this is the root directory for your views, so you'll only need:
res.render("index");

Deploy Nodejs on Heroku fails serving static files

Im trying to do two things that i read, but its not working. The statics files dont found.
This not working:
process.env.PWD = process.cwd()
app.set('views', path.join(process.env.PWD, 'public'));
And this not working:
enter code hereapp.set('views', path.join(__dirname, 'public'));

Heroku for some reason doesnt work with __dirname, so try to this:
process.env.PWD = process.cwd();
app.set('views', path.join(process.env.PWD, 'public'));
app.use(express.static(path.join(process.env.PWD, 'public')));
This is what work for me when i have this problem.

This is because, Views are express partials which should be inside "views" folder like this
app.set('views', path.join(__dirname, 'views'));
For static files (HTML,CSS, JS) they should be inside the public folder, so to server files from public folder you need
app.use(express.static(path.join(__dirname, 'public')));
Thanks

Getting express.js to show a public folder

I've recently built a quick one page app using express.js, and this is really my first js framework (actually, my first js project, so I'm really new to this). I've got a subscription to the new typography.com cloud fonts, and I'm having trouble locating the "fonts" folder that I place in the public folder. Is there a way I need to add the folder and specify a route?
Here's my app.js file:
/**
* Module dependencies.
*/
var express = require('express'),
routes = require('./routes'),
user = require('./routes/user'),
http = require('http'),
path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static('public'));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', routes.index);
app.get('/users', user.list);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
I haven't made any changes to the routes at all, so they are just default.

Please use express.static setting:
app.use(express.static(process.cwd() + '/public'));
And place your fonts folder in that public folder.

If you are using Heroku, you may want to look at this thread: Deploy Nodejs on Heroku fails serving static files located in subfolders
The guy explain that he struggled with "__dirname" until he specified the last version of NPM in his package.json:
"engines": {
"node": "0.10.11",
"npm": "1.2.25"
}
If that doesn't work, you might try:
// At the top of your web.js
process.env.PWD = process.cwd()
// Then
app.use(express.static(process.env.PWD + '/public'));
Instead of "__dirname"
Though, all that is probably useless if you already struggle localy.