BACKEND

 INCLUDES - it is used to create sub-templates syntax- <%- include("includes/head.ejs") here includes- Folder name head.ejs -file name insta.ejs <%- include ( "includes/head.ejs" ); %>   < body >     < h1 > Welcome to the page of @ <%= data . name %> </ h1 >     < button > Follow </ button >     < button > Message </ button >     < p > Followers: <%= data . followers %> &nbsp;&nbsp; Following: <%= data . following %> </ p >     <!-- LOOP FOR POSTS  -->     <% for ( let post of data . posts ){ %>     < img src = " <%= post . image %> " />     < p > Likes: <%= post . likes %> &nbsp;&nbsp; comments: <%= post . comments %> </ p >     <% } %>     <%- include ( "includes/footer.ejs" ); %>   </ body ...

We use the following statement to serve static fields  app.use(express.static("public")); app.use(express.static(path.join(__dirname,"public"))); index.js const express = require ( "express" ); const app = express (); const path = require ( "path" ); const port = 8080 ; app . use ( express . static ( "public" )); app . use ( express . static ( path . join ( __dirname , "public" ))); app . set ( "view engine" , "ejs" ); app . set ( "views" , path . join ( __dirname , "/views" )); app . get ( "/ig/:username" , ( req , res ) => {   let { username } = req . params ;   const InstaData = require ( "./data.json" );   const data = InstaData [ username ];   if ( data ) {     res . render ( "insta.ejs" , { data });   } else {     res . render ( "error.ejs" );   } }); app . listen ( port , () => {   console . log ( `server is l...

 form the "./data.json" info create a insta page for the users data.json {   "cats" : {     "name" : "cats" ,     "followers" : 25000 ,     "following" : 5 ,     "posts" : [       {         "image" : "https://plus.unsplash.com/premium_photo-1677545182067-26ac518ef64f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8Y2F0c3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60" ,         "likes" : 200 ,         "comments" : 17       },       {         "image" : "https://images.unsplash.com/photo-1592194996308-7b43878e84a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y2F0c3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60" ,         "likes" : 312 ,         "comments" : 19       },       {     ...

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Instagram page </ title > </ head > < body >     < h1 > Welcome to the page of @ <%= username %> </ h1 >     < button > Follow </ button >     < button > Message </ button >     < h3 > Followed By </ h3 > < ul >     <% for ( name of followers ) { %>     < li > <%= name %> </ li >     <% } %> </ ul > </ ul > </ body > </ html > app . get ( "/ig/:username" ,( req , res ) => {     const followers = [ "abhii" , "ash" , "bharath" , "vinay" ];     let { username } = req . params ;     res . render ( "insta....

  WE USE THE TAG  "<%" <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > RollDice </ title > </ head > < body >     < h1 > dice value: <%= diceVal %> </ h1 >     <% if ( diceVal == 6 ){ %>         < h2 > TRY AGAIN!!! </ h2 >     <% } %> </ body > </ html >

 insta.ejs <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Instagram page </ title > </ head > < body >     < h1 > Welcome to the page of @ <%= username %> </ h1 >     < button > Follow </ button >     < button > Message </ button > </ body > </ html > index.js const express = require ( "express" ); const app = express (); const path = require ( "path" ); const port = 8080 ; app . set ( "view engine" , "ejs" ); app . set ( "views" , path . join ( __dirname , "/views" )); app . get ( "/ig/:username" ,( req , res ) => {     let { username } = req . params ;     res . render ( "insta.ejs" ,{ username }); }); app . listen...

 We can pass data using EJS tags rolldice.ejs <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > RollDice </ title > </ head > < body >     < h1 > dice value: <%= diceVal %> </ h1 > </ body > </ html > index.js const express = require ( "express" ); const app = express (); const path = require ( "path" ); const port = 8080 ; app . set ( "view engine" , "ejs" ); app . set ( "views" , path . join ( __dirname , "/views" )); app . get ( "/rolldice" ,( req , res ) => {     let diceVal = Math . floor ( Math . random () * 6 ) + 1 ;     res . render ( "rolldice.ejs" ,{ diceVal }); }) app . listen ( port , () => {   console . log ( `server is liste...

 Interpolation Syntax refers to the embedding expressions into marked up text in HTML whatever we write as a code it prints in the same way, but by using EJS we can convert into dynamic  using EJS tags  <%  'Scriptlet' tag, for control-flow, no output <%_  ‘Whitespace Slurping’ Scriptlet tag, strips all whitespace before it <%=  Outputs the value into the template (HTML escaped) <%-  Outputs the unescaped value into the template <%#  Comment tag, no execution, no output <%%  Outputs a literal '<%' %>  Plain ending tag -%>  Trim-mode ('newline slurp') tag, trims following newline _%>  ‘Whitespace Slurping’ ending tag, removes all whitespace after it <h1>Demo for INTERPOLATION SYNTAX 1+2</h1>     <h2> <%= 1 + 2 %> </h2>     <h1>Demo for INTERPOLATION SYNTAX  "Abhii"</h1>     <h2> <%= "Abhii" %> </h2> ...

 Whenever we are running the server from another directory other than the directory in which the index.js exists an error occurs inorder to solve this we use views directory use this code whenever we use views to run it from different directories const path = require ( "path" ); app . set ( "views" , path . join ( __dirname , "/views" )); use it is as default const express = require ( "express" ); const app = express (); const path = require ( "path" ); const port = 8080 ; app . set ( "view engine" , "ejs" ); app . set ( "views" , path . join ( __dirname , "/views" )); app . get ( "/" , ( req , res ) => {   res . render ( "home.ejs" ); }); app . listen ( port , () => {   console . log ( `server is listening on port ${ port } ` ); }); if we run the server from NODE JS directory ,in the teriminal the command should be : nodemon EJS/index.js

Embedded Java Script Templates used for creatng a template that can be used for multiple paages(to display) just like for every instagram user there is a different profile page . it is not that every page is coded seperately. We use these templates create a directory EJS within the same directory install express and ejs packages create another in the name of VIEWS in this create  a file home.ejs index.js const express = require ( "express" ); const app = express (); const port = 8080 ; app . set ( "view engine" , "ejs" ); app . get ( "/" ,( req , res ) => {     res . render ( "home.ejs" ); }); app . listen ( port ,() => {     console . log ( `server is listening on port ${ port } ` ); }); home.ejs <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" ...

 req.query() - used to get the query string(searched) app . get ( "/search" ,( req , res ) => {   let { q } = req . query ;   // console.log(q);   if ( ! q ){     res . send ( "<h1>nothing searched</h1>" );   }   res . send ( `<h1>search results for ${ q } </h1>` ); });

 Path Parameters these are variables that change simply like username for insta declared using ":" app . get ( "/:username/:id" ,( req , res ) => { let { username , id } = req . params ; console . log ( req . params ); let htmlStr = `<h1>Welcome to the page of @ ${ username } .</h1>` ;   res . send ( htmlStr ); })

 NODEMON it is a package which is used to automatically restart the server whenever we make a change in the code to install it COMMAND: npm install nodemon installing the package globally is useful npm install -g nodemon app . get ( "/" , ( req , res ) => {   res . send ( "this is the root path" ); }); previously the code was app . get ( "/" , ( req , res ) => {   res . send ( "you searhed for root path" ); });

 app.get(path,callback function) const express = require ( "express" ); const app = express (); let port = 3000 ; app . listen ( port , () => {   console . log ( `app is listening on port ${ port } ` ); }); app . get ( "/" , ( req , res ) => {   res . send ( "you searched for root path" ); }); app . get ( "/orange" , ( req , res ) => {   res . send ( "you searched for orange path" ); }); app . get ( "/apple" , ( req , res ) => {   res . send ( "you searched for apple path" ); }); app . get ( "*" , ( req , res ) => {   res . send ( "This path doesn't exist" ); }); app . post ( "/" , ( req , res ) => {   res . send ( "you sent a post request" ); });