cPanel Question posted in
The official documentation can be seen here.

Why does css only load on a local server and not the actual website? – CPanel

I am having a lot of trouble with trying to get my css file to load. Everytime I host a local server and access my website it works completely fine. However when I upload my website using the cpanel and try to access the website the html loads but the css does not. Additionally when I inspect the page and go to sources the css file is blank and I get the error "Failed to load resource:’styles.css’ the server responded with a status of 404 ()". I am very confused please help

Below is my css
”””””””””””””””””””””””’

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

”””””””””””””””””””””””’

Below is my app.js which uses node.js // keep in mind I have a public file which contains css folder
”””””””””””””””””””””””””””’

const express = require('express')
const bodyParser = require('body-parser')
const path = require('path')
// var request = require('superagent')

const app = express()
app.use(express.static('public'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

app.use('/public', express.static('css/styles.css'))
app.get('/', function (req, res) {
  res.sendFile('/index.html', { root: __dirname })
})

app.listen(3000, function () {
  console.log('Server is running on port 3000')
})

”””””””””””””””””””””””””””””””’

Tags:

3

Answers


  1. 0

    so you are using the cpanel so that was not access your css folder directly

    so goto your cpanel top same where the full path of the styles.css copy that pathe and add to
    @

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

    replace with

    <link rel="stylesheet" href="/yourfolder-path/css/styles.css">

    Solution 2
    get the parent directory in public html but it working only webs server config

    
<link rel="stylesheet" href="../css/styles.css">
    Login or Signup to reply.
  2. 0

    When your nodejs server tries to serve up static files that are referenced in your HTML page it’s looking for them relative to your app.js file.

    If you bundle and minify your content before putting it into cpanel, the public folder you use to serve static files in your development environment no longer exists in your cpanel environment or could exist but via a different folder path.

    There are two ways you could go about solving this. either point your dev environment to your bundled and minified folder location. Which would mean changing

    app.use(express.static('public'))

    to

    app.use(express.static('build'))

    This big downside of this is you need to bundle and minify your client-side app each time you want to see any updates.

    Another better approach would be to check the environment in your app.js and set the static folder location accordingly, here’s an example of what that might look like:

    const app = express()
if(process.env.NODE_ENV === 'production') {
    app.use(express.static('build'))
} 
else {
    app.use(express.static('public'))
}
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
    Login or Signup to reply.
  3. 0

    I was facing the same problem,and it solved by just adding "/" in the link. so change your link element code to

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

    or

    <link rel="stylesheet" href="./css/styles.css">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search