Hello, hope you’ll are good. Today we’ll do the second part of our fullstack e-com website series. In this part, you’ll make a node server to run website on localhost, then you’ll learn to do form validations and storing user in firestore. In total, in this video we’ll make signup page/ login page, logout feature and sellers dashboard.

NPM Init

Start with server, open the previous code folder in terminal or cmd prompt. And run npm init. This will initialize the NPM to the project. After that, install some packages by running this command.

npm i express.js nodemon firebase-admin bcrypt

1. express.js – is to create a server
2. nodemon – is to run server continuously.
3. firebase-admin – is to access firebase from backend.
4. bcrypt – is to encrypt the user’s password before storing it inside our database.

Once you are done with installation. You’ll see package.json on your directory. Open the file and changes in scripts object.

"scripts": {
    "start": "nodemon server.js"
}

This will make a start command for use to use with NPM. Now if you haven’t created a server.js file. Make one. And let’s make the server.

Server

Open server.js file. And start by importing the packages we just installed.

// importing packages
const express = require('express');
const admin = require('firebase-admin');
const bcrypt = require('bcrypt');
const path = require('path');

We didn’t installed the path package/library as it is a default package come with nodeJS. path allow to access the path or do path related stuffs.

// declare static path
let staticPath = path.join(__dirname, "public");

Make public folder’s path a static path. What is static path ? Static path is just a path which tells server where it has to look for the files.

//intializing express.js
const app = express();

//middlewares
app.use(express.static(staticPath));

app.listen(3000, () => {
    console.log('listening on port 3000.......');
})

In above code, I am make a express server and listening for requests on port 3000.

Make / , /404 routes.

//routes
//home route
app.get("/", (req, res) => {
    res.sendFile(path.join(staticPath, "index.html"));
})

Start your server now by running npm start on terminal. Open localhost:3000 on your chrome to view the page. And if the server is working, you’ll see the index.html page.

For 404 route. We’ll use middle ware. Make sure to add this middle ware at the very bottom of the server. Otherwise you’ll get 404 page even if you are on some defined route.

// 404 route
app.get('/404', (req, res) => {
    res.sendFile(path.join(staticPath, "404.html"));
})

app.use((req, res) => {
    res.redirect('/404');
})

You can notice, I have made a separate 404 page and redirecting user on making request to any unknown route. Well why I did that? I did that because, if I deliver the 404 page through middle ware. I’ll definitely get the page, but if we go the nested routes, I’ll get page without styles.