NOde.js / Express App找不到某些node_modules

Question

I use several Node/Express modules in my app, and everything works fine for every module as long as I do const module = require('module'); . I don't need to define a static path for these modules as app.use(express.static(path.join(__dirname, 'public'))); .

However, for the sweetalert module, if I define in my layout.pug (base pug file) script(src="/node_modules/sweetalert/dist/sweetalert.min.js") , I get a 404 Error (not found) unless I include in app.js the following static path: app.use("/node_modules", express.static(__dirname + "/node_modules")); .

My question is: is this the normal behaviour or is it something I'm not doing right? (I'm kinda confused why I have to define a static path just for one of several modules I use.

Answer 1

Here's whats going on:

app.use(express.static(path.join(__dirname, 'public'))); is declaring that the public directory is accessible to the browser. You should put all your front end resources in that folder. This will help separate what can be accessed from the server and what can be accessed from the client.

When you reference script(src="/node_modules/sweetalert/dist/sweetalert.min.js") the browser throws a 404 because that file is not located in the public directory, therefore off limits to the browser.

Adding this line app.use("/node_modules", express.static(__dirname + "/node_modules")); "fixes" your issue but now exposes all your node_modules to the browser. This probably isn't a good idea and I'm sure a security expert could elaborate why this shouldn't be done.

How I would resolve this issue: Go through your .pug code and look at any resources your front end requires. Then copy them over to the public folder and fix your references to use the copy of the resource.

Here's an example of a script I use to move resources from the node_module directory to a public/assets directory:

build.js:

const path = require('path');
var fs = require('fs');

const ASSETS = [
    'jquery/dist/jquery.min.js',
    'sweetalert/dist/sweetalert.min.js'
];

if (!fs.existsSync('./public/assets')){
    fs.mkdirSync('./public/assets');
}

ASSETS.map(asset => {
    let filename = asset.substring(asset.lastIndexOf("/") + 1);
    let from = path.resolve(__dirname, `./node_modules/${asset}`)
    let to = path.resolve(__dirname, `./public/assets/${filename}`)
    if (fs.existsSync(from)) {
        fs.createReadStream(from).pipe(fs.createWriteStream(to));
     } else {
        console.log(`${from} does not exist.\nUpdate the build.js script with the correct file paths.`)
        process.exit(1)
    }
});

then I update my package.json to include this in the scripts:

package.json:

"scripts": {
    "build": "node ./build.js || true",
    "start": "node ./bin/www"
}

then in any of my views pages I reference the resource by using the new path

random.pug:

script(src="/assets/jquery.min.js")
script(src="/assets/sweetalert.min.js")

Finally before you deploy your app you now must run the following command: npm run build then npm start

You will only need to run the build command if your front end resources change. So if you only ever use sweetalert.min.js you will only need to run the build the first time you run your app. If later on you add another resource aNewResource.js you will need to update the build.js file and run npm run build again.