Troubleshooting EJS Relative Path Problem when Using "include" in an HTML Document

I'm encountering an issue with my "index.ejs" file...

The current content of the ejs file:

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <!-- THIS SECTION IS FOR <head> TAG THAT WILL BE STORED INSIDE "so_head-tag.ejs" -->
  <%- include('/home/username/Desktop/www/website.com/views/partials/so_head-tag.ejs') %>

<body>

  <!-- THIS SECTION IS FOR NAVIGATION BAR THAT WILL BE STORED INSIDE "so_header.ejs" -->
  <%- include('/home/username/Desktop/www/website.com/views/partials/so_header.ejs') %>

  <div class="filler">

  </div>

  <!-- THIS SECTION IS FOR FOOTER BAR THAT WILL BE STORED INSIDE "so_footer.ejs" -->
  <%- include('/home/username/Desktop/www/website.com/views/partials/so_footer.ejs') %>

  <!-- THIS SECTION IS FOR JAVASCRIPT FILES THAT WILL BE STORED INSIDE "so_javacript.ejs" -->
  <%- include('/home/username/Desktop/www/website.com/views/partials/so_javacript.ejs') %>

</body>

</html>

Although the pages are rendered perfectly in the current setup, I have a challenge with using absolute paths. When transferring files to a new server, I need to manually update the usernames in each path as they might differ between servers. I would prefer to implement a relative path approach.

The current file placements are shown here:

https://i.sstatic.net/8FPeP.png

I am facing difficulties in implementing relative paths as it triggers an error when I try using this in the ejs file:

<%- include(__dirname + '/views/partials/so_footer.ejs') %>

Error message displayed is:

dirname is not defined.

I appreciate any assistance provided in resolving this issue.

Answer №1

Incorporating a sub-template file requires specifying the relative path from the main template to the sub-template.

For instance, starting from pages/homepage.ejs, if you want to include components/header.ejs, you can do so using:

<%- include('../components/header.ejs') %>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

use the fetch api to send a url variable

I'm struggling to pass a URL variable through the API fetch and I can't seem to retrieve any results. As a newcomer to Javascript, any help is greatly appreciated. //Get IP address fetch('https://extreme-ip-lookup.com/json/') .then(( ...

The Django POST request is rejecting due to a missing or incorrect CSRF token, despite having included the token in the form

I'm encountering a 403 response when making a POST request despite including csrf_token in the data for an AJAX request. I made sure that csrf_token is not empty before sending the request, so everything seems correct. What could be causing this error ...

Is it possible to utilize relative paths with webpack dev server in React JS projects?

While running the development server on localhost:3000 using npm run start, everything functions as expected. I am utilizing react-scripts and have not ejected the react app. Currently, my goal is to configure the dev server behind a reverse proxy so that ...

Vue: Customize data based on userAgent

As a newcomer to VUE, I am attempting to dynamically modify the disabled value based on the userAgent in order to display or hide the paymentMethod: data() { return { paymentMothods: [ { name: 'Visa che ...

AngularJS fails to prioritize the following element

Here is my HTML code: <div ng-app="app"> <form> <div class="form-group"> <label >Username</label> <input focus type="text" class="form-control" id="loginUserName" ng-model="userForm.crn" required/> ...

How can we activate navigation on a mobile browser?

I am currently working on a small HTML5/JavaScript website designed to be accessed by mobile browsers on devices such as Android and iPhone. I am utilizing the geolocation feature of HTML5 to obtain the user's current location, but my goal is to then ...

Combining login and registration forms on everyauth for express.js

In the standard setup of everyauth for password authentication, login and registration pages are separate. I attempted to combine the respective jade files and adjust the register and login paths in my server file to align. However, upon loading the merged ...

Is there a way to effortlessly refresh the WooCommerce cart and receive updated HTML content all in one go?

I am currently working on a customized "mini-cart" that mimics the functionality of the main cart page, including options to adjust quantity, remove items, enter coupons, and remove coupons. I have set up the cart to submit changes via Ajax by listening fo ...

Issue with setting innerHTML of element in AngularJS app upon ng-click event

Look at this block of HTML: <div class="custom-select"> <div class="custom-select-placeholder"> <span id="placeholder-pages">Display all items</span> </div> <ul class="custom-select- ...

Is there a way to bring my popup closer to my button?

Check out my jsfiddle example here: https://jsfiddle.net/annahisenberg/ft10ersb/34/ Currently, I have the following code: <div id="more_options_popup" style={{ left: this.ref.current.offsetLeft - 140 + "px", top: this.ref.current.offsetTo ...

Store the current user's authentication information from Firebase in the Redux state using React-Redux

I am facing an issue with persisting the state of my redux store using the currentUser information from Firebase Auth. The problem arises when I try to access auth.currentUser and receive null, which I suspect is due to the asynchronous loading of the curr ...

Determining the height of the first element in jQuery

I am dealing with multiple elements that share the same class but have different heights. The class 'xyz' is only for styling borders, as shown below: <div class='xyz'></div> //1st element height=10px <div class='xy ...

Difficulty in packaging JavaScript resources within Laravel Project

Having trouble setting JS functions as global in my project: In the 'resources\js"', I have: numerosALetras.js: /////////////////////////// function unidades_nal(n){ ... } function decenas_nal(n){ ... } function centenas_nal(n){ ...

What is the best way to assign attributes to all items in an array, excluding the currently selected one?

I need to implement dynamic buttons in my HTML document while a JavaScript class is running and receives a response from the backend. I am using jQuery and vanilla JS, and have included an example below to demonstrate this functionality. The goal is to dis ...

Get the file from the web browser

Hey there, greetings from my part of the world. I have some straightforward questions that I'm not sure have simple answers. Currently, I am working on a web application using the JSP/Servlet framework. In this app, users can download a flat text fil ...

Error Encountered: Unable to Locate 'bootstrap' label in Bootstrap 5 Popover

I have been working on implementing a popover in my Angular 12 project using Bootstrap version v5.0.1. However, I am encountering a name error that I can't seem to resolve: var exampleEl = document.getElementById(item.name + index); var tooltip = ne ...

Extract data from CSV files with line breaks in fields using JavaScript

When dealing with a CSV file that has newline or return characters in certain fields, the challenge is to parse the data without accidentally splitting a field into multiple rows. Here is an example of CSV data: ID;Name;Country;ISO-2;Address;Latitude;Lon ...

Manipulate Nested Objects using an Array of Keys

Currently, I am developing a recursive form using React and MUI that is based on a nested object. Throughout this process, it is crucial for me to keep track of the previous keys as I traverse through the recursion. As users interact with the form and mak ...

Having trouble executing the npm start command for ReactJS

Below is the code snippet from my file named server.js if(process.env.NODE_ENV !== 'production') { require('dotenv').parse() } const express = require('express') const app = express() const expressLayouts = require(' ...

ESLint error caught off guard by function expression in customized MUI Snackbar Component with Alert

Struggling to create a personalized MUI Snackbar using the MUI Alert example from the official Documentation, but facing ESlint errors: error Unexpected function expression prefer-arrow-callback error Prop spreading is forbidden react/jsx-props-no-s ...