How to Pass variables to JavaScript in Express JS ? Last Updated : 14 Mar, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Express is a lightweight framework that sits on top of Node.js’s web server functionality to simplify its APIs and add helpful new features. It makes it easier to organize your application’s functionality with middleware and routing. When working with Express.js you may encounter scenarios where you need to pass variables from your server-side code to client-side JavaScript. In this article will guide you through the steps of passing variables to JavaScript in Express.js with examples. ExpressJS seamlessly integrates with template engines like EJS (Embedded JavaScript), allowing you to embed JavaScript code directly into HTML templates. This makes it easy to pass variables from the backend to the frontend during template rendering. Steps to create Express ApplicationStep 1: Initialize your project via the following command npm init -yStep 2: Install ExpressJS and Embedded JavaScript (EJS) npm install express ejs Project Structure: The updated dependencies in packages.json file will look like: "dependencies": { "ejs": "^3.1.9", "express": "^4.18.3"}Example 1: This Example demonstrates how to pass variables to JS in ExpressJS HTML <!-- views/index.ejs --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Express.js Variable Passing</title> </head> <body> <h1>Welcome to Express.js Variable Passing</h1> <script> const greeting = "<%= message %>"; console.log(greeting); </script> </body> </html> JavaScript //app.js import express from "express"; const app = express(); const port = 3000; app.set("view engine", "ejs"); app.get("/", (req, res) => { const message = "Hello from Express!"; res.render("index", { message }); }); app.listen(port, () => { console.log(`Server is running on port ${port}`); }); Output: Example 2: In this example we are making a simple HTTP request to a public JSONPlaceholder API and passing variable HTML <!-- views/index.ejs --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Express.js Dynamic Book List</title> </head> <body> <h1>Dynamic Book List</h1> <ul> <% books.forEach(book=> { %> <li> <%= book.title %> by <%= book.author %> </li> <% }); %> </ul> </body> </html> JavaScript //app.js import express from "express"; const app = express(); const port = 3001; app.set("view engine", "ejs"); app.get("/", (req, res) => { const books = [ { title: "The Great Gatsby", author: "F. Scott Fitzgerald" }, { title: "To Kill a Mockingbird", author: "Harper Lee" }, { title: "1984", author: "George Orwell" }, ]; res.render("index", { books }); }); app.listen(port, () => { console.log(`Server is running on port ${port}`); }); Output: Comment More infoAdvertise with us Next Article How to use JavaScript Variables in Ruby? S shakirradfcz Follow Improve Article Tags : Web Technologies Node.js Express.js EJS-Templating Language View Engine +1 More Similar Reads How to Access EJS Variable in Javascript Logic ? EJS stands for Embedded JavaScript. It is a templating language used to generate dynamic HTML pages with data from the server by embedding JavaScript code. Features of EJSDynamic Content: Based on data from servers or other sources, we can generate a dynamic HTML template.Partial Templates: Partials 3 min read How to use JavaScript Variables in Ruby? JavaScript and Ruby are two powerful programming languages used extensively in web development. While each language has its own set of features and capabilities, there are times when developers may need to integrate functionalities from one language into the other. One common scenario is using JavaS 4 min read How to pass Variable to inline JavaScript using EJS Template Engine? In the EJS templating engine, we can pass variables to inline JS within our HTML templates. We can use the '<%= variable %>' syntax, where we can embed server-side variables directly into the client-side scripts. In this article, we will explore the detailed process to pass a variable to inlin 2 min read How to pass variables to the next middleware using next() in Express.js ? The following example covers how to pass variables to the next middleware using next() in Express.js.Approach:We cannot directly pass data to the next middleware, but we can send data through the request object.[Middleware 1] [Middleware 2] request.mydata = someData; -------> let dataFromMiddlewa 2 min read How to use Ejs in JavaScript ? EJS or Embedded Javascript Templating is a templating engine used by Node.js. The template engine helps to create an HTML template with minimal code. Also, it can inject data into the HTML template on the client side and produce the final HTML. Installation StepsInstall the module using the followin 3 min read How to Use Embedded JavaScript (EJS) as a Template Engine in Express JS ? Embedded JavaScript (EJS) is a simple templating language that helps us to generate HTML markup with plain JavaScript. It's commonly used with Node.js to create dynamic web pages. It also helps to incorporate JavaScript into HTML pages. Approach to use EJS as Template Engine in Express JS:Install EJ 2 min read Like