Search code examples
node.jsexpressweb-applicationsejsweb-hosting

Node.js web app uploaded through A2 Hosting - pathing issue with CSS

I am currently studying node.js and pretty new still so I apologize in advance for probably having an inefficient or terribly formatted first question. I am uploading a one-page test to figure out how to use A2's node.js service.

So far I have followed the A2 tutorial "How to create a Node.js application with cPanel using Node.js Selector" (https://www.a2hosting.com/kb/cpanel/cpanel-software/create-application-with-nodejs-selector) and this tutorial on syncing git repositories (https://medium.com/@pampas93/host-your-node-js-app-on-shared-hosting-go-beyond-localhost-73ab923e6691) and I have been able to get everything working except the main page

(Located in dirname/repositories/test/views/home-visitor.ejs)

will not read the CSS file I have uploaded

(Located in: dirname/repositories/test/public/main.css)

and some of the images do not load. No file name typos or forward slash "/" syntax inconsistencies, all images share the same folder path.

(Located in: dirname/repositories/test/public/images)

So the node.js app shows up as plain HTML only. I have uploaded the exact same app/git repository to Heroku and the CSS is read and all images show up, so I am trying to figure out what pathing issues I am having when uploading specifically to A2's hosting service.

When I check 'inspect' on the browser for the non-working app page, I get these console messages:

"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

http://domainname.com/test/main.css sends 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>

I am hoping someone familiar with hosting node.js apps on A2 can help, and thank you for the time reading this question regardless.

Solution

  • Full credit for this solution goes to VictoryFlame's video https://www.youtube.com/watch?v=BAD5JyOymRg.

    I ended up editing the way app.js pathed my public folder and updated how I linked the CSS and image files in my .ejs file:

    app.js:

    const express = require("express")
const app = express()
const path = require("path")

app.set("views", path.join(__dirname, "views"))
app.set("view engine", "ejs")

app.use("/test1/static", express.static("public/"))

app.get("/test1", function (req, res) {
  res.render("home-visitor")
})

app.listen()

    I re-formatted the style link to the CSS page and used this pathing syntax for images:

    home-visitor.ejs:

    <link rel="stylesheet" href="https://domainname.com/test1/static/home.css">

<a href="#" target="_blank" rel="noopener noreferrer">
<img src="/test1/static/images/imageWorksNow.png" alt="Twitter Logo Link" width="35px" height="35"></a>

    Now everything is properly served/linked and showing up. I hope this helps someone else some day!