NodeJS making a simple web application (For Beginners)

This application purpose is to provide the setup for rendering the HTML pages for beginners.

Software requirements:

  1. Nodejs (https://nodejs.org/en/)
  2. Visual Studio (https://visualstudio.microsoft.com/)
  3. Sublime Text (Optional)

Prerequisites

  1. Javascript
  2. HTML
  3. CSS

If new to all these things follow (https://www.w3schools.com/)

NodeJS: It is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.

Steps to follow (Pre Code SetUp):

  1. Make a NodePractice folder.
  2. Open that directory inside Terminal or Command Prompt.
  3. Write npm init in the terminal
  4. It will create a package.json file in your current directory.
  5. Write the command touch app.js in the terminal this will create a file with the name app.js or make the file manually.
  6. Now we have to install the external modules (express, nodemon, body-parser).
  7. Express: It is a web application framework, Nodemon: helps to restart the node application when the file changes and the Body-parser: module parses the JSON, buffer, string and URL encoded data submitted using an HTTP POST request.
  8. Type command npm install express nodemon body-parser
  9. Add “start”: “nodemon app.js” in the package.json file under “scripts”.
  10. Run command npm run start it should not give any error in the terminal.

Start coding

  1. Inside the app.js file, you can add the main code and follow the below folder pattern.
Folder Structure for project Inside NodePractice folder

2. Add code in file app.js file

const path = require(‘path’);

const express = require(‘express’);

const bodyParser = require(‘body-parser’);

const app = express();

// Creating an app using express framework

const shopRoutes = require(‘./routes/shop’);

//added Routes folder for shop file

app.use(bodyParser.urlencoded({extended: false}));

app.use(express.static(path.join(__dirname, ‘public’)));

app.use(shopRoutes);

app.use((req, res, next) => {

res.status(404).sendFile(path.join(__dirname, ‘views’, ‘404.html’));

});

app.listen(3000);

3. Add code in file shop.js in routes folder

const path = require(‘path’);

const express = require(‘express’);

const rootDir = require(‘../util/path’);

const router = express.Router();

router.get(‘/’, (req, res, next) => {

res.sendFile(path.join(rootDir, ‘views’, ‘shop.html’));

});

module.exports = router;

4. Add code in file path.js in util folder

const path = require(‘path’);

module.exports = path.dirname(process.mainModule.filename);

5. Add code in file main.css inside public/css folder

body {padding: 0; margin: 0; font-family: sans-serif; }

main {padding: 1rem;}

.main-header { width: 100%; height: 3.5rem; background-color: #dbc441; padding: 0 1.5rem;}

.main-header__nav { height: 100%; display: flex; align-items: center;}

.main-header__item-list { list-style: none; margin: 0; padding: 0; display: flex; }

.main-header__item { margin: 0 1rem; padding: 0;}

.main-header__item a { text-decoration: none;color: black;}

.main-header__item a:hover,

.main-header__item a:active,

.main-header__item a.active {color: #3e00a1;}

6. Add code in file 404.html inside the views folder

<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8"><meta name=”viewport” content=”width=device-width, initial-scale=1.0"><meta http-equiv=”X-UA-Compatible” content=”ie=edge”><title>Page Not Found</title><link rel=”stylesheet” href=”/css/main.css”></head><body><header class=”main-header”><nav class=”main-header__nav”><ul class=”main-header__item-list”><li class=”main-header__item”><a class=”active” href=”/”>Shop</a></li><li class=”main-header__item”><a href=”/add-product”>Add Product</a></li></ul></nav></header><h1>Page Not Found!</h1></body></html>

7. Add code in file shop.html inside the views folder

<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8"><meta name=”viewport” content=”width=device-width, initial-scale=1.0"><meta http-equiv=”X-UA-Compatible” content=”ie=edge”><title>Page Not Found</title><link rel=”stylesheet” href=”/css/main.css”></head><body><header class=”main-header”><nav class=”main-header__nav”><ul class=”main-header__item-list”><li class=”main-header__item”><a class=”active” href=”/”>Shop</a></li><li class=”main-header__item”><a href=”/add-product”>Add Product</a></li></ul></nav></header><h1>Edit this page</h1></body></html>

8. Inside the browser type http://localhost:3000/ that’s all.

9. You have got the basic setup for development.

10. This is not a complete code but it provides setup maybe you are looking for rendering the HTML pages.