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 ments 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 piler errors even though when I pile things manually using lessc everything works fine...

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 ments 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 piler errors even though when I pile things manually using lessc everything works fine...

• javascript
• sails.js
• assets

Share Improve this question Follow edited Dec 2, 2013 at 12:10 lunanoko asked Dec 2, 2013 at 10:19 lunanokolunanoko 50611 gold badge77 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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/publicfolder. 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 mented 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