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 #389

Closed
wants to merge 2 commits into from
Closed

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9051b84
chore(*): switch from `bower` to `npm` for frontend dependencies
gkalpak Dec 7, 2016
fe21fe4
fixup! chore(*): switch from `bower` to `npm` for frontend dependencies
gkalpak Dec 7, 2016
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
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
26 changes: 12 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,27 +42,27 @@ The `depth=1` tells git to only pull down one commit worth of historical data.
We have two kinds of dependencies in this project: tools and Angular 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 Angular code via `npm`, the [Node package manager][npm].
Copy link
Contributor

Choose a reason for hiding this comment

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

Hey, I know! Why don't we switch this to yarn :-)

Copy link
Member

Choose a reason for hiding this comment

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

npm is not "Node Package Manager", it's just "npm". The name should be changed.

* 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 Angular 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 runs a simple JS script that copies
the Angular files and other fronted 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 Angular 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 Angular 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 @@ -198,9 +198,8 @@ 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
Expand Down Expand Up @@ -236,7 +235,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 Down Expand Up @@ -279,7 +278,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
10 changes: 5 additions & 5 deletions app/index-async.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<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
//@@NG_LOADER_START@@
Expand All @@ -28,8 +28,8 @@

// 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',
Expand Down
10 changes: 5 additions & 5 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 @@ -31,8 +31,8 @@
<!-- 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.

2 changes: 1 addition & 1 deletion e2e-tests/protractor.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ exports.config = {

baseUrl: 'http://localhost:8000/',

framework: 'jasmine',
framework: 'jasmine2',

jasmineNodeOpts: {
defaultTimeoutInterval: 30000
Expand Down
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
18 changes: 14 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +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",
"shelljs": "^0.7.5"
Copy link
Contributor

Choose a reason for hiding this comment

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

shelljs is strictly a devDependency

Copy link
Member Author

Choose a reason for hiding this comment

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

Currently it is necessary in production, because we are not committing app/lib/. So it is needed to copy the files to app/lib/ in production as well.

Copy link
Contributor

Choose a reason for hiding this comment

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

We need grunt in the angular 1 project to generate the production distribution but that doesn't stop grunt from being a devDependency. Unless we ship shelljs as part of the application I don't think I would call is a dependency.

Copy link
Member

Choose a reason for hiding this comment

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

Actually, since we copy every frontend asset to app/lib/, nothing here should be a dependency. Were we to publish an npm package from this project it would have included the built app/lib/ and no deps.

Copy link
Contributor

Choose a reason for hiding this comment

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

true :-)

Copy link
Member Author

Choose a reason for hiding this comment

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

Actually, not true (afaict). Because app/lib/ is ignored (in .gitignore). In the angular.js repo, it is different, because we have publish script that does all sorts of stuff.

Also, using git for deployment (especially for small to medium apps) is a viable approach (and one I've used several times). It is handy to be able to git pull && npm install --production.

Anyway, I don't feel too strongly about it (although I do think it is better to have them as dependencies).

},
"devDependencies": {
"angular-mocks": "^1.5.9",
"bower": "^1.7.7",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
Expand All @@ -17,15 +25,17 @@
"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-libs": "node scripts/copy-libs.js",

"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",

Expand All @@ -35,6 +45,6 @@
"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);\""
}
}
35 changes: 35 additions & 0 deletions scripts/copy-libs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
'use strict';

// Constants
const baseSrcDir = 'node_modules';
const baseDstDir = 'app/lib';
const files = [
'html5-boilerplate/dist/css/main.css',
'html5-boilerplate/dist/css/normalize.css',
'html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js',
'angular/angular.js',
'angular/angular.min.js',
'angular/angular.min.js.map',
'angular-route/angular-route.js',
'angular-route/angular-route.min.js',
'angular-route/angular-route.min.js.map',
'angular-loader/angular-loader.js',
'angular-loader/angular-loader.min.js',
'angular-loader/angular-loader.min.js.map'
];

// Imports
const path = require('path');
const shx = require('shelljs');

// Copy lib files
shx.rm('-rf', baseDstDir);
Copy link
Member

Choose a reason for hiding this comment

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

If all you need is a cross-platform rm -rf then rimraf.

Copy link
Member Author

Choose a reason for hiding this comment

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

I also need a cross-platform mkdir -p 😃

Copy link
Member

Choose a reason for hiding this comment

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

https://www.npmjs.com/package/mkdirp ;)

But I see your point now.

Copy link
Contributor

Choose a reason for hiding this comment

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

I suspect it would be easier to ditch this file and use https://www.npmjs.com/package/cpx or something similar.

Copy link
Member Author

Choose a reason for hiding this comment

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

Wouldn't we need another pretty long npm script for that?

Copy link
Member

Choose a reason for hiding this comment

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

We could save some space in the part that iterates over files but the biggest part would probably be listing the files so it seems you're right; we wouldn't save that much.


files.forEach(relPath => {
Copy link
Member

Choose a reason for hiding this comment

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

I'd use for-of here but it doesn't really matter. :)

const srcPath = path.join(baseSrcDir, relPath);
const dstPath = path.join(baseDstDir, relPath);
const dstDir = path.dirname(dstPath);

shx.mkdir('-p', dstDir);
shx.cp(srcPath, dstDir);
});