Creating a Layout

Dear Sciaku Learner you are not logged in or not enrolled in this course.

Please Click on login or enroll now button.

If you have any query feel free to chat us!

Happy Coding! Happy Learning!

Lecture 417:- Creating a Layout

Creating a layout involves defining a common structure for your web application and using it as a template for all your pages. We'll demonstrate how to create a layout using EJS, a popular templating engine for JavaScript, in an Express.js application.

Assuming you have Node.js, npm (Node Package Manager), and Express.js installed, follow these steps:

Step 1: Set Up a New Project Create a new directory for your project and navigate into it.

bashCopy code

mkdir layout-demo cd layout-demo

Step 2: Initialize a New Node.js Project Run the following command to initialize a new Node.js project and create a package.json file.

bashCopy code

npm init -y

Step 3: Install Express and EJS Install Express.js and EJS templating engine using npm.

bashCopy code

npm install express ejs

Step 4: Create the Layout File In your project directory, create a folder named views to store your EJS templates. Inside the views folder, create a file named layout.ejs.

bashCopy code

mkdir views touch views/layout.ejs

Edit the layout.ejs file:

htmlCopy code

 <!DOCTYPE html> <html> <head> <title><%= title %></title> </head> <body> <header> <h1>Welcome to our website</h1>  </header> <main>  <%- body %> </main> <footer> <p>© <%= year %> Your Website. All rights reserved.</p>  </footer> </body> </html>

In this layout, we use <%- body %> to indicate the location where the content of individual pages will be inserted.

Step 5: Create Individual Pages Create individual EJS files for your website pages inside the views folder. For example, you can create an index.ejs file as the home page and an about.ejs file as the about page.

bashCopy code

touch views/index.ejs touch views/about.ejs

Edit the index.ejs file:

htmlCopy code

 <h2>Welcome to our Home Page!</h2> <p>This is the main content of the home page.</p>

Edit the about.ejs file:

htmlCopy code

 <h2>About Us</h2> <p>This is the main content of the about page.</p>

Step 6: Set Up an Express Server Create an app.js file in your project directory to set up an Express server.

bashCopy code

touch app.js

Edit the app.js file:

javascriptCopy code

// app.js const express = require('express'); const app = express(); const path = require('path'); app.set('view engine', 'ejs'); app.set('views', path.join(__dirname, 'views')); // Middleware to render the layout for all routes app.use((req, res, next) => { res.locals.year = new Date().getFullYear(); next(); }); app.get('/', (req, res) => { res.render('index', { title: 'Home' }); }); app.get('/about', (req, res) => { res.render('about', { title: 'About Us' }); }); const port = 3000; app.listen(port, () => { console.log(`Server is running on http://localhost:${port}`); });

Step 7: Start the Server Run the following command to start the Express server:

bashCopy code

node app.js

Step 8: Test the Application Open your web browser and visit http://localhost:3000 for the home page and http://localhost:3000/about for the about page. You should see the content of each page embedded within the layout.

Congratulations! You have successfully created a layout using EJS and Express.js. The layout provides a consistent structure for your web application, and you can easily add more pages without duplicating the common elements. This approach enhances code organization and provides a unified user experience across the website.

Creating a Layout

Please Click on login or enroll now button.

Lecture 417:- Creating a Layout

Comments: 2

Frequently Asked Questions (FAQs)