The EJS is causing a problem with linking the style sheet

Currently, I am in the process of familiarizing myself with ejs, express, and node js. Facing an issue while trying to link my style sheet to my header, below is the code snippet and here is a https://i.stack.imgur.com/0BEIn.png. Utilizing include for both header and footer sections.

Here's a glimpse into my app.js setup -

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const app = express();
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(express.static("public"));
app.get("/", function(req, res) {
    res.render("home");
});
app.listen(3000, function() {
    console.log("Server started on port 3000");
});

Answer №1

One important thing to keep in mind:

style.css should be in its own external css file without any style tags within it. Your express app needs to specify the public directory where static files will be served from, such as css/js/images.

You can achieve this using:

app.use(express.static(__dirname + '/public'));

If you have placed your css files in a folder named "public" within your app's root directory, make sure to reference them correctly in your template files like so:

<link href="/css/style.css" rel="stylesheet" type="text/css">
In this example, the assumption is made that the css file is stored in a folder called "css" inside the "public" directory.

Your folder structure should look like this:

.
./app.js
./public
    /css
        /style.css

Remember to properly close the head tag when implementing these changes.

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

Search for entries in Node Express based on the createdAt attribute

Can anyone help me fetch mongo document entries between specific dates using the createdAt attribute? I've attempted the following without success: Here is the JSON body I'm sending in the request: {"startDate":"2020-01-06", "endDate":"2020-01 ...

Persistent Footer while scrolling on Internet Explorer

Trying to achieve a consistent look across Chrome, IE(11), and FF for my responsive website has been a challenge. The main issue I'm facing in IE is that when the site's content extends beyond the viewport, the scrollbar fails to reach the end d ...

Unable to utilize NPM and Node.js

npm WARNING: The global `--global` and `--local` configurations are no longer supported. Please use `--location=global`. npm WARNING: npm does not support Node.js v16.16.0 npm WARNING: It is recommended to upgrade to a newer version of No ...

Pictures Unavailable to Show in Table

I've been working on a project where I need to insert some images into a table. Usually, this isn't an issue for me. However, today when I added the images to the table, all I see is a square border with the alt text inside it. I'm confident ...

Having trouble establishing a connection to the back-end server with minikube

I am currently facing an issue with deploying an application in minikube locally. While I can successfully connect to the front-end when minikube is running, I encounter connectivity problems with the back end. Below are the yaml files that I am using: I ...

Tips for utilizing import alongside require in Javascript/Typescript

In my file named index.ts, I have the following code snippet: const start = () => {...} Now, in another file called app.ts, the code is as follows: const dotenv = require('dotenv'); dotenv.config(); const express = require('express' ...

Struggling with the adaptability of my website's footer section

I'm facing a dilemma... No matter what I do, I can't seem to position my contact form over my Google iframe perfectly. It works fine if I don't mind sacrificing responsiveness, but as soon as I try to make it responsive, the absolute assign ...

Adjusting the visibility of a div as you scroll

I'm trying to achieve a fade-in and fade-out effect on div elements when scrolling over them by adjusting their opacity. However, I'm facing difficulties in getting it to work properly. The issue lies in the fact that my div elements are positio ...

Centered alignment with floating divs of abbreviated length

My HTML file has a structure similar to the following: <div style="float:right"> A line of text, floating to the right </div> <div style="text-align:center"> And here, several lines of<br /> text which should be centered. </div& ...

Changing the req.path property within an expressjs middleware

I'm currently in the process of developing a middleware that will help eliminate locale strings from the path, such as /de/about becoming /about. This project is being implemented using express. To achieve this, I initially tried out the following mid ...

What is the most effective way to retrieve cursors from individual entities in a Google Cloud Datastore query?

I am currently working on integrating Google Cloud Datastore into my NodeJS application. One issue I have encountered is that when making a query, only the end cursor is returned by default, rather than the cursor for each entity in the response. For insta ...

The error message "Type Error: cookies cannot be iterated over in Next.js"

I was attempting to set a cookie in Next.js 13 from a route.ts. No matter how many different methods I tried, I kept encountering the same error. One approach I took was following the Next.js documentation on setting a cookie using the cookies library pr ...

Leveraging clustering in an Express.js application

As I delve into my first node project, I am gaining hands-on experience and have managed to set up a basic server. However, with the app expected to receive heavy traffic, implementing cluster seems like a logical step. Despite piecing together code snippe ...

The Socket IO Client is receiving a different object than the one that was sent by the Server

My server side code is sending an object to the client side, but the object received by the client is completely different from what was sent. Let me elaborate: Code Server side code: //Setting up the example var response={}; response.models=[]; respo ...

Ways to align the `<ol>` number at the top vertically

I'm having trouble aligning my <ol> numbers vertically at the top of the list. I've created a sample on CodePen. ol { list-style-type: decimal-leading-zero; font-size: 11px; } a { font-size: 80px; tex ...

Using float instead of CSS inline-block is more effective for styling a PHP element

I've been working on styling a page that was generated with App Gini. While I have been successful in editing most elements so far, I am facing an issue with getting inline-block to work properly. Although float:left is functioning correctly, I would ...

What is the reason that the for loop updates all indexes in Node.js?

Currently, I am working on a space battle program that involves nested arrays. In order to simulate fleet fighting, I have written the following code: //Roll a dice function const randomNumber = (number) => { return Math.floor(Math.random() * numbe ...

Having trouble with your website's container not wrapping properly?

I've run into an issue where my container is not wrapping a border around the other elements, only around the header. I checked with validators for both CSS and HTML but there are no errors being shown. Does anyone have an idea what might be causing t ...

Is it better to set the language of Puppeteer's Chromium browser or utilize Apify proxy?

Looking to scrape a website for French results, but the site supports multiple languages. How can I achieve this? Is it best to configure Puppeteer Crawler launch options using args, like so: const pptr = require("puppeteer"); (async () => { const b ...

The XML data format used to make a query on the OCS service in Nextcloud

Looking for a way to obtain a direct download link to a Netcloud file. Instructions: To get a direct link: POST /ocs/v2.php/apps/dav/api/v1/direct Include the fileId in the body (ex: fileId=42). I am trying to make a POST request using Nodes.js. What s ...