Bootstrap Website running as nodejs app

admin — Sat, 22 Mar 2025 07:16:20 +0000

First I design the HTML site. The website is a simple Bootstrap-based site. This HTML part has the following tree structure.

.
├── images
│   ├── 2022-05-28-1-Paterlini-Umbau-80s-Ansicht.jpeg
│   ├── 2022-05-28-2-Paterlini-Umbau-80s-Ansicht.jpeg
│   ├── 2022-05-28-3-Paterlini-Umbau-80s-Ansicht.jpeg
│   ├── 2022-05-28-4-Paterlini-Umbau-80s-Ansicht.jpeg
│   ├── 2022-07-09-Gianni-Motta-1.jpeg
│   ├── 2022-07-09-Gianni-Motta-2.jpeg
│   └── 2022-07-09-Gianni-Motta-3.jpeg
└── index.html

The index.html contain the HTML and include a navbar, a hero section, and a footer. The index.html looks like the following.




    
    
    Funtrails - Nodejs Demo
    


    
    
        
            Funtrails - Demo
            
            
                
                    Paterlini
                    Gianni Motta
                
            
        
    
    
    
    
        
            Funtrails
            History of Bikes and Components
        
    
    
    
    
        
            Paterlini
            Paterlini Road Steel Bike from 1982
            
                
                    
                        
                    
                    
                        
                    
                    
                        
                    
                
                
                
            
        
    
    
    
    
        
            Gianni Motta Personal 2001R
            Gianni Motta Road Steel Bike from 1989
            
                
                    
                        
                    
                    
                        
                    
                    
                        
                    
                
                
                
            
        
    
    
    
    
        © 2025 Funtrails. All rights reserved.

This website is a one-page bicycle showcase with two sections: one for my Paterlini bike and one for my Gianni Motta bike, each containing a gallery and text. The image galleries in the Bike sections are Bootstrap carousels that allow users to slide through images.

Then I create a new file structure for my node app. Within the funtrails directory I create a views directory. This is the location where my HTML part will be located. Then I create a package.json file just under funtrails. I copy the images folder and the index.html file from the HTML part above into the views folder of my new structure. The new structure looks like this.

funtrails
├── package.json
└── views
    ├── images
    │   ├── 2022-05-28-1-Paterlini-Umbau-80s-Ansicht.jpeg
    │   ├── 2022-05-28-2-Paterlini-Umbau-80s-Ansicht.jpeg
    │   ├── 2022-05-28-3-Paterlini-Umbau-80s-Ansicht.jpeg
    │   ├── 2022-05-28-4-Paterlini-Umbau-80s-Ansicht.jpeg
    │   ├── 2022-07-09-Gianni-Motta-1.jpeg
    │   ├── 2022-07-09-Gianni-Motta-2.jpeg
    │   └── 2022-07-09-Gianni-Motta-3.jpeg
    └── index.html

The package.json file has the following code.

{
  "name": "funrails-demo",
  "version": "1.0.0",
  "description": "nodejs funtrails website demo",
  "author": "Patrick Rottlaender ",
  "license": "MIT",
  "main": "app.js",
  "keywords": [
    "nodejs",
    "bootstrap",
    "express"
  ],
  "dependencies": {
    "express": "^4.16.4"
  }
}

For my node app I use express framework in version 4.16.4 or above. The code of my app will be in the main file app.js. Then I run npm install to install all dependencies.

npm install

This create a new folder for my node modules and a package-lock.json file.

funtrails
├── node_modules
├── package.json
├── package-lock.json
└── views
    ├── images
    │   ├── 2022-05-28-1-Paterlini-Umbau-80s-Ansicht.jpeg
    │   ├── 2022-05-28-2-Paterlini-Umbau-80s-Ansicht.jpeg
    │   ├── 2022-05-28-3-Paterlini-Umbau-80s-Ansicht.jpeg
    │   ├── 2022-05-28-4-Paterlini-Umbau-80s-Ansicht.jpeg
    │   ├── 2022-07-09-Gianni-Motta-1.jpeg
    │   ├── 2022-07-09-Gianni-Motta-2.jpeg
    │   └── 2022-07-09-Gianni-Motta-3.jpeg
    └── index.html

I create the main app.js file with the following code.

//Load the express framework
const express = require('express');

//create express app
const app = express();

//create Router instance
const router = express.Router();

//path for static content 
const path = __dirname + '/views/';

//set port 
const port = process.env.PORT || 8080;

//create Middleware
router.use(function (req,res,next) {
    console.log('/' + req.method);
    next();
  });

//create the route handlet for get
  router.get('/', function(req,res){
    res.sendFile(path + 'index.html');
  });

//app will use the static path and the router 
app.use(express.static(path));
app.use('/', router);

//app listens on localhost port 8080
app.listen(port, function () {
  console.log('nodejs funtrails demo app listening on port 8080!')
})

Let’s go through this Node.js code line by line.

require(‚express‘) loads the Express module. This allows us to use express functionalities in our application.
Calls the express() function to create an Express application. The app object will be used to define routes, middleware, and configure the server.
Creates a new router instance using express.Router(). The router allows grouping route handlers separately from the main app.
dirname refers to the directory of the current JavaScript file. Concatenating ‚/views/‘ results in a full path to the views directory. This will be used to serve static HTML files and images.
process.env.PORT checks if a port number is set in the environment variables. If not set, it defaults to 8080. This allows the application to use a dynamic port in cloud environments while using 8080 locally.
This middleware logs the HTTP request method (e.g., GET, POST). req.method returns the request type. next() passes control to the next middleware or route handler. Example logs when requests are made: /GET, /POST
Defines a route handler for GET / (the home page). Uses res.sendFile(path + ‚index.html‘) to send index.html from the views directory.
express.static(path): Serves static files (CSS, JS, images) from the views directory.
app.use(‚/‘, router): Registers the router for handling requests.
Starts the server on the specified port. Logs a message indicating that the server is running.

The final file structure is as follows.

funtrails
├── app.js
├── node_modules
├── package.json
├── package-lock.json
└── views
    ├── images
    │   ├── 2022-05-28-1-Paterlini-Umbau-80s-Ansicht.jpeg
    │   ├── 2022-05-28-2-Paterlini-Umbau-80s-Ansicht.jpeg
    │   ├── 2022-05-28-3-Paterlini-Umbau-80s-Ansicht.jpeg
    │   ├── 2022-05-28-4-Paterlini-Umbau-80s-Ansicht.jpeg
    │   ├── 2022-07-09-Gianni-Motta-1.jpeg
    │   ├── 2022-07-09-Gianni-Motta-2.jpeg
    │   └── 2022-07-09-Gianni-Motta-3.jpeg
    └── index.html

Run the app with node app.js.

node app.js

Bootstrap – Digitaldocblog

Bootstrap Website running as nodejs app

Paterlini

Gianni Motta Personal 2001R