Manually include assets in SailsJS 0.9.7

assets, javascript, sails.js

Solution

If you delete the `Gruntfile.js`, none of your assets will be managed by sails.

Where do I put my css and javascript assets in sails?

Sails uses grunt to manage assets. Some of this "management" involves syncing files between your project folder structure and the server's public folder, but as always, I'm getting ahead of myself.

The configuration of `grunt` is based upon the `Gruntfile.js` file found in the root of your sails project. There’s a lot going on in this file, however, I’m going to concentrate on the javascript and css assets.

Your Project's Assets

When you first create a project, you have the option of using the `--linker` flag. An example of using the flag would be `sails new projectName --linker`. Here’s the directory structure of the `/assets` folder under both scenarios:

USING the `--linker` flag

/assets
 /images
 /linker
  /js
  /styles
  /templates

NOT USING the `--linker` flag

/assets
 /images
 /js
 /styles

Note, you can “upgrade” a project that wasn't created with the `--linker` flag by manually creating the `/linker` folder and inserting it into your `/assets` path. You can then add `/js`, `/styles`, and `/templates` under `/linker`.

The Server's Public Folder

When starting the sails server via `sails lift` the following folder structure is created/sync'd via `grunt` within the `.tmp` folder:

.tmp
  /public

If any of the other project folders (e.g. `/images`, `/js`, `/styles`, `/templates`) contain content they are copied/sync'd to the `.tmp/public`folder. The distinction being that if a `/linker` folder exists, the `/js`, `/styles`, and an additional `/templates` folder is created under `/linker`.

What happens to my `layout.ejs` file?

If you use the `/linker` folder, sails will alter your `layout.ejs` file to include links to your javascript and css files. Therefore, any page served from the project's `/views` folder will have access to the javascript and css contained in these files.

Grunt uses commented tags in `layout.ejs` to as placehodler for these links. For example, anything placed in the `/style` folder will automatically be linked in `layout.ejs` between these two tags:

<!--STYLES-->    
<!--STYLES END-->

Anything in the `/js` folder will be linked between these two tags:

<!--SCRIPTS-->
<!--SCRIPTS END-->

Anyting in the `/templates` folder will be linked between these two tags:

<!--TEMPLATES-->   
<!--TEMPLATES END-->

Accessing Sail's Assets

Here's how you access the assets under either scenario:

USING the `/linker` folder

`/js` --> `/linker/js/yourFile.js`

`/styles` --> `/linker/styles/yourCSS.css`

NOT USING the `/linker` folder

`/js` --> `/js/yourFile.js`

`/styles` --> `/styles/yourCSS.css`

Problem

I'm trying to manually include some assets in SailsJS, however I can't get them to work. They keep 404'ing. The config/routes.js comments tell me that and image in assets/images/1.png would be accessible via `href="images/1.png"`. The same thing doesn't seem to apply for stylesheets as `<link rel="stylesheet" href="/styles/style.css">` results in a 404 not found. I saw that Sails uses a very extensive Gruntfile as of lately, but I wanted a bit more control so I ditched it. I know that breaks the automatic including of assets, but did that also break the manually insertion? :( Edit: I found in the documentation that public assets aren't served from the assets folder anymore, but from the .tmp/public folder. Is there a way I can change this behaviour and just use the assets/ folder as a public facing directory? Another option would of course be to simply use Sails' Gruntfile approach, but it keeps throwing less compiler errors even though when I compile things manually using `lessc` everything works fine...

Original source