Creating a connection between my .html and .ejs files: A step-by-step guide

I have successfully created a pair of HTML files - index.html & contact.html. Within these files, I have implemented a navigation bar that allows for seamless transition between them.

Recently, I delved into the realm of retrieving APIs and crafted an app.js along with a weather.ejs file.

  1. How can I properly link my new weather.ejs file within the navigation bar? My attempts to link it to views/weather.ejs have been met with a "file not found" error. Assistance would be greatly appreciated!

  2. Including links to index.html and contact.html in my weather.ejs file seems to disrupt their functionality. Any insight on adjustments needed to enable smooth navigation from the weather.ejx file back to index.html and contact.html?

<a class="navbar-brand" href="index.html">R.</a>

<button
  class="navbar-toggler"
  type="button"
  data-toggle="collapse"
  data-target="#navbarTogglerDemo02"
>
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="contact.html">Contact</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="views/weather.ejs">Weather</a>
    </li>
  </ul>
</div>

Your support is immensely valued!

javascripthtmlexpressejsnav

Answer №1

If you're looking to efficiently serve files that need to be rendered before being sent to the client, I suggest setting up express routes. HTML can also be used as an ejs file, so consider updating the extensions and organizing them within a views folder.

Here's an example folder structure:

- routes
----- index.js
- views
----- index.ejs
----- contact.ejs
----- weather.ejs
- package.json
- app.js

In your app.js file:

const express = require('express');
const indexRouter = require('./routes/index');

const app = express();

// Configure view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// Use Router
app.use('/', indexRouter);

In routes/index.js:

const express = require('express');
const router = express.Router();

/* GET home page. */
router.get('/', (req, res, next) => {
  res.render('index');
});
/* GET contact page. */
router.get('/contact', (req, res, next) => {
  res.render('contact');
});
/* GET weather page. */
router.get('/weather', (req, res, next) => {
  res.render('weather');
});

module.exports = router;

Consider adding a navbar in your HTML templates:

<ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/contact">Contact</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/weather">Weather</a>
    </li>
  </ul>

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

Front-end only accepts parameter as "t"

Server Side Whenever I make a request with any input, the server always returns { id: 't' } app.get("/get_test?:id", (req, res) => { console.log(req.params.id); res.send(req.params); }) // Here is the client side code ...

node.jsreactjsexpressparametersfetch

Optimizing web development: Employing HTML templates to dynamically enhance website performance

My task involves the redesigning of an existing website (foo.com) using .NET and C#. The website caters to multiple companies such as abc.com, def.com, ghi.com, etc. Currently, the website utilizes html templates specific to each company's website in ...

c#asp.nethtmlrefactoring

Tips for determining the presence of a query string value using JavaScript

Is there a way to detect the presence of q= in the query string using either JavaScript or jQuery? ...

javascript

Leveraging Next Js with an external REST API for streamlined authentication and authorization functionality

I am currently working on transitioning my existing application that was developed with Node.js and Express, along with a front end built using create-react-app with Redux, to Next.js. However, I have hit a roadblock as I am unsure of the correct method ...

javascriptnode.jsreactjsexpressnext.js

What is the best method to display a Component in React and reset its lifecycle whenever it is shown?

As a beginner in node.js and react, I decided to embark on the journey of creating a chat app using socket.io. I followed some tutorials on setting up rooms, joining/leaving them, and messaging within the rooms. To pass one socket instance, I utilized Reac ...

node.jsreactjsexpresssocket.io

When I open Firefox, all I see is a blank page with only the h2 heading displayed

I am trying to print the text "I can print" on a page, but only the title shows up and the rest of the page is blank. What mistake might I be making? <!DOCTYPE html> <html> <head> <title>Object exercise 4</title> </head& ...

javascripthtml

Event not tracking properly due to missing label in GA event firing

Seeking assistance with a project I'm currently engaged in. I have created an HTML5 video containing a playlist and encountering difficulties setting up multiple labels in GA to track each individual video play. While I found code online, adapting it ...

javascriptjqueryhtmlgoogle-analytics

Passing a Scope to ES6 Template Literals: How to Ensure they are Interpreted Correctly?

I've recently started utilizing template literals to create an error generator. Although I have functional code, I find myself having to define the list of potential errors within the constructor scope, and this is not ideal for me. Is there a way t ...

javascriptnode.jsecmascript-6

Ways to eliminate the default margin surrounding an image within a div

Struggling with CSS while building websites is a common issue for me. In my current project, I have encountered a challenge where I placed two images inside a div container. Oddly enough, when I add text to the div, it adjusts its height accordingly. How ...

htmlcssimage

How to conceal sections of a webpage until a child component is successfully loaded with vue

I am currently working on a Single Page Application using Vue. The default layout consists of some HTML in the header, followed by an abstract child component that is injected into the page. Each child component has a loader to display while the data is be ...

javascripthtmlcssvue.js

How can I position divs in a way that the top right corner of the child div touches the bottom left corner

I am currently working on implementing a message box feature on my website. When a user clicks on the inbox icon, I want a messages box to appear, similar to how stackoverflow handles it. Stackoverflow achieves this by placing a div outside the ordered lis ...

htmlcssflexboxcss-position

The second AJAX call is unsuccessful

I have created a dynamic ajax website that retrieves pages from the /pages folder and displays them within an ajax-container div on my index.php. Now, I am looking to implement a second ajax request that will only be triggered on certain pages. For examp ...

javascriptphpjqueryajax

The driver instance that has forked will never cease

Issues arise when attempting to run multiple browser windows in Protractor. The code snippet being tested is as follows: I create a new browser instance to perform certain tests. When input is entered into the original browser, it should not affect the ne ...

javascriptseleniumwebdriverprotractor

Azure Function experiences a hanging issue with Express (bodyParser) urlencoded, neither throwing an error nor providing a callback

While operating a website through serverless Azure Functions, I've encountered an issue where submitting a POST request on my deployed Azure function results in the request hanging with no accompanying logs. This was my original body-parser configura ...

node.jsazureexpressazure-functionsbody-parser

Fontawesome is unable to update the class due to the presence of invalid characters in the string

const toggleDarkOrLight = document.getElementsByTagName('i')[0]; var toggled = false; const toggleFunction = () => { if (toggled === false) { toggleDarkOrLight.classList.remove('fa fa-toggle-off'); toggleDarkOrLight.classLi ...

javascripthtmlcssfont-awesome

'An error occurred when invoking the class method due to 'This' being undefined

I'm attempting to display a response message to the user, but encountering an error (Cannot read property 'message' of undefined). Here's the code snippet causing the issue: server.js const server = express(); let App = require(' ...

javascriptnode.jsexpress

Utilizing jquery and ajax to showcase a series of images prior to uploading them

I have been attempting to create a feature that allows for the preview of multiple images before uploading them to my website. Unfortunately, it's not working as expected and I am unable to identify any errors in the console. Below is the JavaScript c ...

javascriptjqueryhtml

What is the method for rendering an ejs template from express using fetch without the need to submit a form?

login.js file: const form = document.getElementById('loginForm'); form.addEventListener('submit',async(e)=>{ e.preventDefault(); return await fetch(`localhost:8000/route`, { method: "get", heade ...

javascriptnode.jsexpressejs

How can I update a CSS class value by utilizing AngularJS variables?

I am currently facing an issue with making my CSS values dynamic. The code I have tried is not functioning as expected. <style> .panel-primary { background-color:{{myColorPanel}} } </style> I came across a similar query on Ho ...

javascripthtmlcssangularjs

PHP Ajax Image Uploading and Storage

Is there a way to effortlessly upload an image and save it in the uploads folder without any page refresh? Not only that, but can we also have the uploaded image displayed on the screen within a designated div section? Unfortunately, I seem to encounter a ...

javascriptphphtmlajaxupload