How can Sails.js serve a Yeoman generated app

Question

I am new to Sails.js, and I'm pretty excited by it. It is a great tool for creating APIs. I am also working for a while with Yeoman generated single page apps (jquery or angular) and they are great for the client side logic.

However, currently the only way to make an app based on the two technologies is to separate them into two completely separate projects, which is wasteful.

I am looking for a way to combine the two. I want to make Sails.js serve the static assets of the web app and load its index.html file (instead of homepage.ejs). I also want the development environment (grunt, live-reload to work as it should).

I've tried creating a yeoman project inside the assets folder and redirecting the layout to the index.html but it has several issues: - I cannot separate between the app/ folder (during development) and the dist/ folder (in production) - the bower_components link is broken (it refers to /bower_components instead of /assets/app/bower_components)

I guess there might be more issues I haven't discovered yet.

Has anyone tried (and succeeded) combining these technologies?

Answer 1

You can serve the static index.html instead of homepage.ejs by doing the steps below:

1. place your index.html file under the assets folder.
2. open routes.js in config folder and change the code from

'/': {
       view: 'homepage'
    }

to

'/': {
       view: false
    }

The assets folder serves as the root folder in the website. If your "angular.min.js" file is located in "assets\\bower_components\\angular" folder, this will be converted to "/bower_components/angular/angular.min.js" in the browser.

Answer 2

May not be exactly what you are looking for, but there is a project that I looked at awhile ago which seems to do something similar; combining front-end (jquery/angular) + back-end(sails).

http://sanestack.com/

The main difference is that the sanestack is using ember as the front end (which may not be for you). But the nice thing about it is the generators create the appropriate resources on the front-end + back-end projects simultaneously.

At the least, hopefully it will give you some ideas of how to combine sails with a front-end project.

Answer 3

As mentioned in this answer you can easily use Sails to serve your static site.

However I would also like to recommend an alternate approach - since your application frontend is cleanly decoupled from your frontend you can utilize this decoupling to scale your backend and frontend separately using different strategies.

So right now, assuming that you deploy your application on a single instance, you can use Nginx that can serve static assets very efficiently and use that as a reverse proxy to your API.

Eventually when you need to scale your application and would like to deploy the application to a cluster of instances (let us say on AWS) you can push your static assets on an S3 bucket and deploy your API on EC2 instances. You will not have to redeploy your API each time you have to make some visual change on the frontend. You can serve your entire frontend from a CDN (like AWS cloudfront) that grabs assets from a single S3 bucket. The instances serving your API will be entirely unburdened from the overhead of serving static assets.