I am currently learning node.js and still relatively new to it. Please excuse me if my first question is inefficient or poorly formatted. I am trying to upload a one-page test to explore A2's node.js service.
Following tutorials from A2 on creating a Node.js application with cPanel using Node.js Selector (here) and syncing git repositories (here), everything works except the main page located in dirname/repositories/test/views/home-visitor.ejs does not read the uploaded CSS file (located in: dirname/repositories/test/public/main.css) and some images do not load, despite correct folder paths.
The node.js app appears as plain HTML only. The same app/git repository works fine on Heroku, reading CSS and displaying all images. I am trying to diagnose pathing issues specific to A2's hosting service.
Browser console messages for the non-working app page include:
"Refused to apply style from 'http://domainname.com/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
Failed to load resource: the server responded with a staus of 404 () nonWorkingImageExample.png:1
Failed to load resource: the server responded with a staus of 404 () anotherNonWorkingImageExample.png:1
leads to a 404 page
app.js:
const express = require("express")
const app = express()
let port = process.env.PORT
if (port == null || port == "") {
port = 3000
}
app.use(express.static("/public/"))
app.set("views", "views")
app.set("view engine", "ejs")
app.get("/test", function (req, res) {
res.render("home-visitor")
})
app.listen(3000)
The page I am testing: home-visitor.ejs:
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<header>
<div class="forMobile mobileHeader">
<div class="mobileLogo">
<a href="#"><img src="images/workingImageExample.png" alt="Image Description">
</a>
</div>
</div>
</header>
<div class="forDesktop centerContent tempMssg">"Lorem flexitarian salvia offal umami. Sartorial swag drinking portland cray. Godard jianbing retro thundercats hella tilde. "
<br><br>
<a href="#" target="_blank" rel="noopener noreferrer">
<img src="images/nonWorkingImageExample.png" alt="Twitter Logo Link" width="35px" height="35">
</a>
</div>
<div class="forMobile mobileUpperBG">
<img src="images/anotherNonWorkingImageExample.png" alt="upper left bg image">
</div>
</html>
If anyone familiar with hosting node.js apps on A2 can provide assistance, I would greatly appreciate it. Thank you for taking the time to read through my question.