Editing an NPM module locally - node.js

I would like advice on the best practice for modifying an downloaded NPM module (I am working with Webpack/ReactJS).
I have downloaded a package and I wish to remove it from node_modules and package.json and store it in myapp/src where I can edit the package and have the changes immediately available when I am running Webpack dev server.
I am sure there must be a way to do this but I can't seem to find it and it's driving me up the wall!
Thanks.

Related

NPM not installing node module

I have an angular project that comes with a package.json file and all the dependencies listed within, but each time I run "npm install", in the terminal, the packages appear to be downloading properly and a node module folder is created in my root folder, but at a certain stage the installation stops without an error message and the generated node module folder disappear from my project. please what do I do?
I can't reproduce your situation, somehow this may not fitable for you.
But I suggest re-install node.js to make sure npm install work correctly.
This link will help to find what version of node.js for you, based on you angular version.
Compatibility list for Angular/Angular-CLI and Node.js
Also, It would be good to manage node.js via NVM(Node Version Manager).

Should node_modules be in User folder or project folders?

I am a total Javascript newbie aiming to configure my Mac nicely for development.
NPM is installed.
I notice that folder node_modules exists in my Users/MyName directory.
I think this is a result of having either installed Node/NPM or specifically run npm install airtable the other day, which I did at the time in Users/MyName.
When I npm uninstall airtable, it removes airtable and its dependency folders from nodule_modules, leaving the following: #types and package-lock.json (hidden).
If I cd to new project-specific directory Users/MyName/Projects/Code/myusername/airtable-test and run npm install airtable from there, I expected the packages may get installed in that folder. However, again, they get installed up at Users/MyName/node_modules.
In both cases, .package-lock.json (non-hidden) and package.json are in Users/MyName, which seems messy to me. (I haven't done anything non-standard in install).
Is this the way things should be?
Attempts to solve:
I seem to read, including from questions on Stackoverflow, that storing modules at Users/MyName/node_modules is effectively storing them globally, accessible to any app, and such that projects don't have to get committed to server with all dependencies in tow - the idea being that, after you deploy your app, you then run npm install whilst in its folder, prompting it to install all dependencies.
Is this right? Should I be looking at storing all dependency modules in a project folder, or above and outside of it?
(If the answer to this question is opinion-based, I wasn't aware of that).
Here is what I believe is happening. You have your package.json in folder Users/MyName and you are running npm install in Users/MyName/Projects/Code/myusername/airtable-test. But the problem is you do not have package.json file in the folder Users/MyName/Projects/Code/myusername/airtable-test. So npm goes up in the directory to find the package.json and it found it in Users/MyName so it is installing the package there.
This is happening because the way npm identifies a project is by looking for package.json. If it does not find it in current directory than it assumes that you must be inside some sub directory of the project and start searching upwards in the folder hierarchy to find the package.json.
solution
Do npm init in the folder Users/MyName/Projects/Code/myusername/airtable-test. This will initialize the folder as a npm package (by creating package.json).

Changing npm module in the node-modules folder

I want to do some changes to an npm-module I already installed in node-modules folder ... I mean edit the code of the locally installed module
My question is ... should I re-run my react-native app with every change I made to see that change in action?
If yes...
I there a better and faster way for testing my changes?
If you change a Module Version in node-modules you have to rerun npm install and then start your app up again.
The app has to be rebuild/restarted beacuse it useses a newer Version of a module.
Normal Code changes not depending the node-modules can be refreshed without rebuilding the app with react natives hot reload.
This is not really an answer but more of a suggestion.
It's better that you don't change it inside the node modules directory if you want to reuse it somewhere else. You will also have trouble dealing with updates.
One way to handle it better maybe to fork the repo of the npm package in GitHub and then modify whatever you have to in that repo. Finally instead of installing that package, install your copy by specifying dependency in package.json like
"module-name": "https://github.com/<your userame>/<module repo>
or you could directly install using:
npm install https://github.com/<your userame>/<module repo>
The URL can be either the https or ssh URL of the repo.
More details on installing packages from Github repo
Also, regarding your question, if you use the above method, you will have to re-run your app after updating the package.

Can't build my web application when integrating bootstrap template

I'm totally new to Node.js meteor and all development outside of visual studio.
When I go in the console and add bootstrap like this :
npm install twitter-bootstrap
It gets installed and adds all the bootstrap files in my solution but when I run my application with meteor it says
Process finished with exit code 254
No more information. No errors. If I delete all the bootstrap files, it builds and run just fine. Any idea what might be causing this?
I've tried looking for the exit code meaning but I can't find it for my IDE and I'm a bit clueless as for why simply adding those packages without even referencing them anywhere in the project might cause my application not to run at all.
You can't add npm packages in your project folder like that. It will create a node_modules sub-directory that meteor will treat like any other project folder, i.e., it will interpret all the files in it. That's not what you want. Either do the npm install in a super-directory, or, better yet, use the meteor meteorhacks:npm package (https://atmospherejs.com/meteorhacks/npm):
meteor add meteorhacks:npm
and then add the npm dependency to your packages.json file.
{
"twitter-bootstrap": "2.1.1"
}
But the real question is: why do you need this package? bootstrap3 is already part of the standard meteor packages, i.e., you already have full access to bootstrap, incl. javascript.
You can use atmosphere meteor packages called mizzao:bootstrap-3 by running the commend
meteor add mizzoa:bootstrap-3
Alternatively if you want to use npm packages you must add meteorhacks:npm packages.
meteor add meteorhacks:npm
npm install twitter-bootstrap
You can specify all the required npm packages inside a packages.json file.
{
"gm":"1.16.0",
"twitter":"0.2.12",
"twitter-bootstrap":"2.1.1",
}

cannot find module express, how to install it to make it globally available?

I want to experiment with some node.js stuff and I installed it yesterday following someone's instructions on the web which got it up and running, and I got the standard Hello World web page up on the screen.
I now went to move onto another example, but in order to not clutter my home directory, I created a directory off of it (~/node) and created the files I needed in there. Low and behold, when it came time to run the service, I got no joy stating the express module couldn't be found.
The instructions told me to install express using the -g flag, but that didn't help. I even ran it again without any luck.
Now I've found this:
Cannot find module `express` | socket.io [node.js]
and it appears I have to install it again under the current directory. I have done that and it works. Is it the case it has to be installed under each directory that I want services running from? It seems an unnecessary duplication.
edit:
Not knowing much about js I thought I would go digging and found
app.use(express['static'](__dirname ));
and have realised this is probably the cause of my problem. Further research has found this: http://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders and if I install it once in a higher level directory, that should 'solve' my problem. I'm not going to bother about uninstalling the module, but for my next project I will try it and see how it goes.
I don't know why the original author suggested the -g flag when installing express, since it hasn't seemed to work for me.
NPM is a really nice tool, allowing you to install node.js modules locally and globally.
Local module installation
If you want to use a module for your project, you have to install it locally.
That's why npm creates a subdirectory called node_modules inside your project directory.
If you use the same module for two different projects, npm will download the module and install it twice. That's perfectly normal, it helps you manage different versions of the same dependency.
The best way to manage dependencies and install modules for a specific project is to fill the package.json with your dependencies and install them using
npm install
inside your project directory.
To access your modules in your code, use the require() function.
For example, with expressjs :
var express = require('express');
var app = express();
...
Global module installation
npm allows you to install modules globally as well. But remember that installing a module globally only provides more commands in your terminal, as with expressjs and express(1).
In order to install expressjs globally, run this in your terminal
npm install -g express
If you want to use a globally installed module in a specific project, you also have to install it locally (in your project directory, without -g).
I hope this answers clearly your question.
Express is capable of generating a simple app structure when installed globally. See this link and scroll to Using express(1) to generate an app section. It's a good way to get you started easily.
Take a look into package.json, package.json in nodejitsu
All npm packages contain a file, usually in the project root, called package.json - this file holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project's dependencies
a package.json example:
{
"name": "CRUD",
"description": "A simple CRUD",
"author": "Only for learn",
"dependencies": {
"express": "*",
},
}
so for install the dependencies go to level that package.json is, and run npm install this one will install all the dependencies you need for the project.
EDIT
a package.json interactive guide
I have found that when setting up node.js projects and dependencies, using Grunt [http://gruntjs.com/] has a lot of advantages. Although there are lots of different ways to setup a node and express project there is a lot to be said for using the Douglas Crockford approach and 'going with the grain'. In this case Grunt is the grain as it is becoming the de-facto standard for setting up a node project and there are existing templates for the most common types of node.js projects. You can find Grunt Express here [https://github.com/blai/grunt-express].
In this case Grunt would provide you with a project structure consistent with others, setup dependencies file for the node package manager and auto generate the express project for you. Packages are kept in a node_modules directory. If you are familiar with maven you might recognize the 'convention over configuration approach'.

Resources