Sometimes one needs to quickly develop some stuff for whatever. So here is a description of a setup and a workflow that was quite nice.
first the setup:
chromium with bunch of addons
angularjs scope inspector
ng-inspector for angularjs
it is not recently that people started describing their devtools only workflow and since then devtools in chromium have gotten more close to being as nice as alternatives one would use.
For scaffolding an app I like yeoman gulp angular generator
that gives a wizard where one can pick all sort of stuff
and also gives the complete setup with template caching html injecting, livereload and so on.
So in the end with the above mentioned tools one would
generate scaffold with yeoman
start up gulp server for livereloading of the page with gulp serve
set up devtools to edit files in local from devtools editor
use bunch of extensions for easier debugging
and after having that type of quick iteration environment one only needs backend that is as good. Phoenix seems like a nice pick since it also offers livereload that is only going to get better if it is buggy now and offers the power of erlang with nice syntax.
One of the possible setups would be to allow requests to a backed from different origin if we are debugging frontend app on one port opened by gulp serve we can have backend running on different port and then all that is needed is to set up headers to allow for requests of different origin. Here is how it is done in phoenix right now
in controller that you are using you would
then setting the header for response would be
newcon=conn |> put_resp_header(“Access-Control-Allow-Origin”,”*”)
And now one could use before described way of developing the frontend with backend running on different port and livereloaded also. Phoenix is a framework that is developing quickly to use benefits of erlang with stuff from rails.
now combining this with serving the frontend with the same framework like this http://nikola.link/?p=77 and angularjs-ui with bootstrap components can be quite nice also 🙂