In this article, we’ll learn how to create a Node.js App In Visual Studio.

What is Node.js?

Node.js is an open-source server environment that executes JavaScript server-side.

What is npm?

For the Node.js, npm is the default package manager. The package manager makes it easier to share and publish the source code of Node.js libraries and is designed to simplify installation, uninstallation, and updating of Node.js libraries.

What is express?

Express is a web application framework for Node.js, used as a server framework for Node.js to build web applications. Express allows you to use choose different front-end frameworks to create a User Interface (UI).

Prerequisites

• Visual Studio 2019

If you haven’t already installed Visual Studio 2019, go to the link given below to install it for free.

Download Visual Studio 2019

If you need to install the workload but already have Visual Studio, click on Continue without code.

Then go to Tools -> Get Tools and Features…, which opens the Visual Studio Installer. Choose the Node.js development workload, then click on the Modify button.

 

• • Node.js runtime

If you don’t have it installed, install the LTS version from the link given below.

Download Node.js

Create a new Node.js project

In this tutorial, we are creating a simple project containing code for a Node.js and express app.

1. Open Visual Studio
2. Create a new project

Choose Basic Azure Node.js Express 4 Application (JavaScript).

Now, set the Project name and Location, and then click on the Create button.

Node.js project is created. The application uses Pug for the front-end JavaScript framework. Pug uses simple markup code that compiles to HTML.

We are going to use HTML files as views in our application. So first, we have to delete all .pug files.

Now, create index.html file in views folder from Solution Explorer by right click views folder -> Add -> New Item…

Then, choose the HTML file and set the Name: then click on the Add button.

Pug is set as the view engine in app.js. So, now we have to change the view engine from Pug to HTML.

Install the ejs view engine with the NPM:

Right-click on the npm from Solution Explorer -> Install New npm Packages…

Search and install ejs package.

Now, open the app.js file then search ‘view engine setup‘ and replace the code as given below.

'use strict';
var debug = require('debug');
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', 'pug');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

// uncomment after placing your favicon in /public
//app.use(favicon(__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: {}
    });
});

app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function () {
    debug('Express server listening on port ' + server.address().port);
});

Open the index.html file and add the code in it.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>Node App</h1>
    <p>The Code Hubs</p>
</body>
</html>

Output:

 

Also, check How To Use Font Awesome Icon In Placeholder