Express Node + Styling with CSS

I am in need of a single EJS file (configuration includes Express and Request).

app.get('/space', function(req, res){
    res.render('space.ejs');
});

The file successfully renders, but only two out of three CSS stylesheet links work when I open the page with my node app. The link that does not work is from W3 school. (It is the only link using http, could that be the reason?) However, all three links work fine when I directly open the file in a browser.

Can someone shed light on this behavior?

Below is the content of the .ejs file:

<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<html>
cssnode.jsexpress

Answer №1

Attempting to access an insecure resource through a secure connection may be causing the issue. If your website is using https, you will not be able to request an http asset. Consider switching the w3 link to use https instead. Another possibility is that CORS is blocking the resource - check for any errors in the console.

Answer №2

Here is your updated code:

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


<link rel="stylesheet" href="/css/w3.css"/>
Make sure to include "static" in the link tag like this: 
<link rel="stylesheet" href="/static/css/w3.css"/>
for it to work properly.

Since your server.js file is in the lib directory, make sure to use this path:

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

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

Unable to locate module 'fs'

Hey there, I'm encountering an issue where the simplest Typescript Node.js setup isn't working for me. The error message I'm getting is TS2307: Cannot find module 'fs'. You can check out the question on Stack Overflow here. I&apos ...

node.jsangulartypescript

What is causing my Fabric.js canvas to malfunction?

Here is the link to my JSFiddle project: http://jsfiddle.net/UTf87/ I am facing an issue where the rectangle I intended to display on my canvas is not showing up. Can anyone help me figure out why? HTML: <div id="CanvasContainer"> <canvas id ...

javascriptjquerycsscanvasfabricjs

The Web Browser is organizing CSS elements in an alphabetized sequence

map.css({ 'zoom': zoom, 'left': map.width()/(2*zoom) - (point[0]/100)*map.width(), 'top': map.height()/(2*zoom) - (point[1]/100)*map.height() Upon observation, it appears that Chrome adjusts the map zoom first be ...

javascriptjqueryhtmlcssinternet-explorer

Designing an HTML banner with 100% width and 660 pixels in height for optimal responsiveness

I am in need of a responsive banner that will be displayed at 100% width and 600px height on fullscreen. Below is the code I have: <style> /* default height */ #ad { height: 660px; width: 100%; } @media o ...

jqueryhtmlcss

Create multiple package-lock.json files with a suffix for backup purposes

I've observed that npm generates multiple package-lock*.json files in the main directory of my project. I'm uncertain about the purpose of these files and why there are so many being created. Attached is an image displaying the generated files. ...

node.jsnpmpackage.jsonpackage-lock.json

Manipulating CSS rules using JavaScript/jQuery

My goal is to create a function that generates a grid based on table data. While the function itself seems to be working, I am encountering an issue where the classes applied are not resulting in any style changes. Below is a snippet of my function: $(doc ...

javascriptjqueryhtmlcss

When utilizing the "as" attribute, styled components do not inherit any styles

I am currently utilizing both styled-system and styled components, working on a simple scenario like the one below: const buttonFont = { fontFamily: "Chilanka" }; // define basic text styling const Text = styled.div` ${typography} ${color} `; // c ...

cssreactjsstyled-components

When resizing the browser, HTML/CSS elements tend to shift positions :(

I've experimented with different position values like absolute, fixed, and static without success. Wrapping the element in a div didn't yield the desired result, so I'm seeking assistance to correct this. (If that is the solution) The issu ...

htmlcssstylesdisplay

Tips for verifying the presence of a 3D model from Spline API within the DOM using Next.js

I am in the process of developing a brand new website and I have integrated a 3D model from spline, although it is taking quite some time to load. To improve user experience, I decided to implement a loader/Spinner. However, I'm facing the challenge o ...

cssreactjsnext.js3dspline

What is the best way to redirect to the login page using the PUT method in express.js when the user is not authenticated?

I am encountering an issue where I need to update a database from an AngularJS page using the $http.put method. However, if the session expires, it displays errors on the server. When the put method is triggered, it goes to this route: PUT /api/categorie ...

angularjsnode.jsrestexpressroutes

What could be the reason that images are not being loaded when using

Why are the images not loading in res.sendFile? Below is the server.js file along with the red.html file. Strangely, when I load the red.html file on its own, the picture displays correctly. server.js var express = require('express'); var app = ...

node.js

Encountered an AxiosError while handling a request with an HTTP status code of 404, in a stack involving Node.js, Express,

Attempting to integrate a registration and login system into my website using Axios to perform a post request in React (Home.jsx) to my Express server file (database.js), where information is retrieved from a MySQL database. However, upon submitting the in ...

mysqlnode.jsreactjsexpressaxios

What is the method to determine the size of a file in Node.js?

Have you ever wondered how to accurately determine the size of a file uploaded by a user? Well, I have an app that can do just that. The code for this innovative tool is provided below: Here is the snippet from server.js: var express = require('expr ...

javascriptjquerynode.js

What is the best way to prevent the chaining of promises and catches in JavaScript?

I am currently developing an API using node and express to create users. However, I find myself struggling with error handling due to the asynchronous nature of MongoDB functions, which makes me feel like I'm trapped in a "promise hell." I anticipate ...

javascriptnode.jsmongodberror-handlingpromise

What causes the content of a sticky navbar to overflow?

I have a situation where my navbar has two styles (.navbar and .navbar_fixed), but the links in the navbar are not fitting properly. I attempted to remove padding and add left: 0;, however, these adjustments did not work as expected. Any suggestions on how ...

htmljquerycss

What is the reason that elements with % properties totaling 100% do not align next to each other?

I've been attempting to arrange two blocks side by side within another block, but they just don't seem to fit together smoothly. What could be causing this issue? .container {height: 200px; width: 400px; background:darkgrey;} .left {height: 100% ...

htmlcss

What is causing the issue of documents not being removed from the mongoDB database?

I've been trying to delete a document from the MongoDB database, but for some reason it's not working as expected. Even though the console doesn't show any errors and displays the query object correctly, the respective document still remains ...

node.jsmongodb

Storing a credit card number securely using Stripe in a MERN stack application

Currently, I am working on an application using the MERN stack where users can create companies. Each company requires various details such as name, address, phone number, email, and credit card information including the 16-digit card number, expiration da ...

javascriptnode.jsreactjsmongoosestripe-payments

The command `node server.js` has been initiated. Nodemon has executed a clean exit and is now waiting for any

A React application has been developed where users can input their email and a message to send to the server. However, upon trying to send the message, Error number 2 is encountered along with viewing Error number 1 in the terminal. Despite ensuring that ...

node.jsjsonreactjsexpress

Why is it that comparing the childNodes of two identical nodes results in false, while comparing their innerHTML yields true?

Currently, I am in the process of developing a simple function in Node.js that compares two DOMs. My goal is to not only identify any differences between them but also pinpoint the exact variance. Interestingly, upon reconstructing identical DOMs using jsd ...

javascriptnode.jsif-statementdom