As complexity of my web project is growing, I am realizing that downloading external JavaScript libraries manually, is error prone, time consuming and making project less maintainable over time.
Although Visual Studio has NuGet package manager, it is not as powerful as bower. Also not all external libraries are being released on NuGet.
But there is no clear help on how to configure bower with Visual Studio. Please help !
As complexity of my web project grew, I realized that downloading external JavaScript libraries manually, was error prone, time consuming and made project less maintainable over time.
Although Visual Studio has NuGet package manager, it is not as powerful as bower. Also not all external libraries are being released on NuGet.
So, I decided to take the plunge and get started with bower.
My project structure is now much cleaner and easy to maintain.
Here I am listing steps, we need to take to configure bower with Visual Studio.
Detailed steps to use bower are already available on http://bower.io/#install-bower. Here I will list steps, I took to
— install bower
— configure it with Visual Studio
— download a sample package -- ( AngularJS )
Bower requires node, npm and git for windows.
Before proceeding ahead, install the following
git for windows – install from https://msysgit.github.io/
node – install from https://nodejs.org/
npm is part of node (no need for any extra step)
Step# 1
Open Command Prompt and execute command
npm install -g bower
Above step may fail, if you are behind corporate proxy server. To add
proxy server settings in npm, execute following 2 commands from
command prompt
npm config set proxy http://proxy.myCompany.com:80
npm config set https-proxy http://proxy.myCompany.com:80
Once done, try installing
bower again
Step# 2
Navigate to your Visual Studio Project folder from Command Prompt.
Execute command
bower init
Include this file to Visual Studio project. You may have to click on
“Show All Files” from Solution Explorer menu.
Step# 3
Create a .bowerrc file using notepad with following configuration and save it in your Visual Studio Project folder
{
"directory": "scripts/bower_components",
"proxy":"http://proxy.myCompany.com:80",
"https-proxy":"http://proxy.myCompany.com:80"
}
Include this file to Visual Studio project.
Edit this file to set directory for packages to be downloaded by
bower
Add proxy server settings if you are working behind corporate proxy. Else remove the last 2 lines for proxy and https-proxy
Step# 4
To download AngularJs, execute command
bower install angular –save
This will add a line in bower.json.
Step# 5
Package will be downloaded under bower_components directory by default. (or under the directory mentioned in .bowerrc file)
Make to sure include the whole package directory in Visual Studio project.
Click on Show All Files
Right click on new downloaded package and click on “Include in
Project”
Step# 6
Finally add reference of new package to your index.html
I found that I also needed to configure git to use the proxy server :
git config --global http.proxy http://username:password#proxyURL:8080
After that bower worked in VS 2015
Related
I am currently using a github url as a package which is basically a private base library for my application.
While a npm package will run the npm build script after it is installed it currently appears that if you use a github url as package no build script will be run after installation (Yes in that thread they say that if using npm 5 a prepare script will be run but from my testing it does not work).
I am wondering if it's possible to define a script in a parent npm package.json that would run the build script of a dependency after it installs?
Or if you have any better way to deal with this problem would be most welcome.
I'm working on a set of JavaScript projects and some of these have dependencies between them. I've chosen JSPM as my package manager - which is all fine. But during development I want to have the most efficient frictionless way of working with this.
What is the best way for me to be able to have a dependency from one project to another in a totally transparent way - when I work on it locally, I get to just jump between projects without having to do any packaging or installation of packages and at the same time package information with its dependencies being what is expected to be for release (public package) and builds on the CI??
With NPM I could be doing npm link- anything similar I can be doing??
You could use jspm link
Running jspm link in a module will publish it into the locally global "link" repository.
Running jspm install --link will then install a project from the "link" repository.
The only functional difference between npm link is that (for the moment at least) jspm link will need to be run every time your local code changes. This can be automated with a watch task (see jspm-cli#481).
When installing anything via npm, it downloads dozens of not needed files. Usually I am looking for a library final build, a *.min.js file or anything like that but the rest is useless.
How do you handle all these useless files? Do you remove them by hand or generate the final app with any build tool like gulp or grunt?
I'm quite confused as I have plenty of npm modules installed in my webapp and the folder size is about 50 megabytes but it could be 2mb only.
npm install --production
Just doing an npm install brings in both development and runtime dependencies. You could also set the ENV to production globally for the server: npm config set production.
See this github issue. Note that this won't get you only the final minified build of everything, but will greatly reduce the bloat. For instance, a library might rely on babel-cli, babel-preset-es2015, and uglifyjs to be built (devDependency), but you don't need any of that if it also includes the transpiled minified file.
Managing Packages
For front end non-development packages I prefer Bower. It maintains the minified and non-minified version of your packages.
Build Tool
Use either Gulp or Grunt. Gulp would be my tool of choice.
Gulp task that will greatly improve your code are:
minification of both css and js
optimization/compression of images
concatenation and caching to reduce the number of calls to the server
package versioning
automatic injection of project dependencies
automatic injection of external dependencies
static analysis of js and css
automatic builds on code changes
deployment
testing
Node
If you can, leave to node all your development tools and leave to bower all your release plugins. Most node packages that are used in released apps have a bower installation counterpart.
Edit
Don't delete anything from Node manually as you don't know which packages have other packages as dependencies. If you are afraid that you may have junk in there, use npm rimraf to delete the node_modules folder, and then run npm install. Most importantly check your package.json for unnecessary saved packages.
I want to build a small js plugin, and I want to try that with ReactJS.
ReactJS recommends installing using npm and browserify.
In my experience with Ruby on Rails, there are always a lot of things to install, and using Windows introduces additional problems.
With Ruby it is Rails Installer. What is JS equivalent of Rails Installer? i.e. a tool that lets me install all necessary packages with one step?
I did a little bit of search, find that I need to install:
NodeJS, NPM
NVM
Webpack or Browerify
Babel
I think there may be others that I need.
To start the project you need node and npm because webpack, browserify and babel is npm packages.
The only way to install all packages in one step is to install package that actually depend on all packages you need. There is a lot of ReactJS starter kits in github like this https://github.com/kriasoft/react-starter-kit
I, personally recommend you doing such a things by yourself - its not a big deal if you understand what you want. In the root of all nodejs projects there is a file package.json every time you need a new module (package) just type npm install -S <module_name> in the root directory of your project.
This new module appears in node_modules directory and because of -S flag it name also will be stored in dependencies of your project in package.json file so that in the future you can just type npm install to install all dependencies (aka modules/packages) of your project.
I have a question about installing Paper.js. According to the Github link (https://github.com/paperjs/paper.js), the recommended way of installing and maintaining Paper is by Bower for browsers and NPM for Node.js, so I made sure I hade npm and bower installed and then I just ran this command in my project's folder:
$ bower install paper
Is this a tad complicated? Couldn't I have just downloaded the zip file directly to my project's folder and unzipped it? Right now I'm just planning on playing with Paper.js to learn it.
Thanks
It is a bit more complicated than grabbing a zip archive, but bower, npm, and git are standard tools for JS devs these days. now that you have npm and bower, you have nearly direct access to hundreds of js libs including Paper.js, Two.js, Raphael.js, D3, JQuery, Underscore... in-fact most reputable js libs will be hosted on bower and/or npm.
Additionally, you can keep your libs easily updated using these package managers
$ bower update paper
$ npm install raphael
The most important part of using these is that if you publish your own code, you don't need ti include dependancy libs like paper. You can simply include a package.json that will allow whomever loads your code to install dependancies.