I have a very simple web project and I'm using npm init to create the package.json file for the project. My project structure is below:
ProjectFolder
--app /this is the folder for js files
--css
--scss
--lib /this is for files like jQuery
--index.html
When adding a node package, it will create a node_modules folder like this:
ProjectFolder
--node_modules
--app /this is the folder for js files
--css
--scss
--lib /this is for files like jQuery
--index.html
Let's say I add jquery through npm install and make it a dependency. Is it good practice to link to the jquery file in node_modules from my index.html or move the jquery file to my lib folder?
Is there a way to move the jquery file to my lib folder when installing?
I don't want to move the node_modules folder to the server and want to know the best practice.
Your package.json is essentially your link. It contains a list of the packages you are dependent on and their versions. If you install something using npm install it has to be a published npm package on an npm repository somewhere (either public or private). It downloads a zipped version of the npm package and unzips it into node_modules. Anything in there is automatically then available to your app. Hope that helps.
Related
I have a custom node module, that I can't publish on NPM.
I'd like to use it as any module I have on NPM.
Is it possible without the awful thing of copying the folder into the node_modules?
The answer is: YES, IT's POSSIBLE.
Let's assume your module has a dist folder, with the built source
(for example I run gulp on my src folder and procude the dist folder).
you simply got to run npm pack ./dist in your library.
this will produce a tgz archive with your library named your-library-version
then you can install your module in your project by simply running
npm i path-to/your-library-version.tgz
And you're done.
Let's say my library fodler is C:\ngx-mat-lib
so my tgz will be in this folder, since the dist folder should be a child of ngx-mat-lib.
In my project I'll run
npm i C:/ngx-mat-lib/ngx-mat-lib-0.0.1.tgz
Note: using forward slashes to avoid doubling them
I have created a css folder in my public folder of my project. Is it handy to npm install bulma-start directly in the css folder? Currently project links to Bulma via CDN link but I want to install it on my local machine so the project can run it locally. Can you please recommend the best procedures for installing all dependancies correctly?
Using bulma-start is bit different as compared to working with other npm packages so here are the steps I've followed to work with bulma-start.
Create another folder say temp.
Initiate npm package there by using npm init
Install bulma-start by using npm install bulma-start.
Copy paste all the files inside the node-modules to wherever you want to work with this project.
Again do npm install to install the dependencies of bulma-start i.e. bulma etc.
Feel free to delete temp.
Is it handy to npm install bulma-start directly in the css folder?
bulma-start is a complete package to start working, this includes the whole js, sass, CSS folders and scripts to start working. So bulma-start should be considered as the parent folder of your project.
I have been using an NPM for angular-4 which support drag and drop objects (ng2-drag-drop). I found a missing functionality and decide to add it to the package.
What I did is forking the original project and adding my changes. after commit/push to my git I then used the following command to install my NPM :
npm install https://github.com/..... --save
the NPM installed successfully however when looking in my node_modules I see that the source files are missing and I have only the root directory including the package.json and some other files . any source files are missing.
I then tried to instal the NPM directly from the author git so instead of running :
npm install ng2-drag-drop --save
I used
npm install https://github.com/ObaidUrRehman/ng2-drag-drop.git --save
and I had the same issue with my fork.
Why the installation is different between the author git and the named package ? isn't it taking the files from the same location ? if no, what should I do to make it work ?
The reason you are not able to see the src folder is
If you see the git repo you will find two files
gitignore & npmignore.
In that npm ignore file you will find the src has been ignored to be prevent it from being added to the package when running npm commands .
Keeping files out of your package
Use a .npmignore file to keep stuff out of your package. If there's no
.npmignore file, but there is a .gitignore file, then npm will ignore
the stuff matched by the .gitignore file. If you want to include
something that is excluded by your .gitignore file, you can create an
empty .npmignore file to override it. Like git, npm looks for
.npmignore and .gitignore files in all subdirectories of your package,
not only the root directory.
You need to overwrite these settings to be able to get src contents in node modules when you do npm install
I am using Yarn v0.19.1 to install some dependencies. I deleted my node_modules folder completely and did a fresh yarn install.
I am trying to install the dependency leaflet using yarn add leaflet. The module installs successfully, except during the Cleaning Modules... phase, Yarn removes the images folder which would typically live within leaflet/dist/images. When I do a npm install leaflet this folder does not get removed.
During a yarn install, the images folder is present until the Cleaning modules phase happens.
Who/what is doing this? Is this something yarn does? Or is this something specified within the leaflet library? How could I resolve this?
I checked the package.json in the leaflet library and nothing seemed out of the ordinary there. It runs a jake file, but even within that file nothing is being deleted related to images.
Here is what the folder looks like, within my node_modules folder, for both package manager installs:
yarn
npm
There was a .yarnclean file in my project. This added some files/folders to ignore when installing dependencies. Running yarn clean added this file and I wasn't aware until I saw this issue. Viewing the docs also gave the same info.
I resolved this by removing images from the set of ignored directories.
Here is my .yarnclean file for an example:
# test directories
__tests__
test
tests
powered-test
# asset directories
docs
doc
website
assets
# examples
example
examples
# code coverage directories
coverage
.nyc_output
# build scripts
Makefile
Gulpfile.js
Gruntfile.js
# configs
.tern-project
.gitattributes
.editorconfig
.*ignore
.eslintrc
.jshintrc
.flowconfig
.documentup.json
.yarn-metadata.json
# misc
*.gz
*.md
I know that package.json has a dependencies section and a devDependencies section. I know package.json also has a postinstall hook. So I've currently got things setup like so:
dependencies: everything the server needs to run
devDependencies: everything I need to build the application (grunt and whatnot)
postinstall: runs "grunt build"
The grunt build take all my source jade, stylus, and javascript files and compiles/minifies them into my html, css, and app.min.js files. All these go into a ./deploy folder.
The grunt build process also copies in the server files (server.js and ./server/**/*) into the ./deploy folder. The issue is how do I go about copying in only the correct dependencies from the ./node_modules/ folder into ./deploy/node_modules and not all the devDependencies modules that aren't needed.
Is there something I can pass to npm install or put in package.json to tell it where to put the dependencies?
In the end I want to be able to zip up the ./deploy/ folder and send it off to a hosting site to run the app.