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.
Related
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
I'm using Wiredep tool with Gulp, to inject into my index.html on the run everything that I install using Bower. I don't want to download all the files listed here.
Is there a way to download only precise locale?
I've tried
bower install angular-i18n/angular-locale_uk-ua.js
And I got
fatal: remote error:
Repository not found.
In order to do this angular/bower-angular-i18n repo should be forked.
If the concern is to lower bower_components footprint on server side, postinstall hook can be supplied in .bowerrc to delete extra files from the package after installation.
I am new to grunt, I am not able to understand initial setup. What I have done all is installed node and grunt and this is no where related to my project. My question is
1. how to add grunt to my project. I am using angular project. Do I have to add grunt inside my project folder? if yes, Where should I add and how should I add?
2. Many of the document says to update gruntfile.js. When I search I
can see so many gruntfile.js inside grunt\node_modules folder. Which
gruntfile.js file I should modify?
Grunt doesn't actually go into your angular project. Only libraries that are meant to show up in your client's browser (i.e. to actually run the webapp) should be injected into Angular.
Think of grunt as a tool to help you manage the build system outside of your angular project.
You could run npm install grunt --save-dev and it would create a package.json file with information regarding your dependencies.
www.egghead.io has some great resources on learning Grunt and Angular, as does http://build-podcast.com/.
Consider also looking into npm, gulp, webpack and other alternatives.
Step1 - Install node and npm
Step2 - npm install -g grunt-cli
Step3 - Create Gruntfile.js in your project root folder. Click here for sample file
Step4 - register a task
Step5 - Run Grunt
I downloaded a sample Angular app from
https://github.com/angular/material-start
When I open the index file I just get raw Angular syntax and the pages are not showing correctly.
How can I fix this?
You need to run bower to get your dependencies. Just downloading the repo is not enough.
http://bower.io/
Install bower, the in your repo run a bower init
You should see it grab Angular and other items needed.
You need to do the following command in the root directory of your git clone:
npm install
This does a bower install also. You need npm installed (packaged with nodejs)
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.