Add JavaScript and CSS files from the node_modules folder to enhance a static HTML webpage

Currently, my development server is set up using node's live-server. However, for production, I plan to use a LAMP server.

Within my node_modules directory, I have the normalize.css file. In my index.html, I currently link to it like this:

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

However, I would prefer not to link directly to files in the node_modules directory.

Instead, I would like to do something more along the lines of:

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

Is there a way to achieve this? Keep in mind, I have many other CSS and JS files structured similarly.

Update 1

To clarify, this application does not rely on Node.js or PHP - it consists solely of HTML, CSS, and JavaScript files that run on the client side. However, we aim to utilize the latest developer tools for CSS and JavaScript during the development process before deploying the final build to our production server.

cssnode.jsnpm

Answer №1

There are numerous solutions available for this task. One approach is to utilize a task runner such as gulp, which can be used to transfer these static files to a designated public directory like dist/assets.

To get started, install gulp on your local machine:

npm install --save-dev gulp

Next, create a file named gulpfile.js in the root directory with the following code snippet:

var gulp = require('gulp');

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

After setting up the gulp file, run the gulp command:

gulp

Make sure to update your index.html file with the following link:

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

For more detailed information, refer to the documentation provided by Gulp.

You may also explore other options like Grunt or Webpack as alternative solutions.

Answer №2

If you utilize Webpack for bundling purposes, it can handle copying css resources to the distribution folder and updating references to them. However, keep in mind that it does not directly support html files as entry points, so you may have to find a workaround, such as incorporating html-webpack-plugin.

In any case, as pointed out by others, decisions made on server setups can sometimes be unpredictable.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on how to properly position the navigation bar within a wrapper element

I'm having trouble fixing the navigation bar at the top of the wrapper when scrolling down. However, when I try using position: fixed in the #nav ul, the navigation bar extends beyond the wrapper. Below is my HTML code, where the nav bar should be con ...

htmlcss

Incorporating additional value attributes without replacing the existing ones

Is there a way to add a value attribute through jQuery without removing the old attribute, similar to how addClass works? I have 7 input fields that are being typed in, and I need to combine them into one word and pass it to another input field. When I try ...

javascriptjqueryhtmlcss

Troubleshooting issues with HTTPS connection to API on Express/Node/Nginx setup

I have set up an AWS instance and created a certificate using certbot. When I visit in my browser, it displays the default page. There is also a route configured at which returns text when accessed via http. However, when I try to access , I receive an " ...

node.jsexpressnginxamazon-ec2

Terraform creates an ECS Fargate task that fails the health check

Setting up an ECS cluster and Load Balancer using Terraform, I encountered an issue where my Fargate-deployed hello-world node app failed to pass the initial health-check and kept restarting. Despite ensuring that my Dockerfile, Load Balancer, and Task Def ...

node.jsamazon-web-servicesdockerterraformaws-fargate

Is it possible to leverage the className attribute in Material UI components?

Currently using React alongside Material-UI(MUI) for the frontend development. Encountering an issue with the Button Component in MUI, specifically the className prop. Struggling to apply custom styles using classes defined in the style.css file. Conside ...

cssreactjsmaterial-ui

The menu item is having trouble aligning to the right side

Hello, I am currently working on developing a website menu for a project and I am facing an issue with aligning the "Login" Menu item to the right side. Any assistance in resolving this alignment issue would be greatly appreciated. I am also willing to pro ...

phphtmlcssmenu

When attempting to implement sound on hover with an <a attribute containing an image>, the functionality is not functioning as expected

Is there a way to make a sound play only once when hovering over a list item that contains an image? Here is the HTML and JavaScript code I am using: function playclip() { var audio = document.getElementsByTagName("audio")[0]; audio.play(); } <ul ...

javascriptjqueryasp.nethtmlcss

Knejx Js is the embodiment of guarantees

I am trying to figure out how to make this function work. I only receive a promise as the output. codeProducts.forEach((code, index) => { const qt = app.db('products').where('code', code).first().then(result => result.quanti ...

node.jsexpressknex.js

One-way communication between two clients using Socket.io

While working on a basic socket.io application using React and Express, I've encountered an issue where two clients are facing difficulties in sending data to each other. For instance: Player 1 connects to the server followed by Player 2. Player 1 ...

javascriptnode.jsreactjsexpresssocket.io

Creating two submenus in the sidebar: a step-by-step guide

I am looking to implement a feature where clicking on the sidebar menu will reveal 2 submenus. Here is what I have implemented: $(document).ready(function () { $("[data-toggle]").click(function () { var toggle_el = $(this).data("toggle"); ...

htmljquerycssjquery-mobile-navbar

I am encountering some difficulties in the installation process of Angular CLI

Encountering an error trying to install angular cli despite updating both node and npm. https://i.stack.imgur.com/SpkNU.jpg ...

node.jsangularnpmangular-cli

How to change a date object into a datestring using the TZ format in JavaScript

Here is the input: const date = "06/01/2018" const time = "06:25:00" The desired output format is a string like this: "2018-06-01T00:55:00.000Z". I attempted to create the Date object using const result = new Date(date + time); //outputs an obje ...

javascriptnode.jsreactjsecmascript-6

What is the best way to link CSS files from libraries that are downloaded using npm?

For instance, let's say I installed a package: npm install --save package and it gets saved in ./node_modules/package/ Inside that folder, there might be a directory named styles and within that directory, you could find style.css. How can I link ...

javascripthtmlcssnode.jsnpm

Error: The function getUserInfo does not exist

I'm currently utilizing Jest to conduct unit tests on my code. One of the files I have is userinfo.js const getuserdata = async function (req, res, next) { let userinfo = await getUserInfo(); return userinfo; } const getUserInfo = async func ...

node.jsunit-testingmockingjestjs

Trouble with CSS table background display in Outlook

I am experiencing issues with an HTML table in an email template: <table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"> <tbody> <tr> &l ...

htmlcss

Sails.js: Issue with unintended premature sending of 200 response before desired response is sent

While working with Sails.js version 1.2.3, I encountered an issue where I was unable to send data from a file as a response to a GET request over HTTP or WebSockets. It seems that regardless of whether I access the file synchronously or asynchronously in t ...

javascriptnode.jsexpresssails.js

Adjust the navigation text and logo color as you scroll on the page

I am new to HTML and CSS and I am working on a website with PagePiling.js scrolling feature. I want to change the color of my logo image and navigation text dynamically as I scroll to the next section. Specifically, I only want the part of the logo and tex ...

javascriptjqueryhtmlcsspagepiling.js

Having trouble sending values via POST request in Node.js using Express

Currently, I am in the process of learning how to use Express (v4) with Node.js. My main goal right now is to create a basic REST API. This API specifically focuses on one endpoint: /orders. The main functionality I am trying to achieve is the ability to r ...

javascriptnode.jsexpress

Designing a Scrollable tbody Element while Preserving the Integrity of the tbody Columns

Currently, I am attempting to implement a scrollable tbody in order to run a React package smoothly. The challenge lies in achieving a scrollable tbody without having to resort to using display: block on the tbody element. Unfortunately, this solution dis ...

csshtml-table

What is the best way to create a delete route for multiple items using Node.js, Express, and MySQL?

Attempting to remove a group of items from the client based on their sku code. import express from 'express'; import { pool } from './mysql'; import cors from 'cors'; import { config } from 'dotenv'; config(); const ...

mysqlnode.jsexpress