Skip to content
This repository was archived by the owner on Feb 26, 2024. It is now read-only.

chore(*): switch from bower to npm for frontend dependencies #390

Closed
wants to merge 2 commits into from
+56 −75
Closed

chore(*): switch from bower to npm for frontend dependencies #390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
52022ee
chore(*): switch from `bower` to `npm` for frontend dependencies
gkalpak Dec 7, 2016
a41e802
docs(*): use the name AngularJS rather than Angular
petebacondarwin Oct 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .bowerrc
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
logs/*
!.gitkeep
node_modules/
bower_components/
app/lib/
tmp
.DS_Store
.idea
4 changes: 2 additions & 2 deletions .jshintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"strict": "global",
"globals": {
// Angular
// AngularJS
"angular": false,

// Angular mocks
// AngularJS mocks
"module": false,
"inject": false,

Expand Down
2 changes: 1 addition & 1 deletion .travis.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ dist: trusty

language: node_js
node_js:
- '4.5'
- 6

install:
- export DISPLAY=:99.0
Expand Down
47 changes: 22 additions & 25 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
This project is an application skeleton for a typical [AngularJS][angularjs] web app. You can use it
to quickly bootstrap your angular webapp projects and dev environment for these projects.

The seed contains a sample AngularJS application and is preconfigured to install the Angular
The seed contains a sample AngularJS application and is preconfigured to install the AngularJS
framework and a bunch of development and testing tools for instant web development gratification.

The seed app doesn't do much, just shows how to wire two controllers and views together.
Expand Down Expand Up @@ -39,30 +39,29 @@ The `depth=1` tells git to only pull down one commit worth of historical data.

### Install Dependencies

We have two kinds of dependencies in this project: tools and Angular framework code. The tools help
We have two kinds of dependencies in this project: tools and AngularJS framework code. The tools help
us manage and test the application.

* We get the tools we depend upon via `npm`, the [Node package manager][npm].
* We get the Angular code via `bower`, a [client-side code package manager][bower].
* We get the tools we depend upon and the AngularJS code via `npm`, the [Node package manager][npm].
* In order to run the end-to-end tests, you will also need to have the
[Java Development Kit (JDK)][jdk] installed on your machine. Check out the section on
[end-to-end testing](#e2e-testing) for more info.

We have preconfigured `npm` to automatically run `bower` so we can simply do:
We have preconfigured `npm` to automatically copy the downloaded AngularJS files to `app/lib` so we
can simply do:

```
npm install
```

Behind the scenes this will also call `bower install`. After that, you should find out that you have
two new folders in your project.
Behind the scenes this will also call `npm run copy-libs`, which copies the AngularJS files and other
frontend dependencies. After that, you should find out that you have two new directories in your project.

* `node_modules` - contains the npm packages for the tools we need
* `app/bower_components` - contains the Angular framework files
* `app/lib` - contains the AngularJS framework files and other frontend dependencies

*Note that the `bower_components` folder would normally be installed in the root folder but
`angular-seed` changes this location through the `.bowerrc` file. Putting it in the `app` folder
makes it easier to serve the files by a web server.*
*Note copying the AngularJS files from `node_modules` to `app/lib` makes it easier to serve the files
by a web server.*

### Run the Application

Expand Down Expand Up @@ -146,7 +145,7 @@ npm run test-single-run

The `angular-seed` app comes with end-to-end tests, again written in [Jasmine][jasmine]. These tests
are run with the [Protractor][protractor] End-to-End test runner. It uses native events and has
special features for Angular applications.
special features for AngularJS applications.

* The configuration is found at `e2e-tests/protractor-conf.js`.
* The end-to-end tests are found in `e2e-tests/scenarios.js`.
Expand Down Expand Up @@ -188,39 +187,38 @@ the [Java Development Kit (JDK)][jdk] to be installed on your local machine. Che
If JDK is not already installed, you can download it [here][jdk-download].


## Updating Angular
## Updating AngularJS

Since the Angular framework library code and tools are acquired through package managers (npm and
Since the AngularJS framework library code and tools are acquired through package managers (npm and
bower) you can use these tools to easily update the dependencies. Simply run the preconfigured
script:

```
npm run update-deps
```

This will call `npm update` and `bower update`, which in turn will find and install the latest
versions that match the version ranges specified in the `package.json` and `bower.json` files
respectively.
This will call `npm update` and `npm run copy-libs`, which in turn will find and install the latest
versions that match the version ranges specified in the `package.json` file.


## Loading Angular Asynchronously
## Loading AngularJS Asynchronously

The `angular-seed` project supports loading the framework and application scripts asynchronously.
The special `index-async.html` is designed to support this style of loading. For it to work you must
inject a piece of Angular JavaScript into the HTML page. The project has a predefined script to help
inject a piece of AngularJS JavaScript into the HTML page. The project has a predefined script to help
do this:

```
npm run update-index-async
```

This will copy the contents of the `angular-loader.js` library file into the `index-async.html`
page. You can run this every time you update the version of Angular that you are using.
page. You can run this every time you update the version of AngularJS that you are using.


## Serving the Application Files

While Angular is client-side-only technology and it is possible to create Angular web apps that
While AngularJS is client-side-only technology and it is possible to create AngularJS web apps that
do not require a backend server at all, we recommend serving the project files using a local
web server during development to avoid issues with security restrictions (sandbox) in browsers. The
sandbox implementation varies between browsers, but quite often prevents things like cookies, XHR,
Expand All @@ -236,7 +234,7 @@ choose to install the tool globally:
sudo npm install -g http-server
```

Then you can start your own development web server to serve static files from a folder by running:
Then you can start your own development web server to serve static files from any folder by running:

```
http-server -a localhost -p 8000
Expand All @@ -251,10 +249,10 @@ This really depends on how complex your app is and the overall infrastructure of
the general rule is that all you need in production are the files under the `app/` directory.
Everything else should be omitted.

Angular apps are really just a bunch of static HTML, CSS and JavaScript files that need to be hosted
AngularJS apps are really just a bunch of static HTML, CSS and JavaScript files that need to be hosted
somewhere they can be accessed by browsers.

If your Angular app is talking to the backend server via XHR or other means, you need to figure out
If your AngularJS app is talking to the backend server via XHR or other means, you need to figure out
what is the best way to host the static files to comply with the same origin policy if applicable.
Usually this is done by hosting the files by the backend server or through reverse-proxying the
backend server(s) and web server(s).
Expand All @@ -279,7 +277,6 @@ For more information on AngularJS please check out [angularjs.org][angularjs].


[angularjs]: https://angularjs.org/
[bower]: http://bower.io/
[git]: https://git-scm.com/
[http-server]: https://github.com/indexzero/http-server
[jasmine]: https://jasmine.github.io/
Expand Down
18 changes: 9 additions & 9 deletions app/index-async.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="lib/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="lib/html5-boilerplate/dist/css/main.css">
<style>
[ng-cloak] {
display: none;
}
</style>
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="lib/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script>
// include angular loader, which allows the files to load in any order
// include AngularJS loader, which allows the files to load in any order
//@@NG_LOADER_START@@
// You need to run `npm run update-index-async` to inject the angular async code here
// You need to run `npm run update-index-async` to inject the AngularJS async code here
//@@NG_LOADER_END@@

// include a third-party async loader library
Expand All @@ -28,16 +28,16 @@

// load all of the dependencies asynchronously.
$script([
'bower_components/angular/angular.js',
'bower_components/angular-route/angular-route.js',
'lib/angular/angular.js',
'lib/angular-route/angular-route.js',
'app.js',
'view1/view1.js',
'view2/view2.js',
'components/version/version.js',
'components/version/version-directive.js',
'components/version/interpolate-filter.js'
], function() {
// when all is done, execute bootstrap angular application
// when all is done, execute bootstrap AngularJS application
angular.bootstrap(document, ['myApp']);
});
</script>
Expand All @@ -52,7 +52,7 @@

<div ng-view></div>

<div>Angular seed app: v<span app-version></span></div>
<div>AngularJS seed app: v<span app-version></span></div>

</body>
</html>
12 changes: 6 additions & 6 deletions app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="lib/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="lib/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="lib/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<ul class="menu">
Expand All @@ -26,13 +26,13 @@

<div ng-view></div>

<div>Angular seed app: v<span app-version></span></div>
<div>AngularJS seed app: v<span app-version></span></div>

<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
Expand Down
15 changes: 0 additions & 15 deletions bower.json
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions karma.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ module.exports = function(config) {
basePath: './app',

files: [
'bower_components/angular/angular.js',
'bower_components/angular-route/angular-route.js',
'bower_components/angular-mocks/angular-mocks.js',
'lib/angular/angular.js',
'lib/angular-route/angular-route.js',
'../node_modules/angular-mocks/angular-mocks.js',
'components/**/*.js',
'view*/**/*.js'
],
Expand Down
22 changes: 12 additions & 10 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,15 @@
"description": "A starter project for AngularJS",
"repository": "https://github.com/angular/angular-seed",
"license": "MIT",
"dependencies": {
"angular": "^1.5.9",
"angular-loader": "^1.5.9",
"angular-route": "^1.5.9",
"html5-boilerplate": "0.0.1"
},
"devDependencies": {
"bower": "^1.7.7",
"angular-mocks": "^1.5.9",
"cpx": "^1.5.0",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^0.13.22",
Expand All @@ -17,24 +24,19 @@
"protractor": "^4.0.9"
},
"scripts": {
"postinstall": "bower install",

"postinstall": "npm run copy-libs",
"update-deps": "npm update",
"postupdate-deps": "bower update",

"postupdate-deps": "npm run copy-libs",
Copy link
Contributor Author

@petebacondarwin petebacondarwin Dec 7, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wondered if we really need update-deps...
Can we not just have a postupdate hook that copies the libs?

Copy link
Member

@gkalpak gkalpak Dec 8, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

npm does not run postupdate after npm update. From reading this, I would expect it run postinstall (after it runs npm install under the hood), but it doesn't.

Another idea is to recommend using npm install even for updating in README.md.

Copy link
Contributor Author

@petebacondarwin petebacondarwin Dec 8, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think postinstall only runs when a module is being installed as a dependency, rather than when one is installing the dependencies of the current module.

Copy link
Member

@gkalpak gkalpak Dec 8, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What I mean is, it does run when I execute npm install, but it doesn't when I execute npm update (which is supposed to run npm install <outdated deps> under the hood) from the exact same project state.

Copy link
Contributor Author

@petebacondarwin petebacondarwin Dec 8, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh right

"copy-libs": "cpx \"node_modules/{angular,angular-*,html5-boilerplate}/**/*\" app/lib -C",
Copy link

@jaythomas jaythomas Oct 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems less than ideal to copy dependencies manually, having to update and maintain this inline script whenever a dependency is added, like bootstrap for instance. Perhaps it would be simpler to just go the route of using a build tool like webpack or brunch?

Copy link
Contributor Author

@petebacondarwin petebacondarwin Oct 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that in any significant project you would end up with some tool like that, but for angular-seed we are trying to keep the complexity and number of tools to the minimum.

"prestart": "npm install",
"start": "http-server -a localhost -p 8000 -c-1 ./app",

"pretest": "npm install",
"test": "karma start karma.conf.js",
"test-single-run": "karma start karma.conf.js --single-run",

"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",

"preprotractor": "npm run update-webdriver",
"protractor": "protractor e2e-tests/protractor.conf.js",

"update-index-async": "node -e \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/bower_components/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/).join('//@@NG_LOADER_START@@\\n'+loaderText+' //@@NG_LOADER_END@@');fs.writeFileSync(indexFile,indexText);\""
"update-index-async": "node -e \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/lib/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=lib/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/).join('//@@NG_LOADER_START@@\\n'+loaderText+' //@@NG_LOADER_END@@');fs.writeFileSync(indexFile,indexText);\""
}
}