Welcome to our EJS Templates Tutorial
In this tutorial, we will look at how to create EJS templates with Node.js and Express.js, using Bootstrap 5 for styling.
Step 1: Setting up Node.js and Express.js
First, make sure you have Node.js and Express.js installed on your system. If not, you can install them by running the following commands:
npm install node
npm install express
Step 2: Installing EJS
Next, install EJS by running the following command:
npm install ejs
Step 3: Creating EJS templates
Now, create a new folder for your project and add an “views” folder inside it. In the views folder, create your EJS template files with the extension “.ejs”. For example, you can create a file named “index.ejs” with the following content:
<html>
<head>
<title>Home Page</title>
</head>
<body>
<h1>Welcome to our Website</h1>
</body>
</html>
Step 4: Setting up your Node.js server
Create a new JavaScript file for your server (e.g., “server.js”) and require the necessary modules:
const express = require('express');
const app = express();
const port = 3000;
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');
app.get('/', (req, res) => {
res.render('index');
});
app.listen(port, () => {
console.log('Server is running on port ' + port);
});
Step 5: Running your Node.js server
Run your server by executing the following command:
node server.js
Step 6: Accessing your website
Open your web browser and navigate to “http://localhost:3000” to see your EJS template in action!
Conclusion
Congratulations! You have successfully created EJS templates with Node.js and Express.js, using Bootstrap 5 for styling. Feel free to customize your templates and explore more features of EJS.
