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.

Answer 1

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

Answer 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.