Firebase Express React Nodejs (FERN stack) Chating Application | (PWA) Full Stack application (tutorial part 1)
Published: 2022-01-23 14:50:43


![FERN STACK IMAGE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hd2r0ebpxoy4cwzmemew.jpeg)

## What is FERN Stack?
 FERN Stack is a Collection of Technology used to build an application it contain [Firebase](https://firebase.google.com), [ExpressJs](https://expressjs.com/), [ReactJs](https://reactjs.org/) and [Nodejs](https://nodejs.org/en/). 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](https://en.wikipedia.org/wiki/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.


![Preview Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/doj9no09s6xyajp39022.jpeg)

![Preview Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pkxk1eflq7y0d9ju5ijr.jpeg)

![Preview Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yyrpzmqotdum4u0fitu.jpeg)


![Preview Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kl9mhcrauo2s42pibgkg.jpeg)
![Preview Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jvp2orimb4whwfy6s08.jpeg)

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](https://github.com/Nktech-Official/message) . you can also check  my  [github](https://github.com/Nktech-Official/) 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 

![Download NodeJs Lts](https://blogger.googleusercontent.com/img/a/AVvXsEg_R0h_G9QB5Ko7QJwIUDWktDv_3nf1yOIZZ7Cclyv4zKc06xqY8tPgL9007E5XSJcxE6zDYf79Nu4MWshcVEE37J3otqM82Ad686sdNWpk_bKE1U9Ew22Za0Y054Pgj-boK9CD6qSh5RNkn2lUJHCflVhvHa86ZlzpmVKgogTez5_Ylp1OCcAiHNsiqA=s1560)

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

![Vs Code](https://blogger.googleusercontent.com/img/a/AVvXsEhONFVhnfhh48fJUJk0fSRtg_SzO0LkhCxQGALd07W_CtRS7ak68IreWysk_RrIY6wakJ7PpWfMubDVnK_OpjntwCzrgec7hY1BZkfvFPGmtIfON4uhxk6ZErctN5lV9cHU_RPcMOq1HNkGZhQ-awr6LJXgxBsb5bZn48ak_bUB4ve9Tr-z3ajchmZjVw=w640-h230)

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

![vs code image](https://blogger.googleusercontent.com/img/a/AVvXsEgwReqJHyW5i2_7YtuXJroxY-ijvb9bRx_Vlt0hAdyhO3rPA8eP57b67GLnDAl3047c0u1kh7rTUxYVVjuV2MWNhGO1sUPs6s4jnm7-CslukBspi521wZ9tiXjzVWvnIapWuNI5GIAiFGNz-RObro_Ee6CmAr7feHT3-emfk9WRHeXpsK6vzmjLlr2b0g=w640-h310)

add this two lines in the script tag of package.json of root folder 
![package.json](https://blogger.googleusercontent.com/img/a/AVvXsEjzPwwS3ybgSOsWng4Eq-GbxYdXxIxTU7V2tYKRM38U6tvjouJQw7y_Ivi8N3eVJChCZs8OjgJc_dFpt7f9IL5L3fJ6G8bHUaD73-1HfSTN6HPBPA6K7_e-7ODotOECHUCk2v1YgEaAaSKx0Zrxu0ejuiih5IqqxEXrGNn0M4XuleMVURP1rlWZeAiekw=w640-h254
 )


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

![file structre](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zt25lnolhxzi3crchau.png)
 

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 

![file vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bjkbhkhm5jqq3dwban4.png)
 

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 .

![package.json dependencies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjm4x9gd51t5b915xobt.png)
 

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
2. next two liens import express and express-session package used to make server and handel server session respectively.
3. Then we initialize our express app in the next line.
4. then we have configured dotenv in the next line
5. 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 
6. Then we have added middle-ware's `express.json()` and `session()`. 
7. `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 

![Before moving](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jknj76v6ddlvj0te1uj.png)
 
After Moving
![After Moving](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtcjsswkjh73r0io7b3m.png)
 



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

![.gitignore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4m0dwih6jz7e4e91y27d.png)
 

by doing this git will ignore `.env` file .

**Note:- Read full Article [here](https://nktechnicals.blogspot.com/2022/01/firebase-express-react-nodejs-fern.html)**