Tips for developing an npm package that includes a demonstration application

When creating packages, I believe it's important to include a demo app. However, I'm unsure about the best way to organize the file structure for this purpose.

My goal is to have one Github repository containing both my published NPM module and a simple demo webapp.

Ideally, I would like to have a top-level structure like this:

package/
demo/

Where only the code inside the package/ directory gets distributed to NPM. I could use the files: ['package'] option in the package.json file, but then all the code will have that path prefix, such as:

node_modules/MyPackageName/package/index.js

Is there a way to modify the path prefix so that it changes the top-level directory and removes the extra package/ used for organizing the files?

I know some people might have solutions for this, but I'd prefer not to have two separate repositories - one for the demo and one for the package.

Clarification: I want to be able to install the package directly from Github, similar to a "poor-man's private NPM". Therefore, I don't want to publish from within the 'package' directory. I believe you can specify a branch when using Github URLs, but not a subdirectory.

Answer №1

If you want to set the NODE_PATH environment variable, follow these steps:

export NODE_PATH='yourdir'/node_modules

Check out this reference for more information.

When NODE_PATH is set to a list of absolute paths separated by colons, Node.js will look in those paths for modules if they can't be found elsewhere.

For Windows users, remember that NODE_PATH uses semicolons (;) as separators instead of colons.

NODE_PATH was originally designed to help with loading modules from different paths before the current module resolution algorithm was finalized.

Although NODE_PATH is still usable, it's not as crucial now that the Node.js community has agreed on a standard way to find dependent modules. However, deployments relying on NODE_PATH may encounter unexpected issues if NODE_PATH isn't configured correctly. Changes in a module's dependencies might result in a different version (or even a different module) being loaded during a search through NODE_PATH.

Additionally, Node.js automatically looks in certain GLOBAL_FOLDERS:

1: $HOME/.node_modules 2: $HOME/.node_libraries 3: $PREFIX/lib/node Where $HOME represents the user's home directory and $PREFIX stands for Node.js's configured node_prefix.

These folders are mainly retained for historical reasons.

It's highly recommended to keep dependencies in the local node_modules folder for faster and more reliable loading.

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

Error: The function setEmail is not defined. (In 'setEmail(input)', 'setEmail' is not recognized) (Cannot utilize hooks with context API)

App.js const[getScreen, showScreen] = useState(false); const[getEmail, setEmail] = useState(""); <LoginScreen/> <LoginContexts.Provider value={{getEmail,setEmail,getScreen,showScreen}}> {showScreen?<Screen2/>:<LoginScre ...

Reveal each element individually upon clicking the button

I am trying to display 5 div elements one by one when clicking a button, but the current code is not working. I am open to alternative solutions for achieving this. Additionally, I want to change the display property from none to flex in my div element. ...

Retrieve the HTML tags following the modification of my information in ASP.NET

Apologies for any language errors, I am new to asp.net development. 1- I have a table with dynamically created rows and columns based on user selection of row and column numbers. 2- Each row in the table has the following controls: A- One textbox, one l ...

Tips for resolving npm installation issues using the CXX=clang++ --unsafe-perm command

Currently using OSX Mojave, I'm facing a unique challenge with my node and npm installations. Whenever I try to run npm install, I find myself needing to add CXX=clang++ before the npm command, followed by --unsafe-perm, and sometimes even requiring s ...

Adjusting the dimensions of the canvas leads to a loss of sharpness

When I click to change the size of the graph for a better view of my data in the PDF, the canvas element becomes blurry and fuzzy. Even though I am using $('canvas').css("width","811"); to resize the canvas, it still results in a blurry graph. I ...

What sets $vm.user apart from $vm.$data.user in Vuejs?

When you need to retrieve component data, there are two ways to do so: $vm.user and $vm.$data.user. Both methods achieve the same result in terms of setting and retrieving data. However, the question arises as to why there are two separate ways to access ...

Leveraging the power of express, employing the await keyword, utilizing catch blocks, and utilizing the next

I am currently developing an express JS application that follows this routing style: router.post('/account/create', async function(req, res, next) { var account = await db.query(`query to check if account exists`).catch(next); if (accoun ...

Encountering an error with the node module timestampnotes: 'command not recognized'

I am encountering an issue while trying to utilize a npm package called timestamp notes. After executing the following commands: $npm install timestampnotes $timestamp I receive the error message: timestamp:126: command not found: slk Subsequently, I ...

Node.js backend includes cookies in network response header that are not visible in the application's storage cookies tab

I am currently working on creating a simple cookie using express's res.cookie() function. However, I am facing an issue where the cookies are not being set correctly in the application tab. My project setup includes a React frontend and a Node backend ...

"Creating a cohesive design: Using CSS to ensure the navigation background complements

I am working on a project with a horizontal navbar that I want to stay fixed while scrolling. The main window has different colored divs as you scroll down, and I would like the navbar to match the image of the main div while scrolling, creating a looping ...

Encountering multiple errors while attempting to download PhoneGap through npm

I'm encountering issues while attempting to download PhoneGap using npm from the command line. I consistently receive errors with Node versions 4.0.0 and 4.1.0, specifically detailed here: this Unfortunately, I am limited by a company proxy which I c ...

Keeping track of important dates is ineffective using the calendar

I am facing an issue with developing a calendar that marks events on the correct dates. I am receiving the dates in the following format in PHP [ { "status": "OK", "statusCode": 200, "statusMensagem": & ...

Learn the ins and outs of utilizing *ngIf in index.html within Angular 8

Can anyone explain how I can implement the *ngIf condition in index.html for Angular2+? I need to dynamically load tags based on a condition using the *ngIf directive, and I'm trying to retrieve the value from local storage. Below is my code snippet b ...

Is it possible to bundle multiple native modules within a single NPM package?

I have developed a cross-platform native module in C for nodejs using cmake, musl, as well as some abstractions and #ifdefs. It has been compiled into a module with cmake-js and I have build servers for Windows, Mac, and Linux which successfully build the ...

AngularJS: Refresh array following the addition of a new item

After saving an object, I am looking to update an array by replacing the conventional push method with a custom function. However, my attempts have not been successful so far. Are there any suggestions on how to rectify this issue? app.controller("produ ...

Preserving state during navigation and router refresh in Next.js version 13

In the component below, we have a Server Component that fetches and renders data. When router.refresh() is called on click, it reruns the page and refetches the data. However, there is an issue with Nextjs preserving the state. Even though the server compo ...

Unable to suppress error in AngularJS $http.get() call when using catch() method

Below is a simplified version of the code I'm working with, running in CodePen for example: var app = angular.module("httptest", []); app.controller("getjson", ["$scope", "$http", function($scope, $http) { $http.get("https://codepen.io/anon/pen/L ...

Common mistakes encountered when utilizing webpack for react development

I'm currently following the exercises in Pro MERN Stack by Apress and have come across a webpack issue. Everything was running smoothly until I introduced webpack into the mix. Now, when I execute npm run compile, I encounter the following error: > ...

Problem encountered when trying to show the Jquery Ajax response on an HTML page

I'm facing a challenge with loading a page that needs to display values with dynamic pagination. To retrieve these values, I am making a REST call which returns a JSON object. Although I can see the JSON output in the browser console, I am unable to d ...

Guide on creating 2 select inputs with distinct elements?

Imagine you have two select inputs called 'Favorite Fruits' and 'Least Favorite Fruits'. Both of them contain a list of 5 fruits. // The following code is an example to demonstrate the issue <select name='favoriteFruits'& ...