Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Yeoman Workflow and Integration with Backend Scripts

So, I've been anticipating Yeoman and it's already out for a week or so now. But after successfully installing it, I've been confused at the workflow and the implementation with backend script (API).

Scenario 1

So let's say I don't need all those shiny BBB/Ember/Angular stuff and use Yeoman just for jQuery/H5BP/Modernizr backed with Codeigniter or Sinatra/Rails. Since yeoman server doesn't natively support PHP (I haven't tried Sinatra/Rails), I figure that the workflow is:

  • Front End Development with Yeoman
  • After it's finished, do yeoman build and then use the built dist folder as a base to develop backend (and probably copy the dist folder to another folder for backend implementation (let's say public folder)
  • If I should change CSS/JS, use yeoman again, build and copy the dist folder to public again. So on and on...

But using that workflow, that means the directory structure will be something like

cool-app/ --app/   --yeoman development stuff --test/   --yeoman development stuff --dist/   --yeoman built stuff .dotfiles package.json Gruntfile.js 

It's nice and all, but quite a bit different with the CodeIgniter / Rails directory structure. Not to mention there are name difference (is this configurable in Yeoman?), so it's kinda hard to imagine a good workflow developing both Front End and Back End in one go, except using the built result as a base for the backend.

Scenario 2

BBB/Ember/Angular. Frankly I've been just testing those stuff, so any tips to implement with backend code is welcome! Though for all I know, yeoman can generate the necessary files for those framework inside app folder, so I figure, the solution of the first scenario will kinda solve the problem for scenario 2

Thanks a lot!

like image 366
Henson Avatar asked Sep 20 '12 08:09

Henson


2 Answers

I like using this structure:

rails-app/ --app/   --views/     --js/       --app/       --test/       --Gruntfile.js --public 

Here's how I set it up:

  • rails new rails-app
  • cd rails-app/app/views
  • mkdir js
  • cd js
  • yeoman init ember

Then edit Gruntfile.js to change "output: 'dist'" to "output: '../../../public'"

After that, "yeoman build" or "yeoman build:dist" will output to the Rails /public folder.

During dev, you can still use "yeoman server" to run yeoman in development mode, so any change you make will automatically be visible in the browser.

Yeoman is great!

like image 79
Sanford Redlich Avatar answered Nov 11 '22 20:11

Sanford Redlich


Sanford's answer will work for Sinatra too of course, but there's a slightly different solution that can be used so that you don't have to issue "yeoman build" to run in development mode.

In Sinatra, the public folder is configurable, so you can have a configure block that looks like this:

configure do     set :public_folder, ENV['RACK_ENV'] == 'production' ? 'dist' : 'app'   end 

Then use your routes like this:

get '/' do         send_file File.join(settings.public_folder, 'index.html')   end 

This is assuming that "yeoman init" was run in the root folder of the Sinatra application.

All you do then is ensure that you've run "yeoman build" before deploying to a production environment, and the yeoman-optimised content will be used.

like image 31
manadart Avatar answered Nov 11 '22 20:11

manadart