DEV Community

Cover image for Connect Server with Express Engine- EJS Work as a Frontend
Deepak Jaiswal
Deepak Jaiswal

Posted on

2 1 1 1 1

Connect Server with Express Engine- EJS Work as a Frontend

many of user does not understand how we create our data to frontend in react so this article help for you.

first we install

npm install ejs

then set some cofigurations in your project

  • first make folder views app.set('view engine','ejs');

index.ejs


`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Express Engine</title>
</head>
<body>
    <%= heading  %> 
</body>
</html>`
Enter fullscreen mode Exit fullscreen mode

in our index.js we simple render the page index.ejs

`app.get('/',(req,res)=>{

   res.render('index.ejs',{heading:"first Page"});
})`
Enter fullscreen mode Exit fullscreen mode

EJS work as a component based like in react

simply use include file

include('header.ejs')

some developers are think ejs is tough for us but dont worry about this is a simple like you work on html but some operation map array of content then use it like you use php as server .
<% array.forEach(item=>{}) %>`

we can do everything using ejs.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (3)

Collapse
 
deepakjaiswal profile image
Deepak Jaiswal

<!DOCTYPE html>











Home





<% if(message){ %>

<%= message %> <%=status %>



<%} %>










Collapse
 
opeolluwa profile image
ADEOYE ADEFEMI OPEOLUWA

Been thinking about using ejs and express to build an app. This sorta give the motivation

Collapse
 
deepakjaiswal profile image
Deepak Jaiswal

Yeah that's it

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay