Making Server with node and Express

Installation

If this is a brand new project, make sure to create a package.json first with the npm init command.

Installation is done using the npm install command:

$ npm install
$ npm install express

now we got node_modules and package-lock.json file.

also install body-parser and cors as a middleware

$ npm install body-parser

$ npm install cors

Express Code

const express = require(‘express’);const bodyParser = require(‘body-parser’);const cors = require(‘cors’);const app = express();let users = [];app.use(cors());app.use(bodyParser.urlencoded({extended:true}));app.use(bodyParser.json());app.post('/user',(req,res) =>{const user =req.body;console.log(user);users.push(user);res.send('user is added to the database');});app.listen(3001,()=>console.log('connected to port 3001'))

This is an Express.js Server code.To start the Code,go back to the command line and run:node file-name.js # or node your-filename.js.

Keep in mind that you can change the port number to any four digits number you want.I’m using port 3001 here.

you will see something like this: “connected to port 3001”

The HTML File

<!DOCTYPE html>
<html>
<head><title>Login Screen</title></head>
<body>
<div class = “Login-box”>
<h1>&nbsp; Login</h1>
<form action=”http://localhost:3001/user" method=”POST”><div class=”textbox”></div>
<input type=”text” name=”username” placeholder=”User name”>
<div class=”textbox”></div>
<input type=”password” name=”Password” placeholder=”Password”><br>
<button type=”submit” class=”bton”>Submit</button></br></form>
</div>
</body>
</html>

Keep in mind the form action must be the link of the localhost server which is running in your browser. And the method must be post which is to send details to server.

Result

React Native Developer | UI/UX Designer | Python |Tableau |AR |Arduino #IOSdeveloper