Steps to releasing JavaScript and asset files on npm

I have created a custom UI component for internal company use and released it on npm. However, after installing the package, I noticed that only the index.js file is showing up in the node_modules directory.

I am not utilizing any package builders or ES modules, just plain .js and .css files.

The structure of the folder I want to publish as the package includes:

package
 - src
   - index.js
   - index.css
   - assets/
     - fonts/
       - ..various font files
     - images/
       - icon.svg
 - package.json
javascriptnpmnpm-publishnpm-package

Answer №1

To determine what files npm is considering for publishing, utilize the command npm publish --dry-run. Alternately, you can use npm pack to create a tarball and inspect its contents.

If certain files are missing during publishing, review any pertinent .npmignore or .gitignore files that may be causing them to be ignored by npm. Refer to the appropriate npm documentation if needed.

Additionally, examine your package.json file for a files: entry, which specifies "an array of file or directory names that should be included in your package" as stated in the linked docs. If such an entry exists, add any desired files that need to be published but are currently excluded.

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

Steps for extracting URL parameters from AWS API Gateway and passing them to a lambda function

After successfully setting up my API gateway and connecting it to my lambda function, I specified the URL as {id} with the intention of passing this parameter into the lambda. Despite numerous attempts using both the default template and a custom one for ...

javascriptnode.jsamazon-web-servicesaws-lambdaaws-api-gateway

Experiencing difficulties while attempting to utilize Appium on Ubuntu, encountering a node.js:134 error

I installed nodejs by using the following command: sudo apt-get install -y nodejs Similarly, I installed appium with the command below: sudo npm install -g appium Despite the warning on the appium page advising against using sudo, I had to use it becau ...

node.jsnpmubuntu-14.04sudoappium

What is the most effective method for displaying an error code when a JavaScript error occurs?

I'm currently dealing with a library that is throwing errors: throw new Error('The connection timed out waiting for a response') This library has the potential to throw errors for various reasons, making it challenging for users to handle ...

javascripterror-handling

JavaScript conversion of arrays to JSON data structures

Here is the code snippet along with the variable 'polygon': var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; var bermudaTriangle; var directionsPoints; var example; var rez; function initialize() { ...

javascriptarraysjson

Incorporating Google Maps and Firebase Cloud Messaging into a single React Native application

Attempting to implement both Google Maps and FCM in a single React Native project has proven challenging. Initially adding FCM went smoothly, but upon integrating Google Maps, an error surfaced: https://i.stack.imgur.com/katfd.png After extensive research ...

androidreact-nativegradlenpmbuild.gradle

Having a ReactJs issue: When trying to run npm start, it's not working. I attempted to fix it by running "npm cache clean --force" but still no luck. Now I

Encountered the following error : [email protected] start /home/gaurav/Desktop/Django + React/Saurav Hardware/saurav_hardware/my-app react-scripts start sh: 1: react-scripts: not found npm ERR! code ELIFECYCLE ...

reactjsnpm

An error occurred while trying to initialize the ui.bootstrap.demo module in AngularJS

Currently, I am in the process of learning angularjs and have encountered a roadblock. An error keeps popping up: ncaught Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap.demo due to: Error: [$injector:nomod] Module 'ui.bootstr ...

javascriptangularjs

The React Native application is working fine on the emulator but is encountering some issues when trying

While the app runs smoothly on an emulator through Android Studio, I encounter an error when trying to run it from the CLI. error Failed to install the app. Ensure that you have set up the Android development environment properly: <a href="https://fac ...

javascriptreactjsreact-native

Using jQuery, it is possible to eliminate a div element without affecting its contents

<div class="a"> <div class="b"> <ul> <li>Element A</li> <li>Element B</li> </ul> </div> </div> How can I eliminate div class="b" solely? I require the presence of div a, u ...

javascriptjqueryhtml

Implement a T3 App Redirect in a TRPC middleware for unsigned users

Is there a way to implement a server-side redirect if a user who is signed in has not finished filling out their profile page? const enforceUserIsAuthed = t.middleware(({ ctx, next }) => { if (!ctx.session || !ctx.session.user) { throw new TRPCE ...

javascriptreactjstypescriptnext.jstrpc.io

How to achieve the functionality of ocibindbyname in JavaScript

I am currently utilizing an HTA page that is coded in JavaScript to monitor various Oracle tables. My goal is to optimize the Oracle query caching by using bind variables, similar to how I implemented it in a PHP environment with this code: $sql = "selec ...

javascriptoracle

What is the process for assigning a regular expression to an object?

As I work on editing a configuration file, I'm encountering some issues where things aren't quite functioning as expected. Below is the code snippet I am working with: config.module.rules.unshift( { test: "/ckeditor5-[^/\\ ...

javascriptjsonregexwebpackconfiguration

Learn how to efficiently execute a function multiple times using pure JavaScript

I am trying to create a tabbed content functionality with multiple elements. How can I utilize the same function for various elements declared in a variable? For example, I want to clone the parent div.tabs element with similar content but different ids an ...

javascripthtmlclick

Interactive chat feature with live updates utilizing jQuery's $.Ajax feature for desktop users

I came across a script for real-time chat using $.ajax jQuery, but it only refreshes my messages. Here's an example scenario: I type: Hello to You, and I see this message refreshed. You reply: Hey, in order to see your message, I have to manually refr ...

javascriptphpjqueryajaxchat

AngularJS postback method fails to trigger

Seeking assistance with my angularJS AJAX postback method. Below is the HTML code I have created: <html xmlns="http://www.w3.org/1999/xhtml" ng-app> <head runat="server"> <title></title> <script src="Scripts/angular.js ...

javascriptjqueryasp.netangularjsajax

How are jQuery.ajax and XMLHttpRequest different from each other?

My goal is to fetch and run the script contained in a file named "example.js" using an AJAX request. Suppose the content of example.js looks like this: const greetings = { hello: "Hello", goodBye: "Good bye" } console.log(greetings.hello) In anot ...

javascriptjqueryajaxxmlhttprequest

What is the best approach for scaling @material-ui Skeleton in a grid row with variable heights?

I am working on creating a grid of Avatar images with a transition state where I want to show a skeleton representation of the image. To achieve this, I am using @material-ui/lab/Skeleton. The issue I'm facing is that since my images are set to autos ...

javascripthtmlcssreactjsmaterial-ui

Iterate through a generic array to populate a table using ng-repeat

In the scenario I'm currently facing, I am working on creating a common reusable table structure using a directive. The goal is to display different JSON data in both the table header and body. Below is the controller code: angular.module('plun ...

javascriptangularjs

Communication between a directive controller and a service via an HTTP call

I'm currently developing an Angular directive that loads a Highchart.js area graph by passing some variables to it. Here's how I am using the directive: <andamento-fondo-area-chart color="#3FAE2A" url="../data.json"></andamento-fondo-a ...

javascriptangularjshighcharts

Having difficulty creating the probot.github app due to an error: The removal of the programmatic API in npm version 8.0.0 causing failure

Currently, I am facing an issue while attempting to set up the probot.github app using the command npx create-probot-app my-first-app which can be found at: . My system is running on the latest node version v19.3.0 with npm version 9.2.0. However, upon exe ...

javascriptnode.jsnpmgithub-appprobot