0

I'm trying to use intl-tel-input in a project I'm building using express and ejs.

I have app.use(express.static(path.join(__dirname, 'public'))); in my app.js which means Express serves all static files from the public directory in my project.

I am unable to integrate intl-tel-input as it's a node module and the relevant css and js files are located in /node_modules/intl-tel-input/build/... and they are not served by Express at all. Thus, when I try to link to them in my Ejs template, I get a 404 error.

How do I solve this? All the ideas I have seem like the wrong approach.

raghav
  • 225
  • 1
  • 2
  • 9
  • have you examine the 'examples' : https://github.com/jackocnr/intl-tel-input/blob/master/examples/template.html.ejs and using them as skeleton for what you need in your work – Robert Rowntree Feb 05 '21 at 16:39
  • @RobertRowntree yes I had a look. It doesn't solve my problem as those examples don't show how to link to the source css/js files when using Express. – raghav Feb 07 '21 at 11:28
  • that sounds like a problem that a bundler like webpack will solve . the path locations and disparate needs of client side vs server are resolved by the bundler ( repackaging ) in a separate build step before u start the app – Robert Rowntree Feb 07 '21 at 15:11
  • @RobertRowntree I did look into Webpack as a possible solution but decided against it for the extra complexity it would add. I've never used it before so would've had to put in some extra work. I found [this answer](https://stackoverflow.com/questions/27464168/how-to-include-scripts-located-inside-the-node-modules-folder) to be an extremely quick, effective and simple solution instead. – raghav Feb 09 '21 at 09:58

1 Answers1

0

After struggling with this for a while and exploring solutions like Webpack, RequireJS and other not so elegant ones, I found this answer to be the most relevant, easy and effective solution for this particular problem.

raghav
  • 225
  • 1
  • 2
  • 9