Question 258364 in Html Question posted in
Some basic documentation can be found here.

CSS not applied to HTML using node.js

I’m new to web dev but I’m trying to make a project with a friend.

We used bootstrap studio to make the design, however now that we’re trying to use node to make it online, it only deploys the html without any style applied.

Here is the server.js file witch is run by node:

const express = require('express')
const app = express()
const hostname = "localhost"
const cors = require('cors')
const path = require('path')
const ytdl = require('ytdl-core')
const port = 3000

app.use(express.static(path.join(__dirname, '/../assets/bootstrap/css/')));
app.use(express.static(path.join(__dirname, '/../assets/css/')));

app.get('/', (req, res) => {
  res.sendFile('index.html', {'root': __dirname + '/../html/'})
});

app.get('/download', (req,res) => {
  var URL = req.query.URL;
  res.json({url: URL});
});


app.listen(port, () => {
  console.log(`Example app listening at http://${hostname}:${port}`)
});

In the html file we load the css:

<!DOCTYPE html>
<html data-bs-theme="light" lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Home - Zeit Video Editor</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/Raleway.css">
    <link rel="stylesheet" type="text/css" href="../assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/bs-theme-overrides.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/untitled.css">
</head>

The html and css files are organized in the way bootstrap exported them. The file system is the following:

js
   server.js
   ytdl-downloader.js
html
   index.html
   ...
assets
   bootstrap
      css
         bootstrap.min.css
   css
      bs-theme-overrides.css
      Raleway.css
      untitled.css (empty for now)

I know it’s a mess, but I’d like to understand what is not working before making any changes to it

Thanks in advance for the help

I just added the app.use(express.static()) to try to fix it but nothing yet.

Tags:

2

Answers


  1. 0

    Thanks for the complete question !

    Now because you have created an asset folder for your application served by express, you css folder are accessible directly in the application (and not on your computer path).

    You should be able to import your CSS with the following path in an HTML file :

    <link rel="stylesheet" type="text/css" href="./css/Raleway.css">

    Does that work for your project?

    Login or Signup to reply.
  2. 0

    With those two lines:

    app.use(express.static(path.join(__dirname, '/../assets/bootstrap/css/')));
app.use(express.static(path.join(__dirname, '/../assets/css/')));

    The contents of those directories are mounted to the root of your express server.

    So bootstrap.min.css would be reachable using /bootstrap.min.css and the same is true for bs-theme-overrides.css, …

    You need to change the paths accordingly in your html, and you probably want to specify the mounting point, to avoid potential naming conflicts:

    app.use('/assets/bootstrap/css/', express.static(path.join(__dirname, '/../assets/bootstrap/css/')));
app.use('/assets/css/', express.static(path.join(__dirname, '/../assets/css/')));

    And change your HMTL to:

        <link rel="stylesheet" type="text/css" href="/assets/css/Raleway.css">
    <link rel="stylesheet" type="text/css" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/bs-theme-overrides.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/untitled.css">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search