Firebase Express React Nodejs (FERN stack) Chating Application | (PWA) Full Stack application (tutorial part 1)

What is FERN Stack?

FERN Stack is a Collection of Technology used to build an application it contain Firebase, ExpressJs, ReactJs and Nodejs. In this application we are going to use firebase as database and for authentication servise . ExpressJs for backend server and ReactJs for Frontend.
We will also use Heroku for hosting our WEB APP.

About our Project

.
we are going to build a Chat application with end-to-end encryption. This application can be installed on android devise like native app that's the power of PWA. Here is the demo of what we are going to build.

So this is the app we are going to build this app exactly look like as show in the above images. for the complete sourse code check the github repositry . you can also check my github account for more such projects.

What's in this part (Part 1)?

In this Part we will setup our environment for FERN Stack, and create file structure of our app. we will also build our homepage. you can download all the images/icon and resourse from the github repo.

Download NodeJs.

First of all we need nodjs installed on our pc. you can download it from https://nodejs.org/en/download/ download LTS version

If you go any error in installation please leave a comment i will reach you as soon as possible.
Project Setup.

Create a directory and open a terminal inside the directory .
run the following command to create your react app.

1. npx create-react-app message-frontend --template cra-template-pwa

Here message-frontend is the name of application you can choose any name of your choise.

open the current directory in the code editor i am going to use VS-Code .
Note:- open the directory containig folder message-forntend and not the message-frontend folder itself.

This will look something like this

Now open Terminal and run command

npm init -y

this will initialize a nodejs prject outside our app the idea is to setup backend in the parent folder of our react frontend now your project look's something like this

add this two lines in the script tag of package.json of root folder

Create a file named index.js in root of the project.
Create a file name .env for writing environment variables

Now let's install some packages using yarn but before that we need to install yarn using npm. yarn and npm are both the package manager for nodejs but yarn is more optimized so we are going to use yarn you can use npm all the command used with yarn can also be used with npm.

use command's

npm install -g yarn
yarn add express express-session firebase-admin dotenv
now your file structure looks like this

if you got package-lock.json file then delete it . this can happen if you used npm command but if you are planning to use npm then don't delete it.

your package.json file is updated after the command you run check these linese are added inside dependencies .

add following code inside your index.js file

const dotenv = require("dotenv");
const express = require("express");
const session = require("express-session");
const app = express();
dotenv.config()
const port = process.env.PORT || 8081;
app.use(express.json());
app.use(
    session({
        secret: process.env.serverSession_secret, //Read's value from .env file 
        resave: false,
        saveUninitialized: true,
        cookie: { expires: new Date(253402300000000) }
    })
);

app.listen(port, () => {
    console.log(`App listening on http://localhost:${port} !`);
});

1.First line import's dotenv the packages help us to read value from .env file used to set environment variables

1. next two liens import express and express-session package used to make server and handel server session respectively.
2. Then we initialize our express app in the next line.
3. then we have configured dotenv in the next line
4. After that we have added port number which reads from .env file if none is given it use 8081 as default port to run the server
5. Then we have added middle-ware's express.json() and session().
6. express.json() parse the request body to json format and session middle ware used to handle session .

Add this line in your .env file here the environment variables are set in the form of key-value pair
like thie key=value .

serverSession_secret=my_secret_key_genereted_using_some_Hash_function

here serverSession_secret is the key and my_secret_key_genereted_using_some_Hash_function
is teh value here the value is suppose to be secrete so you can choose any secret value and don't push this .env file to the git repositry you can move the file ./message-frontend/.gitignore to the root of the
Before moving

After Moving

and add the .env file to .gitignore file like this:

by doing this git will ignore .env file .

Note:- Read full Article here