Package dependencies in NPM and Bower - angularjs

First time user of npm and bower. I am able to install packages correctly but I am not sure how the dependencies work? As an example, I did "npm install angularjs" in my application root which created a folder "node_modules/angularjs/" with some files in it. I can also see that there is a package.json file within the angularjs folder, and it looks like it has not been processed as there is numerous packages listed in it and not installed.
Long story short, should I install all these packages manually or is there a built in feature that npm/bower can also process these sets of dependencies?
UPDATE:
I greatly lack the ability to ask precise questions, I apologise to those who have answered and did not give the correct sypnosis.
What I expect to happen:
Using npm or bower, I want to clarify that if I do an install of one of their packages, will it automatically also install the new package's dependancies or would I need to do a npm/bower install for each of the packages.json or bower.json files manually?
What I did to try make it work:
Created folder D:\Websites\TestSite
Within the folder through CMD, I did a "npm init" and ran through the guide
I followed that up with a "npm install angularjs"
A new folder was created D:\Websites\TestSite\node_modules\angularjs and within this folder there was a "index.js" and package.json file
Opening index.js I get a "require("angular");" and module.exports = window.angular.
The package.json file contains a number of dependancies which has not been installed.
My Result:
As per my expectations, npm install in point 3 above did not install the dependancies of the package.json file after it installed angularjs.
I am not sure but I assume that the index.js file needs to be included in my html and that it required the requirejs library initiated? If this is the case, then requirejs (which I do not have installed on my site) should be a dependancy for angularjs to work, and should be installed prior to giving me the ability to try and initiate it?
Am I missing a step or misunderstanding the functionality of NPM/Bower? Thank you for your patience!

Npm and Bower are great tools for managing your dependencies, i'll try to make it clear in a few words.
In general npm is used for managing your back-end dependencies and Bower is responsible for your front end dependencies.
There are 2 config files:
package.json, here are listed your dependencies that are not used in browser(e.g. bower, grunt). To install all dependencies in package.json run npm install.
Bower.json, here will be listed your "in browser" dependencies(e.g angular, jQuery). Run bower install to install all dependencies listed here in bower_components
You can find a extended guide i wrote here.

Related

How do i recover the packages in each lerna repository after i have deleted the node_modules from the sub folders?

My Repository Structure is
codebook
-packages
-clii
-local-api
-local-client
-lerna.json
-package.json
I installed local api to clii and local-client to local-api but for publishing i wanted to change the name of local-api and local-client so I changed local-api to #codebook/local-api and #codebook/local-client. And ran lerna bootstrap.
I was getting a npm ERR! code E404. So i deleted the node_modules in each subfolders. I thought lerna bootstrap would link the new files as well as install the packages. But it is'nt working. And now all the packages are missing from each sub repositories. I can't do a npm install in each of this repositories. What should i do to install all the packages?
If you are changing the package name of an internal dependency that you have already added to other packages, you need to change that package name in the dependent package.json files as well. Unfortunately I'm not aware of a way to tell lerna to migrate or "rename" a dependency in the project.
So if you changed local-api to #codebook/local-api you need to go into the package.json for clii and update local-api to #codebook/local-api as well.
That said: In my experience, lerna bootstrap is pretty buggy and 404s a lot. I do not know why. All of my issues with it were solved by using lerna for adding dependencies, and yarn workspaces to download and link dependencies. The difference being, lerna just adds to the package.json file while yarn does the downloading and symlinking work.
So the process here would be to add workspaces: ["packages/*"] to your package.json and add new deps via the following commands:
lerna add #codebook/local-api --scope=clii --no-bootstrap
yarn install

Create NPM Package with dependencies just for examples

I'm working on an NPM package right now.
The main code for the package (repo/src/maincode.js) has a few dev dependencies and a few dependencies needed to run it. When the user installs the npm package (through npm i) these dependencies will need be installed.
Now, that being said, I also want to create a react project that showcases this npm package, and have it live in the same repo, in an examples directory (repo/examples/react/app.js). This react app may have its own dependencies and dev dependencies, but I really don't want all of these to be forced onto the user when they're installing my npm package just to use in their projects.
How might I go about solving this problem? Is there a way to create a set of dependencies that are only installed if you are running a particular script, or running example code ?
You can give the examples directory its own package.json file and instruct folks who want to run the examples to cd into the examples directory and run npm i there. Any code in the examples directory that imports a module will look in its own node_modules before checking the node_modules in the parent directory.
The MarkoJS examples repository takes this approach and even makes it more granular. Instead of having a single package.json for the examples directory, there is a package.json for each separate example.
If you want, you can create a helper script in the main package.json for the user so they can do something like npm run build-examples and it will do the npm install for them as part of the process.

How do I install my forked React modules into Symfony 4?

I'm trying install a React module into my Symfony 4 project. I already have the React entry point setup and running with webpack encore, and now I want to add a module to the React app.
The React module has a github and can be installed through npm, but how do I install it into Symfony? How do I deal with the webpack.config.js and package.json files in the package, since Symfony has its own for these files.
I have compared the webpack.config.js and it seems like the Symfony one can override the other one, since it already covers React entry point and babel setup. What do I do?
Another problem I have is that the original module was outdated, so I forked the project to my repository, updated it and filed a pull request. But since the PR is still pending, I wanted to install my fork for now, what do I need to do?
NPM supports installing dependencies directly from github (or other git host) https://docs.npmjs.com/cli/install so executing npm install github:<githubname>/<githubrepo>[#<commit-ish>] should work fine from the package.json directory.
The React module has a github and can be installed through npm, but how do I install it into Symfony? How do I deal with the webpack.config.js and package.json files in the package, since Symfony has its own for these files.
I'm not familiar with Symfony, does it manage your NPM dependencies after install? If so you will have to determine how to accomplish the npm install via Symfony.
Another problem I have is that the original module was outdated, so I forked the project to my repository, updated it and filed a pull request. But since the PR is still pending, I wanted to install my fork for now, what do I need to do?
As per above, just specify your git path until your PR is pulled, then update package.json to the original repo

How should I include aws-appsync in AngularJS project

I am working on a AngularJS project that uses bower as package manager and gulp to inject the dependencies into the index.html file. I am not very familiar with both of these tools.
I now want to use AWS AppSync, but it is not available as a bower package.
Currently the AWS SDK is specified as a file dependency in bower.json as:
"aws-sdk": "./thirdparty/script/aws-sdk-2.69.0.min.js",
When I install aws-appsync with npm npm install aws-appsync the node_modules folder for aws-appsync contains multiple js files in the lib directory.
How can I include these with bower or is there another way to do this altogether?
I am currently unable to change much of the build and dependency management process so any suggestions working with the current tools would be much appreciated.
Thanks for reaching out!
The Bower team itself has recommended that people migrate to npm or yarn, and so aws-appsync has not been pushed to Bower.
It might be worth investigating whether you can install directly from github using something like...
bower install <github url>.git
... and install directly from the appsync-sdk github repo.
In the end I hacked together an interim solution until I can move the whole project over to npm and browserify.
I added the aws-appsync package using npm and required it in a new file. This file is then passed through a gulp task that uses the browserify plugin. The added file is then included into the rest of the build process as before.

Installing 2 year old application

I started a project 2 years ago that I now can't seem to install into other directories.
I used to follow these steps to install my angular frontend
npm install gulp
npm install typings
npm install
typings install
gulp build
I never had to do them again and it correctly installed a typings folder from which the gulp file found all it packages, it worked and I didn't mind how.
I am now trying to install it again and it does not fill the typings folder correctly, there only appears a index.d.ts file.
I found here https://github.com/typings/typings/tree/abea10b5787e1a18634d5f37bb2fa56550c32fd1
that it should've been around version 1.0.4.
So I try to install with:
npm install typings#1.0.4
But this still does not install any typing directory.
Any direction I should look into further would be apreciated.
If you look have a package.json file for the 2 year old project (which you should) then you should find the version numbers of each dependency in there.
Putting all my files in the package.json to the specified version an not just compatible with changed the error to Syntax error parsing, I was able to fix that with removing a translate application.

Resources