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:
- Nodejs (https://nodejs.org/en/)
- Visual Studio (https://visualstudio.microsoft.com/)
- Sublime Text (Optional)
Prerequisites
- Javascript
- HTML
- 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):
- Make a NodePractice folder.
- Open that directory inside Terminal or Command Prompt.
- Write npm init in the terminal
- It will create a package.json file in your current directory.
- Write the command touch app.js in the terminal this will create a file with the name app.js or make the file manually.
- Now we have to install the external modules (express, nodemon, body-parser).
- 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.
- Type command npm install express nodemon body-parser
- Add “start”: “nodemon app.js” in the package.json file under “scripts”.
- Run command npm run start it should not give any error in the terminal.
Start coding
- Inside the app.js file, you can add the main code and follow the below folder pattern.
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.
