I am making a AngularJS app for a school project. I am using AngularJS, Material, Bower, Bootstrap and Yeoman. Everything was working fine but know my scripts fail to resolve, i resolved a few doing it manually but now i see all the scripts are failing to resolve, making me think there is another issue.
Anyone know what i did :O?
Recently I've been running into an issue and I'm not sure how to best resolve it. We have a very modular architecture on the front end. We write individual angular components, put them in different repo's, and then include them in other apps as they are required, built with webpack & included via NPM.
Recently I've run into issues where multiple versions of a module end up in the compiled /dist folder coming from different places such as:
Directly included in the App I'm working on
2x Indirectly included through a module that I included (see chart for details).
The reason different versions could be used is that at the time CodeA is written ModuleA may be at version 1, then at a later date CodeB is written which also uses ModuleA which is now at version 2.
Then CodeA and CodeB are included in CodeC and now you have a module name collision on ModuleA.
With this setup, I believe if the multiple modules by the same name are loaded, the last one to get loaded is going to be the code behind that module name. Meaning it will be the one to be used by all modules. So there's no guarantee that the most up-to-date version is will be used. This usually results in getting an error that a method on ModuleA by name XXX does not exist.
To make sure I'm running the latest version of the module I have to go in and manually update (npm install) and build with webpack (npm run build) each library and then push them all to Github. Then I have to npm install in my root app. This isn't always an easy thing to do as the individual libraries' code may need updated to use the latest version of the module in question.
I'm looking for a solution to this issue. I'm guessing a structural/organizational change that will help us to not get into this predicament. If you have any solutions/advice/articles I need to check out please share. Thanks!
I´m pretty new to gradle and currently there is question that bugs me. The situation appears as follows: Based on a bower technology stack I implemented an Angular App. The app as it is doesn't change nor has it to be built in any way since there are just static javascript and HTML pages. In my opinion the used versions of angular, bootstrap and other libraries should also stay the same due to compatibility of the single libraries so these files also shouldn't change. Is this a correct behavior or should I get at least the latest build of the used libraries version as I deploy the application?
Also less is used in the application. Is there a way to compile the CSS every time I run the gradle build file or should I deliver just the compiled and finished CSS file?
As a result I´m also not quite sure if it's recommended at all using gradle to deploy an "static" angular application.
I hope someone out there can help me to answer the questions above. As you can guess, I´m not very experienced at deploying of such angular applications since this is my first project with this kind of problem.
This goes for all package managers, not just gradle but npm, gem, nuget, maven, whatever.
Use static dependancy version numbers. Otherwise you will end up finding breaking dependencies in QA or Prod rather than production.
This means you need to be aware of security fixes in your dependencies.
When you need a feature or fix in a new version of your dependencies, unlock the versions, rebuild and test in dev. Re-lock the dependencies and send to QA for verification.
I am having a hard time integrating deployd into an already existing angular grunt workflow.
Did somebody ever accomplish to do this easily.
Steps taken so far:
added deployd and grunt-deployd to the proji
adjusted the gruntfile in x many ways
project has a public folder where the angularjs resides.
and the rest is the usual dpd create stuff
now dpd -d gets me to the dashboard but it collides with the grunt modules of the existing project mainly grunt-concurrent and instantly crashes dpd
if I run the proji with grunt server it does load the dashboard on port 7777 but its blank so one can not do anything the dashboard usually offers.
It further does not proxy the api endpoints properly to port 9000 it fails with cannot get.
I have seen projects on git trying to do the same but almost all of them are broken.
https://github.com/taras/grunt-deployd/issues/1
Like this guy that switched away from deployd.
I think its a pity as deployd is such a great thing. My friend said as well if the integration would be easier in situations where you do not want to do stuff with dpd-client and the dashboard white instead of black much more people would love to use it!
I would like to post my gruntfile but wanted to see first if thats useful at all.
Update:
Deployd has been updated to be able to integrate Grunt, Gulp or other dev tools with Deployd.
The documentation page for this feature is available here:
http://docs.deployd.com/docs/server/use-grunt-or-gulp.html
tldr: you just need to add a package.json with deployd in the dependencies and gulp/grunt in your devDependencies.
Old answer: Running deployd with Grunt, Gulp or any other Nodejs module is a known issue.
I proposed a pull request that fixes the problem, but more tests are needed to be accepted.
Temporarily, I use the fork of the pull request and add this repo in my package.json (here's a working example):
"dependencies": {
"deployd": "nicolasritouet/deployd"
}
I'm trying to set up a client-side app workflow with yeoman (http://yeoman.io/), and as I'm coming from Rails background, I'm used to the niceties of the asset pipeline, which is backed by Sprockets (https://github.com/sstephenson/sprockets).
I'm struggling to make all the parts play nice with each other, and already spent a few hours trying to figure it out.
The first question that comes to mind is, is there a well established (e.g. convention over configuration, like in Rails world) way of developing a client side application with yeoman? Some definitive guide (besides the basic webapp-generator guide), perhaps?
Some suggest using requirejs (which I rather not use, because while it simplifies things in development, I'll need to jump through hoops to package the app (e.g. use Almond.js or AMDclean.js, or incur the unneeded overhead of requirejs).
My setup is:
Coffeescript, Backbone + Marionette, Handlebars for templates and ZURB Foundation with SASS.
What I'd like to accomplish in the end is the following setup, while using bower for managing the 3rd party dependencies:
In development:
Have something like Rails' manifest for javascript, so I can declare the order of dependencies, which will exploded into the the index.html
For all .scss files a .css entry added to index.html
Each file watched and compiled when needed
In production (dist):
All .scss files compiled, minified and concatenated to app.css
All bower files concatenated and minified to vendor.js
All application coffeescript files compiled, minified and concatenated to app.js
All templates compiled, minified and and concatenated to templates.js
index.html modified to include only those four files.
Is there something like this setup available?
I'm also open for suggestions and/or other alternative workflows.
Yeomam won't get you as close to a Rails workflow as you might expect. My two cents is that you take a look at something like Middleman has it does what you want out of the box.
Yeoman way
Using generators
You can use Yeoman generators and try to find out the combination of generators that will better suit the stack you are looking for, from what you describe I might take a look at:
webapp
backbone
maryo
At this point most of your requirements (both development and production) would be fulfilled:
a well defined project structure
compile coffeeScript and .scss
watch and compile
generators for model, view, collection, ...
compile and minify all files for production
You can use multiple generators to customise your own stack, every time that Yeoman detects that a generator overwrites a existing file it will prompt what to do, and you should be able to manage the conflict by yourself. Some framework-generators will obviously clash (it wouldn't make sense to try to use a angular generator on top of backbone).
Fine tuning
You can use sub-generators to scaffold more specific parts of your app, see Addy Osmani video.
Building generators
If you feel limited by some of the choices that a generator might impose (e.g. you prefer browserify instead of requirejs) you might want to fork a generator and add that as an option. You can even build a generator form scratch that will build your custom stack!
Grunt and Bower way
Yeoman is build on top of this two, but you can opt out at any moment and build your own stack using this two. You can add your dependencies through bower, and your tasks using grunt. There are plenty of examples that can give you some guidance, you could start with Yeoman webapp. There are also good examples at github like juanghurtado/puppeteer.
There are 3 files that you must keep an eye:
package.json — all you node dependencies go in here
bower.json — to manage the client dependencies
Gruntfile.js — here you define the tasks
Wrapping up
Maybe I'm stating the obvious but Yeoman does some magic work and helps you managing Grunt and bower, this magic only happens when you fully understand how this 2 work. So I would recommend that first you dive into some code and fully understand how Grunt and Bower work, and then you may use Yeoman magic.
Some other tools
You asked for some suggestions, here it goes:
gulp.js An alternative to Grunt. More you dive into Grunt more you will want Gulp (IMHO).
browserify An alternative to Requiere. Read this
assemble Static site generator for Node.js, Grunt.js, and Yeoman
Roman,
Answer for your first question, here is a guide on how to use Yeoman: http://code.tutsplus.com/tutorials/building-apps-with-the-yeoman-workflow--net-33254
If you want to use coffeescript by default, just pass the --coffee param
yo webapp --coffee
handling the assets order you can handle from the index.html file.
When you want to get the app ready for production just type the
grunt build
that will unify and minify all of your assets and throw it all dist folder.
To customise what you have in the build process you would have to write your own or customise the grunt build task, so that it will do exactly what you want.
Hope i gave you some useful information :)
Not an answer to my original question, but rather a pointer for someone who'd like to implement the same workflow I was looking for. I ended up writing a custom Gruntfile, using the grunt-injector to do the "explode the assets to the index.html" part, grunt-bower-install to add bower assets and configuring the grunt-usemin, grunt-contrib-concat, grunt-contrib-cssmin and grunt-contrib-uglify accordingly.