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

What is the best way to incorporate CSS into this HTML document?

Content has been omitted. It is crucial to review documentation in advance in order to reduce repetitive inquiries. Check out the Webpack v2 documentation. ...

csswebpackcss-loader

Node.js and Express make it easy to provide XLS download functionality

I have successfully utilized the code snippet below to generate an excel file in node.js. My intention is for this generated file to be downloadable automatically when a user clicks on a designated download button. var fs = require('fs'); var w ...

javascriptnode.jsexcelexpress

Creating consistently sized rows of Bootstrap columns - with either equal heights or equal spacing between each row

It would be great if bootstrap had a built-in feature where it automatically assigns the wrapper div of any item with a height based on the height of the largest div. In this example on JSFiddle, you can see that I have different heights for the video-ite ...

javascriptjqueryhtmlcsstwitter-bootstrap

Achieve a full page layout with content and attach the footer to the bottom using flexbox in Tailwindcss and Nextjs

How can I use flex-grow to make the body section fill the screen and keep the nav fixed at the bottom? I'm having trouble figuring out which elements to apply these properties to. Can anyone provide guidance on which element should have these styles? ...

javascriptcssreactjsnext.jstailwind-css

Retrieving data from a MongoDB collection using Node.js

I am currently working on a function that searches for all objects in a specific collection and then returns them. However, I am facing some challenges with getting the return statement to work properly. Despite successfully logging the result using consol ...

node.jsmongodb

Has there been anyone who has recently completed the cloud functions tutorial?

Struggling to navigate through the cloud functions tutorial here. Each attempt at running firebase deploy --only functions results in an error. My firebase-debug.log shows: [debug] [2020-05-05T23:45:15.510Z] ----------------------------------------------- ...

node.jsfirebasenpmgoogle-cloud-functions

Tips for adjusting container wrapping to accommodate smaller window widths in bootstrap 4

Bootstrap 4 is still new to me, and I haven't had much experience working with Bootstrap 3 either. One issue I've encountered is that when I apply the class col-(breakpoint)-(span) to div elements, they don't automatically align in a single ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Center-aligned navigation bar with all elements except for one positioned on the right side

Currently, I am attempting to center 4 elements next to each other while having one element float to the right using a flex-based solution. The ideal outcome would be for the floated element to remain in place when resizing the browser, with the other 4 e ...

javascripthtmlcss

An issue arose while trying to create the perfect seed with yeoman

While working on my first Yeoman webapp using the ultimate-seed-generator, I encountered some errors that are hindering progress: C:\Users\Fidel\Desktop\Nueva carpeta\new-proyect>npm install > <a href="/cdn-cgi/l/email ...

node.jsangularjsnpmyeomanyeoman-generator

Using Jquery to select a specific id for an input element that is a checkbox

I've been working on a snippet of jQuery code that I'd like to tailor to be more specific for one of two different input elements on my HTML page. <script> // ensure only one box is checked at a time $(document).ready(function() { ...

javascripthtmljquerycssinput

What is the best way to horizontally align text in a container without it remaining at the top?

My attempts to center the button using vertical-align: middle and text-align: center have been unsuccessful, as the styling does not affect the button's position and it remains at the top. I am puzzled by why the style is not being applied. While I c ...

htmlcsspositiontransform

Is there a way to customize the default settings for a blueprint’s menu item?

In my react project, I implemented the Menu using MenuItem from '@blueprintjs/core'. The issue I encountered is that when hovering over a Menu item with children, they open from the right side. Is there a way to modify this behavior and have the ...

htmlcssreactjsstyled-componentsblueprint

Vertical Spacing in Bootstrap 3: Eliminating Gaps Between Divs

I am looking to eliminate the gap between certain div elements and the div positioned below it. This space is created when one div is taller than another in a column. For instance, take a look at this example: http://www.bootply.com/Hc2aO5o4bG Essential ...

phpjqueryhtmlcsstwitter-bootstrap-3

What are some reasons for the slow performance of AWS SQS?

My current project involves measuring the time it takes to send a message and receive it from an SQS queue. Surprisingly, the average time it takes is between 800-1200 ms, which seems like an excessively long period. Below is the code I have been using for ...

javascriptnode.jsamazon-web-servicesamazon-sqs

What is the simplest method for transferring data to and from a JavaScript server?

I am looking for the most efficient way to exchange small amounts of data (specifically just 1 variable) between an HTML client page and a JavaScript server. Can you suggest a script that I can integrate into my client to facilitate sending and receiving d ...

javascripthtmlnode.jsclient-server

The specified <model> has not been declared

Within my codebase, I have defined multiple schemas. One of them is functioning perfectly: var mongoose = require('mongoose'), Schema = mongoose.Schema; var NewsSchema = new Schema({ name: String, route: String, remoteU ...

node.jsmodelmongoose

How can the data be accessed from a fulfilled promise returned by an async function?

Currently, I am delving into React and all things related to the MERN stack. My thirst for knowledge is insatiable and I aim to absorb as much as possible. Recently, I encountered an issue while attempting to retrieve todos from a database using the useSta ...

node.jsreactjsmongodbexpress

The value of a select box cannot be retrieved until it has been clicked on

I am working with a selectBox element in my code: <select class="span2" name="filterYear" id="filterYear" style="margin-right:10px;"> <% for (var i = 0; i < years.length; i++) { %> <% if (years[i] == selectedYear) { %> ...

javascriptjquerynode.jsjquery-selectbox

Error management for Mongoose Errors in NodeJS with Express: A Comprehensive Guide

A NodeJS Application is in place with Express serving as the web server and Mongoose acting as the abstraction layer over MongoDB. An example of a simple Express route can be seen below: module.exports.getProfile = function(req, res, next) { Users.fin ...

node.jsexpresserror-handlingmongoose

The poker table designed with CSS does not resize effectively when displayed in smaller dimensions

I have put together a CSS poker table design that I am quite happy with at the moment: https://jsfiddle.net/78fcs01m/3/ CSS: .poker-container { display: grid; width: 100vw; height: 100vh; .poker-table { justify-self: cent ...

cssresponsive-design