express server does not take into account CSS or JS scripts on the loaded HTML

Issue

i have no idea if this is even a problem or im just stupid, but im currently trying to make a questionnaire that runs over a local server (port 3000 default), but whenever i try to run the server using node.js and boot up localhost:3000, it only displays the default parameters that i’ve put in my HTML document that are functionally placeholders, due to them being dynamically removed and added by the associated js script. In addition to this, it appears that the stylesheet that i’ve made using CSS is just not being loaded, so i have a suspicion that these might be connected, and that im doing something wrong in calling them to the localhost or something. My HTML File looks like this.

Whereas i have a simple database connection and server hosting backend that looks like this:

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const mysql = require('mysql');
const cors = require('cors');
const port = 3000;

const connection = mysql.createConnection({
    host    : 'localhost',
    user    : 'root',
    password: 'Arcinblade.3',
    database: 'applicants'
});

app.use( bodyParser.json() ); 

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

app.listen(port, ()=>{
    connection.connect((err) => {
        if(err) {
          console.log('Database not connected!', err);
        } else {
          console.log(`Server is running on port ${port}`);
          console.log('Database Connected!');
          
        }
    })
});

Solution

You need to serve your static files in your express file. To do this use the code:

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

You should have your css and js files inside of a folder named public for this to work.
Check the Express docs to help. Serving static files

Answered By – Kermit

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.