DEV Community

loading...
Cover image for Serving HTML files using Node.js on Ubuntu

Serving HTML files using Node.js on Ubuntu

kalpitrathore profile image Kalpit Rathore Originally published at kalpitrathore.hashnode.dev ・3 min read

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

  1. Install Node.js
sudo apt-get install nodejs
Enter fullscreen mode Exit fullscreen mode
  1. Install NPM (NPM is a package manager for Node.js packages)
sudo apt-get install npm
Enter fullscreen mode Exit fullscreen mode
  1. Create new project directory
mkdir node_application && cd node_application
Enter fullscreen mode Exit fullscreen mode
  1. Initialize NPM in your project directory
npm init
Enter fullscreen mode Exit fullscreen mode

It will ask some details related to your application.

  1. Install Express.js It is a standard server framework for node to create single-page, multi-page & hybrid applications
npm install express --save
Enter fullscreen mode Exit fullscreen mode
  1. 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);
Enter fullscreen mode Exit fullscreen mode
  1. Create a new folder inside your root project directory.
mkdir views && cd views
Enter fullscreen mode Exit fullscreen mode
  1. 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>
Enter fullscreen mode Exit fullscreen mode
  1. Now run this command in your root project directory
//if you are inside views folder
cd ..
//else simply run
node app.js
Enter fullscreen mode Exit fullscreen mode
  1. We can see our website in our browser :)
    k.png

  2. Our project directory will look like this

app.js
node_modules
package.json
package-lock.json
views -> index.html
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

pic
Editor guide