Include js and css files from node_modules into a static html page

Question

My dev server is running on node live-server. My prod will be a LAMP server.

I have normalize.css inside my node_modules server. In my index.html I have

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

I don't want files linked to node_modules directory.

I want something like

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

Is this doable? I have lot of other css and js files like this.

Update 1

Let me clarify, this app is not a node app nor a php app, It has only html, css and js files. Everything runs on client side, But.. we want to leverage the latest client side dev tools for JS and CSS and upload the final build to prod server.

A LAMP server?? Why on earth would (and could) a PHP server be used to run a Node app? — Jeremy Thille
– Jeremy Thille, Commented Feb 19, 2018 at 12:15
@JeremyThille only dev is a node server to make use of new JS architecture and packages. Prod is a Lamp server, its a enterprise decision. — phantomCoder
– phantomCoder, Commented Feb 19, 2018 at 12:18
But... You are aware that PHP is a language, and Javascript another language, that Node is a server, Apache another server, right? They are completely different technologies. Competitors. Running a Node app with PHP/Apache doesn't make sense. So, good luck with this "enterprise decision" :) — Jeremy Thille
– Jeremy Thille, Commented Feb 19, 2018 at 12:22
Typically you’d use a build tool to copy things from node_modules into some assets folder and refer to that. You can also configure Apache to serve static files from node_modules, though. — Ry-
– Ry- ♦, Commented Feb 19, 2018 at 12:27
@JeremyThille Let me clarify, this app is not a node app nor a php app, It has only html, css and js files. Everything runs on client side, But.. we want to leverage the latest client side dev tools for JS and CSS and upload the final build to prod server. — phantomCoder
– phantomCoder, Commented Feb 19, 2018 at 12:28

fyasir · Accepted Answer · 2018-02-19 12:42:22Z

11

There are lots of possible solutions. I can suggest using a task runner(gulp) which will copy these static files to a public directory like dist/assets.

Install gulp on your machine

npm install --save-dev gulp

Create a gulpfile.js file in your root directory with following code.

var gulp = require('gulp');

gulp.task('default', function () {
  gulp.src('/node_modules/normalize.css')
   .pipe(gulp.dest('./dist/assets'));
});

Run gulp

gulp

Update your index.html as below

<link rel="stylesheet" href="/dist/assets/normalize.css">

Please go through the documentation of Gulp for more information

You can also try Grunt or Webpack

answered Feb 19, 2018 at 12:42

fyasir

2,9902 gold badges26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ignas Vyšnia · Accepted Answer · 2018-02-19 12:29:50Z

2

You could use Webpack for bundling, which would copy css resources to the dist and replace references to it. It doesn't support html files as entry points though, so you'd need to work around that by probably using html-webpack-plugin.

anyway, as was mentioned by others - server decisions are weird.

answered Feb 19, 2018 at 12:29

Ignas Vyšnia

2,2671 gold badge19 silver badges16 bronze badges

Collectives™ on Stack Overflow

Include js and css files from node_modules into a static html page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related