How to make a Login Page Using node. Part1

To make a login page we will be using, JavaScript, Node.js, MongoDB, and a lot of npm frameworks.

Two online tools I recommend is groom.ide and cloud9 the difference is cloud9 is run by AWS (Amazon Web Services) and therfore requires a credit card to login but it is completely free and groom.ide doesn’t require a credit card and is a little bit slower than cloud9.

In this tutorial I will use cloud9 it doesn’t matter just do the same thing I do in groom.

Here are the links.

Also remember to save your file

Ctrl S

goormIDE - A Powerful Cloud IDE Service

AWS Cloud9 Amazon Web Services

BTW before we get started I have a good example on my Github please check it out and follow me and feel free to join my discord and ask any questions let's get into it.

Join the Code Island Discord Server!

So first you want to open up the terminal and type these commands

mkdir main
cd main
npm init

Now let's stop there after npm init just hit enter until you get back to typing your own commands again.

Now type

touch index.js
mkdir views

And for now, we are done with cmds here is what it should have looked like:

Commands part 1

So open the file index.js in the file directory on the left and then type this in.

var express = require("express");
var app = express();
app.get("/", function(req,res){
 res.send("Works");
});
app.listen(process.env.PORT, function () {
  console.log('Example app');
});

Now we forgot an important command in the terminal copy and paste this line into the terminal.

npm install body-parser ejs express mongoose passport passport-local fs path

Copy and paste that into your terminal. Once its done installing open your terminal again and type:

node index.js

Now in cloud9 if you hit preview and then preview run on the top it will open up a website just copy and paste url and you should see “Works”.

I am not familiar how it works in groom but I am pretty sure you just put the ip address in your browser which can be found on the dashboard.

And now we are going to edit the index.js file

var express = require("express");
var app = express();
app.get("/", function(req,res){
 res.send("index.ejs");
});
app.listen(process.env.PORT, function () {
  console.log('Example app');
});

In the terminal

cd views
touch index.ejs
touch login.ejs
touch signUp.ejs

Open the index file in your text editor. Type

<h1>Home</h1>
<a href="/login">Login</a>

<a href="/signUp">SignUp</a>

Now open login.ejs type

<h1>Login</h1>

Now open SignUp

<h1>SignUp</h1>

Then make sure your index.js file looks like this

var express = require("express");
var app = express();
app.get("/", function(req,res){
 res.send("index.ejs");
});
app.get("/login", function(req,res){
 res.send("login.ejs");
});
app.get("/signUp", function(req,res){
 res.send("signUp.ejs");
});
app.listen(process.env.PORT, function () {
  console.log('Example app');
});

And run it with

node index.js

This is a lot of info for one

I am working on part 2 which will have mongodb and much much more

This tutorial will only be 3 parts and at the end you will have a login page

I am trying to teach you the fundamentals instead of just giving you the code I am walking you guys through steps to become good programmers.

Follow me if you want to be updated when I post the new one

If you need help join my discord or just leave a comment

Thank you,

bily101