project struct
[src]
├── 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:
services:
- 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" />
server.ts
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(morgan("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.get("/", (req, res) => {
res.sendFile(path.resolve("src/pages/index.html"));
});
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 {
res
.status(500)
.json({ message: "All work and no play makes a server error" });
}
});
export default app;