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

The process of ensuring a component updates upon clicking on it

In the process of creating a to-do app, I am working on implementing an edit mode for tasks. My goal is to have a task title that expands into task details when clicked (using Collapse from MUI). Additionally, I aim to enter into an edit mode by clicking o ...

javascriptreactjsmaterial-ui

Hmm, I seem to be encountering an error where res.sendStatus is not recognized as a function. What could be causing this

For the last few months, I have been immersed in Node.js/Express to create a REST Api. However, I've hit a roadblock with an async function in my controller.js file. The callback function is successfully receiving the client's request, but when i ...

javascriptnode.jsrestexpress

Implementing setTimeout with the copy button: A guide

How can I implement a setTimeout function in the copy button so that when a user clicks on it, the text will change to "copied" and then revert back to "copy" after 3-4 seconds? Please help me find a solution to this problem and also optimize the JavaScrip ...

javascriptjqueryclipboard.js

Is the express.json() middleware for parsing JSON request body designed to handle synchronous calls?

According to Express.js's documentation, it is recommended to avoid using synchronous functions as much as possible. This is because in high-traffic websites, the accumulation of synchronous calls can negatively impact the performance of the applicati ...

javascriptnode.jsexpress

Issue encountered during the creation of a Nuxt3 project. The download of the template from the registry was

Trying to create a new Nuxt 3 project using the command below: npx nuxi init nuxt-app The following error message is displayed: ERROR (node:1752) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time ...

javascriptvue.jsfrontendnuxt.jsnuxt3.js

Authentication for file uploads in Angular 2 using Dropzone and passportjs

I am currently working on implementing authentication for an admin user using Express, Passport, and MySQL in a specific page. The authentication process works fine, but I am facing an issue with verifying whether the user is logged in while uploading file ...

javascriptangulartypescriptpassport.jsdropzone.js

Switch up div containers with JavaScript based on the set array order of elements?

As I work on creating a list that calculates the sum of selected numbers, I encountered an issue with rearranging the items. Despite successful functionalities like adding images with names, changing languages, and performing calculations, the page keeps r ...

javascripthtml

Enhance Select Dropdown in AngularJS with Grouping and Default Selection

I am facing an issue with a form that includes a SELECT element. I have successfully loaded the possible values in my controller from a function that retrieves data from a database and groups the options by a group name. Although the list of options is lo ...

javascriptangularjsdrop-down-menu

Enhance your coding experience with code completion and autocomplete in Angular/Typescript using ATOM within

Is it possible to have Codecompletion / Autocomplete in Atom similar to Webstorm? Currently I am getting familiar with TypeScript and really enjoying it, but the lack of Codecompletion support for my HTML files in Atom is quite frustrating. Having this f ...

javascripthtmlangularjstypescriptatom-editor

Is there a way to output $2 before $1 within a bash script that is executed by npm?

I find myself puzzled by the connection between my custom npm scripts and the bash scripts they execute. UPDATE: This doesn't seem to be solely a bash issue. I can replicate the desired results mentioned below by writing echo $2 $1 into a .sh file an ...

node.jsbashshellnpm

Kohana ajax causing removal of JQuery Data attributes

Currently, I am developing an application where jquery data is used to pass variables to HTML elements. It has been successful in one part of the site when the data attributes are added to a tr tag. The following code works: <tr class="js-instructions ...

javascriptjqueryhtmlajaxkohana

The use of p-message in Angular's PrimeNg library is not permitted

Hey there, I'm having a bit of trouble with the p-message Tag in Angular. I believe I've imported it correctly as shown below. import { MessageModule } from 'primeng/message'; imports: [ .... MessageModule, ... In the ...

javascriptangulartypescriptprimengprimeicons

Using AngularJS to inject a variable into the standard filter

Currently, I am attempting to develop a custom filter that mimics the functionality of the standard Angular filter in HTML, with the distinction that it accepts a variable as input rather than a fixed value. For instance, within my html document, you may ...

javascriptangularjs

change the return value to NaN instead of a number

Hey there, I have something similar to this: var abc1 = 1846; var abc2 = 1649; var abc3 = 174; var abc4 = 27; if(message.toLowerCase() == ('!xyz')) { client.say(channel, `abc1` +`(${+ abc1.toLocaleString()})` +` | abc2 `+`(${+ abc2.toLocaleStri ...

javascript

Backdrop behind of Bootstrap modal located back of other page contents

I'm facing some challenges after transferring a website I developed locally to a live server. The modal windows are appearing behind other content on the live server, although they work perfectly fine on the local version. Despite my attempts to adju ...

javascriptjquerycsstwitter-bootstrapmodal-dialog

Access a document from a collaborative directory directly in a web browser

When I paste the shared path for a PDF file into the address bar, it opens perfectly in all browsers. The code below works fine in IE 8 but not in Chrome and Firefox. Code: function openPDF(file) { window.open(file, '_blank'); } function link ...

javascriptjqueryhtmljqgridanchor

What methods can be used to initiate form error handling in React/Javascript?

I am currently utilizing Material-UI Google Autocomplete, which can be found at https://material-ui.com/components/autocomplete/#google-maps-place, in order to prompt users to provide their address. https://i.stack.imgur.com/nsBpE.png My primary inquiry ...

javascriptreactjsreduxmaterial-ui

Building better interfaces with Next.js, Styleguidist, and Fela for React applications

Has anyone successfully set up next.js with Fela and Styleguidist? I'm having trouble linking the Next.js webpack configuration to Styleguidist as mentioned in this article: I've been using this example app: https://github.com/zeit/next.js/tree ...

javascriptreactjsnext.jsreact-styleguidist

When working with React-Native App and combining React-Navigation with Redux, a common error may occur stating that 'action.routeName' is not an object. This issue can be

I encountered an error in my React Native app while implementing react-navigation within redux. The issue, along with a screenshot for reference, can be found here. Currently, I have not incorporated any redirects into the application. However, my plan in ...

javascriptreactjsreact-nativereduxreact-navigation

How to fix the "missing argument error" when running `npm

I've been attempting to set up eslint locally within a project folder. However, following the installation instructions on https://eslint.org by running: npm install eslint --save-dev I encountered the following error: npm ERR! Linux 4.15.0-70-gene ...

node.jsnpmnpm-installeslint