7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 Serving Static Assets

Sails.js can act as a regular web server and serve static assets like HTML, CSS, JavaScript and image files. Let’s put Sails in static assets mode and take a look at some Sails basics at the same time.

Related Links

2.1 Serving Static Assets

Hi folks, in this lesson we can put Sails into static delivery mode in order to start building out the frontend of our dashboard. As we saw earlier in the course when we lifted our app after creating it, by default we were served a server-generated page that was built by Sails from EJS templates in the views folder. This is the default behavior for Sails. But if we want to disable the server-rendered views in order to build views on the frontend, we can just do that by making a slight change to the routes.js file in the config folder. So let's get that file opened up and take a look. And if we scroll down a bit, we can see that there's very little actually in this file other than comments. But what is here is the default view for '/' and that ties it to the view: 'homepage'. And that means the homepage.EJS view, and we can change that so instead of saying homepage, it just says false. So by default, Sails creates a singe route for us when we create a new app, and that route matches the route of the app. So let's just lift our app And if we try to visit this URL now. Then we see the default 404 page. So what we want to do now is add an index.html page to the assets folder, and this will get synced up to the .tmp directory and served as a static file. So first of all, let's add a simple heading to the page. And if we go back to our browsing now and refresh the page that's running under localhost. We should see our lovely new heading there. So there was actually more than just rendering some HTML when Sails was generating the homepage on the server. It was also using Grunt to insert links to style sheets and script files that were added to the page. Our static page has lost that, but we can add it back very easily. So let's go back to the editor now. And if we open up the views directory, there is a file in here called layouts.ejs list. Just open it up. So this is the wrapper for individual page templates and gives us things like the head and body tags, which are common to most if not all pages in the site. And if we look in the head, then right down near the bottom here, we can see that there's this section STYLES and STYLES END. And in between them is a link to the importer.css file. So we can copy this whole block into our new index.html file. So don't worry too much about the imported file for now. We'll look at this in more detail in the next lesson. And in fact this file will get loaded anyway, so we can actually delete the link for it together So any other style sheets that are in our assets/styles folder will get automatically inserted between these two comments by Grunt. And we can actually do the same thing for scripts, so let's go back to the layout file. And if we scroll down, and we see that there is a similar SCRIPTS and SCRIPTS END block. So let's copy that as well. And there is already a script file linked there, sails.io.js. And just like with the style sheets, any scripts that are placed in our assets/js folder will automatically get inserted between the two scripts comments. So we can actually get rid of this one for now as well. So let's go back to the browser now and let's refresh the page. And let's open up the DOM explorer. We can see straight away in the body that the sails.io.js script file has been reinserted into the scripts block for us. And let's just open up the head. And we can see that the same thing has happened for the imported .css file. So now we can grab some of the frontend dependencies that we'll be using. So we're gonna use Angular.js, so you should go ahead and download that now also. And we're also gonna be using a plugin for Angular called Angular Chart. And this has a dependency on Chart.js, so once you downloaded Angular Chart and unpacked it, you'll want to download Chart.js. And we can this from GitHub. And lastly for now, we're also gonna be using normalize.css, and we can get that from GitHub also. So I've already got these ready and waiting on my desktop. We're just gonna copy these into the assets directory. So these CSS files, there's normalize.css and there's an angular-chart.css, these can go straight into the styles directory. And if we actually go into the js directory, there is a folder in here called dependencies. So all three of these script dependencies, they can go straight into the dependencies folder. Great, so let's just go back to the browser again. And let's refresh the page once more. And now, we can see that all of the dependencies that we added to the scripts and assets folder have automatically been inserted by Grunt for us. So that's super useful, however, we do have console error, and straight away I can see that some of the script files aren't actually in the right order. And that's probably what the console error is going to tell us. And also, some of the style sheets aren't in the right order as well. And don't worry, it's very easy to fix these. And we'll just do that now. So let's get back to the editor. And this time we need to open up the tasks folder, and in here there's a folder called pipeline.js. We just want to open that up. And this is actually the file that controls how Grunt inserts these scripts and CSS files. And as you can see, there is a variable here which is an array called cssFilesToInject. And a bit lower down, there's a similar array called jsFilesToInject. So this is where we can control the order of these files. So for the scripts side of things, we just wanna make sure that angular.js gets loaded before the other dependencies. I think it's the minified version. Let's just check. So that's fine. And let's also make sure that normalize.css gets loaded before any of the other CSS. Perfect. So let's go back to our browser now. And if we refresh the page, we now find that the angular.min script file gets injected before the others, so that's good. And already, chart.js and angular-chart are in the right order, so that's fine. And let's just open up the head once again, and now we can see that normalize is being loaded before the others, great. And the console error has disappeared, so I'm gonna guess that was because of the source order of the script files. So in this lession we saw how to disable the default server-rendering that comes with a fresh Sails app, and we saw how to serve a static html page instead. We also saw how to hook up the automatic style sheet and script file insertion. And we downloaded some of the client-side dependencies that we're gonna be using in our example app. And we saw how to control of the load order of the scripts that Grunt will automatically insert into the page. Thanks for watching.

Back to the top