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

Steps for updating the homepage to display a personalized welcome message to the user after logging in and redirecting using node.js and

Upon arriving at the homepage, simply click on the sign-in button. Once redirected back to the home page, you will notice a personalized greeting saying 'Welcome [user]'. Wondering how to achieve this? It's as simple as changing the text fro ...

After a CSS animation, the Div element disappears from view

I recently implemented a CSS3 delayed animation on page load. Everything was working smoothly until I noticed that after the animation finishes, the DIV reverts back to visibility: hidden. .content-left { margin-left: 100px; margin-top: 32px; ...

Revamping Existing Styles: Making a Statement with `:after`

In my asp.net mvc application, I am facing an issue where the * symbol, representing a required field, and the ? symbol, representing help, are not both being displayed. The ? symbol seems to be overriding the * symbol, resulting in only one symbol being s ...

React safety: handling state changes

As I dive into my React project, I am amazed by its dynamic nature. However, a recent challenge has arisen when implementing dynamic security features such as Google reCAPTCHA. The fear of users manipulating my states and properties is beginning to worry m ...

Display a division upon choosing an option

I am working on a project that involves a selection menu in the form of a drop-down list. <select> <option id="one" value="something">Car</option> <option id="two" value="anything">Plane</option> </select> Also, I ...

What is the best way to delete all cookies on a Node.js/Express server?

One scenario involves having cookies stored on the client-side with the name token=foobar;. These cookies can be cleared by clicking the logout button, triggering a server-side response with response.clearCookie('token'). However, I am facing an ...

Zooming in on the background with an animated effect

I'm experimenting with a zoom in animation on a background image for a brief moment. It seems to work initially but then resets itself. To see an example, I've created a jsfiddle link: https://jsfiddle.net/onlinesolution/tk6rcLdx/ Any idea what ...

Is it possible to utilize the ternary operator to handle classnames when working with CSS modules?

I am experiencing difficulty implementing a styling feature using the ternary operator within an element's className. My goal is to have three buttons that render a specific component when clicked. Additionally, I want to change the background color ...

The error message "TypeError: text is not a function" is displayed when trying to utilize the text() method from either Blob

My current dilemma revolves around the usage of functions defined in the typescript lib.dom.d.ts file within my node.js express backend that is implemented using TypeScript. Specifically, I am encountering issues with the File/Blob interfaces where a File ...

Remove mistake in the CRUD RESTful API using Node.js, Express, and MongoDB

In my current example, I am utilizing mongoose. However, when attempting to perform a delete operation, the following error message is being displayed: Cannot DELETE /5e69e2fde0fa464ee01dd68d I am having difficulty pinpointing the issue at hand, as I am ...

A triangular-shaped div positioned at the bottom with a captivating background image

Is there a way to create a div with a unique twist - a triangle shape at the bottom? I've been attempting to add a background image within the triangle using a pseudo element (:after), but so far, it hasn't been successful. #homebg:after{ co ...

Is it possible to modify the background color of a checkbox?

I am looking to modify the background color of the checkbox itself, specifically the white square. I have spent a lot of time researching this topic but most articles suggest creating a div and changing its background color, which does not affect the whi ...

Issue with Bootstrap 3: Element refuses to remain within the defined width of the div container

While utilizing bootstrap 3 within a small div, I noticed that when I enlarge the window by dragging it horizontally, the fields (username and password input fields) that should remain inside the div end up shifting towards the center of the window. Can an ...

Ways to resolve BuildJobExitNonZero issue on Digital Ocean

Hey everyone, this is my first time using Digital Ocean. I'm trying to deploy my app via Launch App, and my code is hosted on GitHub. However, when I try importing the code and building it, I'm encountering the following error that I don't u ...

How to centrally align grids in a material-ui react application

I'm trying to center Grid items horizontally inside a Grid container, while also adding some spacing between the items. Here's the code I have so far: import React from "react"; import { makeStyles } from "@material-ui/core/styles& ...

Ways to quickly change a class when clicking (without waiting for mouse button release)

Is there a way to instantly change the color of my span element when it's clicked by the user, rather than waiting for the mouse button to be released? This is the CSS code I'm using for the class: span.active{ color:#bdbcae; } I've tri ...

Darkening the background of HTML and CSS text to black

I'm having trouble removing the black background from the navigation. It doesn't appear to be styled in black when I inspect each element individually. Here is an image showing the issue: https://i.stack.imgur.com/gvbn8.png @charset "UTF-8"; ...

How can I modify the background color of the datePicker?

I have a couple of inquiries about customizing the DatePicker: Is there a way to modify the background color of the datePicker using CSS? For instance, I would like to change the current green color to blue. Link to datepicker image (Just to note, JS ca ...

CSS3 Arrow missing from display

Is there a way to create a box with an arrow on its right center using CSS? Here is the code I have so far, but the arrow is not displaying. Any suggestions? CSS: .pageHelp{ float:right; margin:10px 20px 0 0; width:85px; height:25px; border-radius:3px; b ...

Issue: Vue UI is unable to connect to Node.js Express CORS API using Docker-Compose

Edit: After checking the Log Output inside the Browser, I received the following message: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://127.0.0.1:8888' ...