Aakash’s Blog
Creating a login page using Bootstrap and Express JS

Creating a login page using Bootstrap and Express JS

Aakash's photo
Aakash
·

3 min read

Let's begin by opening our Terminal.

cd Desktop
mkdir LoginPage
cd LoginPage
touch Index.html server.js 
code .

now let's add our packages

npm i express // express js module 
npm i nodemon -g // for local host
nodemon .
start msedge

Once our Browser is open, navigate to the Bootstrap website => Examples and pick up the custom template named "Sign-In". Open the Sign-In Example in your browser tab and right-click => View Page Source. Copy the whole Source Code and Paste it into your index.html.

Once done. Open your Index.html and change the javascript and CSS source to the latest Bootstrap's CDN which can be found on their website.

Now, create an External styles.css sheet and copy the inline style from index.html and paste it into styles.css.

Now navigate to where it says "<!-- Custom styles for this template -->", just below this line is an src named "sign-in.css". Click on it and copy the CSS code from it and paste it into your styles.css file.

change the route from "sign-in.css" to "/styles.css" to have your CSS file linked to your HTML.

Now, navigate to "<form>" Tag and add method = "post" and action ="/". in it for your page to send the POST request for our JS to interact with it.

navigate below to "<input>" Tag of email and pass and add a name ="email" and "password" in both respectively, this will allow us to read values from them using express.

If everything works out fine then this is what you should be seeing.

now let's move on to our JS file. Open server.js and import the express module by typing

const express = require(`express`);
const app = express();
app.use(express.urlencoded({extended:true}));
app.use(express.static(__dirname));

here we have both imported the express module and initialized it inside our app const and also we have called app.use method twice,

  • The first one is a middleware function in Express.js that is used to parse incoming HTTP requests with url-encoded payloads.

  • By using express.static() middleware, the Express app is able to serve static files

    now let's begin with coding

app.listen(3000,function(){
  console.log(`server is online`)};
)

by using app.listen, we have started a local host with an address of 3000.

app.get("/",function (req,res){
  res.sendFile(__dirname +`index.html`)};
)

Here we are using app.get() method to send our index.html file whenever a user navigates to our homepage.

app.post("/",function (req.res){
  const email = req.body.email
  const password = req.body.password
  res.send(`The name that you entered is ${email} and the password is ${password};}
)

now by using the app.post() method, we are posting a request to our index.html whatever the said user enters in the email and password field, saving it into a const email and const password variable and sending it back using res.send() for the user to see.

If you have done everything correctly then after entering the details and pressing the button, you should be seeing this :

And Voila, we have successfully implemented a basic login system using Bootstrap.

You can tweak this much further and also can improve upon it by using services like Mailchimp to host it on the internet. Which we will be doing in the future.

Node.jsBootstrapExpressnode_modulesJavaScript