How To Load Js File In Html Using Express Server

I have put my js in a public directory and trying to load the js in my HTML but getting an error. var express=require('express'); var bodyparser=require('body-parser'); var path=r

Solution 1:

To serve a file from the server to the client, you must declare the directory as a static.

Using express you can do this using,

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

To fetch the files under the public directory,

<script src="FilePathUnderPublicDirectory"></script>

Updated Code:

Now your server.js file should be

var express=require('express');
var bodyparser=require('body-parser');
var path=require("path");
var multer=require("multer");
console.log(__dirname);
var app=express();
app.use(express.static('public'));
var upload = multer({ dest: __dirname + '/uploads/' });
// app.set('views', __dirname + '/views');
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({extended:true}));
app.use(express.static(path.join(__dirname, 'public')));
 app.engine('html', require('ejs').renderFile);
app.get('/',(req,res)=>{
     res.render('some.ejs');
});
app.post('/',upload.single('upl'),(req,res)=>{
    console.log(req.body);
    console.log(req.file);
})
app.listen(3000,()=>{
    console.log("server is up");
})

Notice that I declare the public directory as a static directory at line 7.

Since your web3.js is directly under the public directory, in your front end, use

<scriptsrc="/web.js"></script>

For more, please check the doc.

Solution 2:

To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.

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

now you can serve static files like js, css and images.