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

chore(web-server): use a rewriting server to get rid of bower dependency #385

Closed
wants to merge 1 commit into from
Closed

chore(web-server): use a rewriting server to get rid of bower dependency #385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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.

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">
Copy link
Member

Choose a reason for hiding this comment

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

Why os this needed? Previously the files were served from bower_components, why can't they just now be served from node_modules without any rewriting server?

Copy link
Member

Choose a reason for hiding this comment

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

Because the root directory (for the webapp) is app/ which is a sibling of node_module/.

Copy link
Member

Choose a reason for hiding this comment

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

I see. And in package.json it's not possible to specify an alternative location of node_modules.

Copy link
Member

@mgol mgol Dec 6, 2016 •
edited
Loading

Choose a reason for hiding this comment

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

We could create a separate package.json inside app/. ;)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We could. I did think about that. But I felt that might be more confusing than helpful.
And in reality, and real project is going to have a build step of some kind, right?

Copy link
Member

@mgol mgol Dec 6, 2016 •
edited
Loading

Choose a reason for hiding this comment

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

In that case it might be better to do the following in the build process:

  1. Remove app/dist/
  2. Copy relevant files to app/dist/

jQuery uses the npmcopy Grunt task for this[1] but regular copying should work as well.

I'd like the official seed to stop using Bower as we're discouraging its use so we're not following our own advice if we keep using it.

[1] https://github.com/jquery/jquery/blob/7fbab88/Gruntfile.js#L78-L104

EDIT: Clarified the description a little.

Copy link
Member

Choose a reason for hiding this comment

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

I would rather not introduce a task runner (grunt, gulp etc). Everyone will have a different preference and this seed project has been tranditionally quite unopinionated. Also, keep n mind that angular-seed is used as a base for angular-phonecat, so simplicity is a feature 😃

How about using an npm script (e.g. postinstall) that copies the necessary files from node_modules/... to app/lib/? It is still less straightforward than bower install imo, but more straightforward than using a task runner or a rewriting server. WDYT?

Copy link
Member

Choose a reason for hiding this comment

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

@gkalpak That's exactly what I proposed in my last comment...

Copy link
Member

Choose a reason for hiding this comment

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

Ooops, I thought you were proposing to use Grunt 😁

Copy link
Member

Choose a reason for hiding this comment

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

No, I just gave an example of how jQuery does it. :) The details of the copying mechanisms are not the most important parts.

<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.

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',
'../node_modules/angular/angular.js',
'../node_modules/angular-route/angular-route.js',
'../node_modules/angular-mocks/angular-mocks.js',
'components/**/*.js',
'view*/**/*.js'
],
Expand Down
27 changes: 17 additions & 10 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,39 @@
"repository": "https://github.com/angular/angular-seed",
"license": "MIT",
"devDependencies": {
"bower": "^1.7.7",
"http-server": "^0.9.0",
"angular-mocks": "^1.5.8",
"jasmine-core": "^2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.8",
"karma-junit-reporter": "^0.4.1",
"local-web-server": "^1.2.6",
"protractor": "^4.0.9"
},
"scripts": {
"postinstall": "bower install",

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

"start": "ws",
"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);\""
Copy link
Member

Choose a reason for hiding this comment

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

loaderFile='app/lib/angular-loader/angular-loader.min.js should point to node_modules/ instead.

},
"dependencies": {
"angular": "^1.5.8",
"angular-loader": "^1.5.8",
"angular-route": "^1.5.8",
"html5-boilerplate": "0.0.1"
},
"local-web-server": {
"port": 8000,
"rewrite": [
{ "from": "/lib/*", "to": "./node_modules/$1" },
{ "from": "/*", "to": "./app/$1" }
]
}
}