Visual Studio Code - Node.js - Cannot find name '__dirname' - node.js

Just to preface I'm not a professional coder, but nonetheless I got roped into building a website for my boss after he found out I took "Web Design" in high school 10 years ago. Back then static sites were fine, and heck CSS was just starting to show it's potential, but I digress.
I'm working on a Node.js project on Visual Studio Code right now and have a weird exception. The code works fine, but I guess it's just curiosity at this point. Anyway, here's my code.
app.js
var express = require('express'),
app = express(),
bodyParser = require('body-parser'),
multer = require('multer'),
controller = require('./controllers');
//Sets the view engine to jade.
app.set('views', __dirname + '/frontend');
app.set('view engine', 'jade');
//sets up the development enviroment
if (app.get('env') === 'development') {
app.locals.pretty = true;
app.use(express.static(__dirname + '/build/public'))
var build = require(__dirname + '/build.js');
app.use('css/*', function(req, res, next){
build.style();
next();
});
}
//Sets up the public directory to serve static files - This will be depricated quite soon...
//app.use(express.static(__dirname + '/public'));
//Initalizes site-wide local variables
//app.set('title', 'Halvorson Homes');
//Sets up body-parser to be able to read RESTful requests
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(multer({dest: 'tmp'}).fields());
//Load Controllers
app.use( '/' , controller);
//makes the app listen on port 3000
app.listen(3000, function() {
console.log('Listening on port 3000...');
})
My folder structure is pretty much as follows
controllers
index.js
designs.js
models
designs.js
frontend
common
layout.jade
header.jade
footer.jade
client.js
style.less
index
index.jade
client.js
style.less
designs
index.jade
client.js
style.less
build
tmp
srv
app.js
build.js
package.json
According to VS Code's built in debugger there's exceptions on lines 8, 14, and 15. They're the only places I used __dirname in the entire project. This is an annoying to me, as I am too much of a perfectionist. Is it Node, VS Code, or something else?

The warning you are getting is from the eslint extension. While it may be valid in Node.JS, it's warning you about __dirname because it's not valid in all JavaScript environments such as in browsers.
To suppress the warning you will want to create an .eslintrc file in your project's root directly and indicate that the code will be running in node like so:
{
"env": {
"node": true
}
}
You can see the .eslint file used to configure eslint for the actual vscode codebase here https://github.com/microsoft/vscode/blob/main/.eslintrc.json

Late to the party, but just had the same issue. The fix for me was to add the node types so VSCode recognises them:
Go to the Terminal view, then enter the following:
npm install #types/node --save-dev
Then hit Cmd + Shift + P (for Mac at least) to bring up the VSCode command search dialogue, then select Reload Window.
When it reappears, that error and any other related to Node.JS stuff not being recognised should be gone.

Alternatively to creating a separate .eslintrc file, you can also add it to the package.json file.
The docs state:
To specify environments in a configuration file, use the env key and specify which environments you want to enable by setting each to true. For example, the following enables the browser and Node.js environments
{
"name": "mypackage",
"version": "0.0.1",
"eslintConfig": {
"env": {
"browser": true,
"node": true
}
}
}

Related

How to properly set Angular for production in NodeJS Express Server?

I have been working for hours on figuring out how to deploy my Angular 6 project on NodeJS Express server,
First, in development i use ng serve which refer to localhost:4200 (default) and another one is Node Express for API (interacting with DB) on localhost:3000. In production i want the Angular build to be served from that Node Express server too.
So what i did was:
Setting up <base href="/"> on index.html on Angular Project
Run ng build --prod it went 100% smooth, no errors.
Copy all files from dist/myprojectname on Angular to Node Express server directory under views/.
In index.js i add following lines app.use(express.static(path.join(__dirname, '/views/')));
it got error something like this
Refused to apply style from 'http://localhost:3001/styles.a64e6aa0f6090e05d2190.css/' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
3localhost/:16 GET http://localhost:3001/runtime.16a329deb1d564eef6599.js/ net::ERR_ABORTED 404 (Not Found)
If i use app.use('/*', express.static(path.join(__dirname, '/views/')));
it will give following error:
Uncaught SyntaxError: Unexpected token <
This seems similar to this issue, are you sure that your css files are NOT starting with comments?
From the linked question's answer:
The issue i think it was with a CSS library starting with comments.
While on dev, i do not minify files and i don't remove comments, this
meant that the stylesheet started with some comments, causing it to be
seen as something different from css.
Hope this helps you this worked perfectly fine for me. The important part of the code is below. My angular application is in ROOT_FOLDER/dist/index.html . You can set the compile/output path in angular.json (variable is outputPath). My express.js file and package.json file is just under the root folder.
const bodyParser = require('body-parser');
const DIST_FOLDER = join(process.cwd(), 'dist');
const STARTING_SERVER_MSG = 'Running server on port %s';
const VIEW_ENGINE_STR = 'view engine';
const HTML_STR = 'html';
const VIEWS_STR = 'views';
const BROWSER_STR = 'browser';
private routes() {
// This part might be useless STRAT_LINK later
this.app.set(VIEW_ENGINE_STR, HTML_STR);
this.app.set(VIEWS_STR, join(DIST_FOLDER));
this.app.use(express.static(join(DIST_FOLDER)));
this.app.use(bodyParser.json());
this.app.use(bodyParser.urlencoded({extended: false}));
// this.app.use('/env', envRouter);
// get router
this.app.use(function (req, res, next) {
res.sendFile(join(DIST_FOLDER, 'index.html'), {req});
});
}

how to run angular 6 app with nodejs api on production?

Hi I am new to angular6
In development mode I have worked in angular 4200 port and node in different port (8080) in my operations.
but now I want to move my app into production mode.
for that I had build my angular project by using ng build command. after i get a dist folder is created on the root folder.
so i went to server.js file
here I had add my static file
app.use(express.static(path.join(__dirname,'dist/MDProject')));
app.use('/',(req,res)=>{
res.sendFile(path.join(__dirname,'dist/MDProject/index.html'))
});
click here to read my server.js file
by this
when ever I redirect to my local host it is opening but
in server.js side i didn't get any response.
when ever I try to login I am getting this error.
can anyone help me to solve this
I think there are 2 things wrong here in your code.
First, update your code
From:-
app.use('/',(req,res)=>{
res.sendFile(path.join(__dirname,'dist/MDProject/index.html'))
});
To:- This code needs to be added just before your app.listen(app.get('port')) code
app.get('*', function(req, res) {
res.sendfile('./public/MDProject/index.html');
// load the single view file (angular will handle the page changes on the front-end)
});
Second, Serve your file from your public folder(In your case I think it is the dist folder). So update your code like this.
app.use(express.static(__dirname + '/dist/MDProject'));
after I removed this line in my server.js file
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
and I paste this line before port creation.
app.use(express.static(path.join(__dirname,'dist/MDProject')));
app.use('/',(req,res)=>{
res.sendFile(path.join(__dirname,'dist/MDProject/index.html'))
});
now it is working fine.
Use this to go to index page.
app.get('*', (req, res) => {
res.sendfile('./public/MDProject/index.html');
})
with that you have to make folder in public in node
app.use('/', express.static('/dist/MDProject'))
Then in your app dist folder -> index.html
<base href="http://192.168.1.1:3000/admin-panel/">
This is my working code. Let me know if you have still any issue. :)

Starting Express.js Using app.js or 'npm start'?

I've recently installed Node.js on a local server and when I create a 'server.js' file (adding a server using the .createServer() method), it loads fine.
However after installing Express.js, the default files are as follows:
/bin
/node_modules
/public
/routes
/views
app.js
package.json
After following some documentation, I am instructed to go to Terminal and enter the following command:
node app.js
To which nothing happens, the command line refreshes to the next line in less than a second, and opening a browser after visiting the proper IP and port, to no avail.
Below is the code inside of the app.js file:
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
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);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
I understand that the actual 'express' module that is being required in the beginning of the file is where the magic happens, however, when I run the command line:
node app.js
Nothing happens. However, if I call the following line:
npm start
Everything appears to be okay. I would like to follow the documentation as is, any reason why the app.js wouldn't be working?
Thank you.
UPDATE: My question was too similar to another one already posted, so I must clarify exactly how they were different. In the other question, a person was questioning a code number they received while running the Supervisor command on the default 'app.js' file.
While similar in nature, this question should remain, as those who are confused by using my same approach will focus on the identity of the actual 'app.js' file by using 'node app.js' without having full knowledge of the Supervisor utility.
Regards.
Thank you all for your great responses, as they really allowed me to understand what is actually going on with the app.js file and where it receives it's functionality. Thank you to both Matthew Bakaitis and Bjarni Leifsson for their great input.
The only reason why I am going to go ahead and answer my own question is because while the nature of the app.js file was explained, exactly how to replicate calling the 'node app.js' command from the command line as to replicate a Node.js book that I was following wasn't implicitly addressed.
After searching google with the specific phrase "app.js in previous express.js versions", I happened upon a great article by Jilles Soeters entitled "Understanding the Express app.js":
http://jilles.me/getting-the-express-app-js/
Below is the excerpt of the solution that worked for me:
The file I'm covering is app.js, the main configuration file for your
Express app. When I first opened app.js it confused me. I will save
you the trouble of doing research and just cover them here.
Before you do anything add the following to your app.js
app.listen(3000);
You need that in order to be able to actual open your app in the
browser. Go to 127.0.0.1:3000 after you've started your app (using
node app.js)
After doing this, I was able to run the command
node app.js
I was able to run this command from the root directory of the Express install and proceed with my Node.js book with no additional problems.
This is a common problem that is caused when tutorials don't clearly explain what express is doing when it generates an app. You're trying to learn the new tech, but the tutorial is actively working against you. :(
The answer:
When you use the generator, package.json is configured so that npm start calls ./bin/www.
That file includes app.js and after the include, calls app.listen.
app.js doesn't call app.listen which is why if you call it directly, it exits with no code or info. You've got to call ./bin/www or you have to modify app.js...which then defeats some of the reasons you'd use a generator.
A related question here on the site saw a similar problem when trying to use supervisor to keep an app running but kept getting an exit 0 result.
How I understand this, and I have just started to use node.
There is a bin folder with www in it. There all the magic happens. So when you do node app.js it gets executed but the logic to the everything is in bin/www
So if you look into package.json you see this init :
"scripts": {
"start": "node ./bin/www"
},
So giving that, you see to execute the script you use the start method and it is linked to ./bin/www
If you take a look in that file you will find out that the whole logic of the server to start up is in there.
So if you change start to something else, like TurnOn and would do npm TurnOn, it will execute ./bin/www and the whole project for you.
The structor of the project is all linked together, and app.js is not enough to start the server.
Hope this helps.
When using Express the Express instance will create the server for you. Typically your app/index/server.js file will begin with these lines:
const express = require('express');
const app = express();
These lines require Express and then instantiate an instance of Express within the app variable. Express then uses var server = http.createServer(app); to start a server for you. All you need to do is to make sure your app listens to that server (as you wrote). However, the port for the connection may vary so it is not advisable to hard-code it. Instead it should be retrieved from the app variable as such:
app.listen(app.get('port'), function(){
//Something to do when the server starts.
});
Additionally, after creating your own app.js file make sure to change your package.json file to start the app via app.js instead of the Express module. By default your package.json might look like this:
"scripts": {
"start": "node ./bin/www"
},
But after you created your own app/index/server.js file you want node to start running that file on startup instead:
"scripts": {
"start": "node app.js"
}
You can then start your app by writing npm start from the project directory.

Including and automatically compiling Sass on Express server

So I have a basic Express project set up and I'm using this github project, https://github.com/andrew/node-sass, to be able to use Sass on top of node. This is my app.js currently:
var io = require('socket.io'),
express = require('express'),
path = require('path'),
routes = require('./routes'),
jquery = require('jquery');
/**
* Create app
*/
var app = express()
, server = require('http').createServer(app)
, io = io.listen(server);
/**
* Configure app
*/
app.configure(function(){
app.set('port', 8080);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));
});
What do I need to do to get Sass working and auto recompiling? I can't seem to find any useful info for Express servers specifically.
First add this require statement:
var sass = require("node-sass");
and then the following code, in your app.configure block:
...
app.use(sass.middleware({
src: <your-sass-files-dir>,
dest: path.join(__dirname, 'public'),
debug: true
}));
...
But I'm sorry to say that the node-sass library is quite useless at the moment, because the #import's, in your scss files, does not work as it's supposed to... See https://github.com/andrew/node-sass/issues/27 for current status.
UPDATE 2013-10-22: Apparently the issue mentioned above seems to be fixed according to #jonathanconway in the comments below... Though there's still an unanswered comment on the issue from someone that still experiences the error at 2013-09-03
Like joakimbeng said, currently the node-sass library has an issue where the #import's are kind of broken.
However! I found a workaround, which you can see here.
What I did basically is grab the raw sass (in my case, scss), and let node-sass render the string for me. But, since it's current working directory is wherever your server.js file is located, you're going to have to put url's in your sass file, relative to your server.js. In my case, like this.

how to set path to the views (template) directory and to static files in node.js

I have created layout.jade, navigation.jade, and index.jade, and I want to glue them together.
In server.js, how do I
set the path to the views (template) directory, and
set the path to static files.
Is it required that node_module be placed in the folder that contains server.js?
Below is the code for server.js:
//create an app server
var express = require("express");
var server = express.createServer();
//set path to the views (template) directory
app.set('views', D:\#Programming\node.js\trial box\views);
//set path to static files
//how is the path to static files set?
app.use(express.static(__dirname + '/../public'));
//handle GET requests on /
app.get('/', function(req, res){
res.render('index.jade', {title: 'web project'});
});
//listen on localhost:3000
app.listen(3000);
Thank you in advance.
This questions a little old, but I'll still leave an answer. You'll need to place your app.use(... statement inside a callback function for app.configure() like so..
app.configure(function(){
app.use(express.static(__dirname + '/../public'));
});
You should use the express bin tool to bootstrap a project you'd get all that setup.
To install it:
sudo npm install express -g

Resources