I am developing an app that can utilize sails.js for back-end and AngularJS for Front-end. I thought that I'll create an Angular App using Yeoman-angular generator https://github.com/yeoman/generator-angular, and once I am done with the front-end logic I'll create a sails app using,
And then I'll transfer all my AngularJS files to the Sails folder.
But the thing is that AngularJS creates creates a folder hierarchy like this https://github.com/rishy/angular-jade-stylus-seed and on running "grunt server" a "dist" folder is created which contains the final production version.
On the other hand, after "sails new app" folder hierarchy for sails app is like.
So, My questions are:
I think lot of people are facing this similar problem since AngularJS and SailsJs are all the rage currently. There should be a robust boilerplate to create an AngularJS + SailsJS app, which sadly is missing right now.
Since Sails is a purely back-end framework and Angular is purely front-end, they can work together nicely. It can get a little confusing when you bring the Angular generator into it, but here are the basic steps if you were to start with the Angular Seed app and Sails v0.10:
sails new myApp
myApp/assets
folderapp
folder into myApp/assets
myapp/views/layout.ejs
with those of the Angular Seed app/index.html
filelayout.ejs
file (everything after the <body>
tag and before the first <script>
tag and use it to replace the contents of myApp/views/homepage.ejs
<%-body%>
after the <body>
tag in layout.ejs
You can then start the server with sails lift
and you'll see the Angular app at http://localhost:1337
.
I've put this on Github for reference.
Using this method, you don't need to do anything to the Gruntfile, and you'll never call grunt server
--that's solely for testing Angular apps with their test server, which you're replacing with Sails. You'll still get the benefit of the Sails grunt-sync task which watches and syncs-up your front-end assets as they are changed.
If you really want to use the Yeoman Angular generator, you can try generating an app directly into the assets
folder of your Sails app and using the generator commands from within that folder. I haven't used it before, so I don't know what the dist folder is for, but it seems like all of the node modules it installs are there to support the test web server (which again you don't need, since you have Sails) and the test suite (which is always nice). The only issue I can see is if you need some of the tasks in that Gruntfile that Yeoman generates. Sails handles Less compilation and CSS minification (in production mode), but it doesn't do anything with Jade or Stylus, so you'd have to add those tasks to the Sails Gruntfile if you really needed them.