Express web service not showing CSS on static HTML page

project struct

    ├── db.ts
    ├── index.ts
    ├── [pages]
          └── index.html
    ├── [public]
        ├── [css]
              └── style.css
        └── [img]
            └── FinalCutFlipped.png
    ├── router.ts
    └── server.ts

I have an API web service deployed on Render. The deployed site is showing the index.html page but not the style.css. Everything is working fine in my local env so i’m assuming i’m not doing something correctly when it comes to the build/deploy process. I added a render.yaml file with this included:

  - type: web
    name: api
    env: node
    buildCommand: npm install && npm run build
    startCommand: npm start
    staticPublishPath: ./src/public

Head of my HTML

<link rel="stylesheet" href="/css/style.css" />


import express from "express";
import router from "./router";
import morgan from "morgan";

const app = express();

const path = require("path");

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

app.use(express.urlencoded({ extended: true }));

app.get("/", (req, res) => {

app.use("/api", router);
app.use((err, req, res, next) => {
  if (err.type === "auth") {
    res.status(401).json({ message: "unauthorized" });
  } else if (err.type === "input") {
    res.status(400).json({ message: "bad request" });
  } else {
      .json({ message: "All work and no play makes a server error" });

export default app;

Ok I resolved this. Heres what I did:

I moved the public folder outside of the src and into the root of my project.

I changed the express static middleware to this : app.use(express.static("public"));

And altered my render.yaml file staticPublishPath to staticPublishPath: ./public

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.