Serving HTML files using Node.js on Ubuntu

In this article, We'll going to host a Node.js Application on Ubuntu.

Node.js is an open source, javascript runtime environment used to create of backend of any application.

To get started

Install Node.js
```
sudo apt-get install nodejs
```
Install NPM (NPM is a package manager for Node.js packages)
```
sudo apt-get install npm
```

Create new project directory

mkdir node_application && cd node_application

Initialize NPM in your project directory
```
npm init
```
It will ask some details related to your application.
Install Express.js It is a standard server framework for node to create single-page, multi-page & hybrid applications
```
npm install express --save
```

Create "app.js" file inside in your project directory and add some code in it

var express = require('express');
var app = express();
var path = require('path');
app.get('/', function(req, res) {
 res.sendFile(path.join(__dirname + '/views/index.html'));
});
app.listen(80);

Create a new folder inside your root project directory.
```
mkdir views && cd views
```

Create a new file "index.html" inside "views" folder and add some code in it.

<!doctype html>
<html lang="en">
<head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
   <title>Hello, world!</title>
</head>
<body>
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
         <a class="navbar-brand" href="#">Navbar</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
               <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="#">Home</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
               </li>
               <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                     <li><a class="dropdown-item" href="#">Action</a></li>
                     <li><a class="dropdown-item" href="#">Another action</a></li>
                     <li>
                        <hr class="dropdown-divider">
                     </li>
                     <li><a class="dropdown-item" href="#">Something else here</a></li>
                  </ul>
               </li>
               <li class="nav-item">
                  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
               </li>
            </ul>
            <form class="d-flex">
               <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
               <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
         </div>
      </div>
   </nav>
   <h1>Hello, world!</h1>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>

Now run this command in your root project directory

//if you are inside views folder
cd ..
//else simply run
node app.js

We can see our website in our browser :)

Our project directory will look like this

app.js
node_modules
package.json
package-lock.json
views -> index.html

Concusion

Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node based Web applications.

For more update, Follow me on twitter

Kalpit Rathore

Kalpit Rathore

Serving HTML files using Node.js on Ubuntu

To get started

Concusion