First sails didn't create .tmp/public, so i did it manually. But it also doesn't copy stuff from my assets folder to my public folder. Can someone explain why that is?
#
At that time, the answers i got weren't helping,
I've updated to 9.8 now, and i don't seem to have any problem.
#
I had this same issue. When running sails lift
the .tmp folder wasn't created. What finally worked for me was installing Grunt locally in the root folder of my sails app. So just run npm install grunt
in your sails app folder. Having Grunt installed globally with the -g
flag was apparently not enough. After the local installation, you can run sails lift
again, and the .tmp folder will be created.
Hope this helps!
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
It didn't appear that Grunt was doing anything on my installation including copying the assets folder. I found this post on the Google Group by Rob Wormald that finally got it working for me:
In your .sailsrc file, in the root of your project, remove the line that says "grunt" : false. That should get things working.
This was an issue with one of the generators that I believe should be corrected in the next release.
You will need to check Gruntfile.js in your sails project root directory and everything will be much easier to understand. Here is some short explanation:
- Sails 'magic' during lift process are hidden in Grunt tasks.
- If Sails not create .tmp/public directories in your project, it can be because permissions or something similar (its happen on Windows as I know, I not have it on Linux). Solution is to create manually .tmp/public directories and to be sure that is writable.
- To get your assets copied to .tmp/public you will need to keep it inside assets/linker directory, or to update Gruntfile.js based on your specific need.
I hope this help :).