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

1.3 Setup

In this lesson we’ll make sure that we have everything we need to start using Sails.js and to create a new Sails app. We’ll also take a quick look at the scaffolding we get when we initialize a new app with Sails.

Related Links

1.3 Setup

Hi. Thanks. In this lesson we can make sure we have everything we need installed and ready to start using Sails. Sails is a node app, so we'll need to make sure we have Node.js installed. If not, we can head on over to the Node.js website and if there's an installer for your platform, the site should show you the relevant button. Windows users will also need to make sure they have the latest of the 2.7.x versions of Python installed. Again, we can get this from the Python website and just make sure you click the 2.7 and in this case it's .10 version. Recently, I've had various issues trying to install different modules with the latest version of MPM. So it might be worth installing a previous version and we can do that from the command line. And we'll just wait for that to install. We should also make sure that we have the grunt-cli installed, so let's just install that globally also. And lastly, we need to install Sails. Now we should also install Sails globally, even though each time we create a new Sails app, they'll be a local instance of Sails within the app, which should still install globally. So let's do that now quickly, as well. So on Windows there, you might have noticed that some of the optional dependencies failed. That's fine. We can just ignore those warnings and everything will continue to work as normal. So now that we've got everything installed ready, we can create our first Sails project and we can do that easily from the command line using the SailsNew command. And then we just need to tell Sails what the name of our app is called. So I'm gonna call the app dashboard, this command will scaffold out an entire Sails app for us so if we take a look into this new dashboard directory, we should find that it contains a lot of stuff already. We'll take a look at exactly what we get in just a moment. So to test that everything is working, we can run the lift command in the new directory. And we should see some output there, it tells us the version of Sails that we're running. And we get some nice ASCII out there, of the picture of a boat on what looks like waves. And we get some information just to say that the server lifted the app from the dashboard directory. And as a url shown there with the message that we can see our app by visiting this url. And if we want to shut down Sails, we just use Ctrl+C at anytime. We also get some debug information there. We've got the date and time. And the environment that we're in, currently developments and the port that are app is running on. So let's open up the homepage in our browser now. And here we see the default landing page for a new Sails app. And this page gives us a few different things that we can try, there are some steps down here, let's just scroll down slightly. So we can generate a REST API, we can lift our app. Actually we've already done that, otherwise we wouldn't be seeing this page. And we can dive right in, and there's links to the online documentation here, some tutorials, and some of the areas in which the community is active. So we'll be doing some of these things a bit later on, and one thing I just want to draw to your attention is that this page is being generated dynamically by Sails. And right up at the top of the page just under the heading here, we can see that we are looking at views\homepage.ejs. EJS is the server side templating language which Sails uses, we'll be looking at that in a bit more detail later on. So now let's just take a look at what Sails has given us in our dashboard folder. So you can see we've already got quite a lot of stuff in here. Let's just have a quick look. So first of all, we've got a .tmp directory and another folder called assets. These photos were together, so let's look at them first. Our front end assets, things like images, script files, and style sheets are kept in the assets directory. All of these files are automatically synced to a folder called public inside the .tmp directory by Sails when we lift our app. So this is like the standard www folder that you might find in other web servers. So straight out of the box we can use less files, CoffeeScript files, or JST templates within their respective folders in the assets directory. Let's just go back there. Another important folder is the API folder. This is where the backend for our app lives. In here we've got models and controllers, and also policies, services, and server responses. We'll look at these in more detail later in the course. But just be aware that this is where most of our app's logic will reside. The views for our app are contained in the views folder. So these are our server side views which are created using EJS templates and which differ from the client side templates that reside in the assets folder. So, the home page that we're viewing in the background here is made from homeage.ejs and we can see that this file is here in the views folder. Sails has a wide range of configuration options that can be adjusted, if necessary, to tailor the app to your requirements. These files all live in the config folder. And we can see that there are lots of different files in here, and that it's organized into different files which configure different aspects of Sails. And let's just go back up a level. So we can see that we also have a node_modules folder, and this is where all the various Node and Grunt modules that we'll be using reside. And let's just go back up to the root again. We can see that we've got some loose files in the root here. Some of them are pretty standard and you'll see them in lots of projects. So editorconfig, gitignore, a Gruntfile, a package.json file and a README. We also have a .sailsrc file, so this is another configuration file which can override some of the other configurations in the config folder. And if you want to add global settings by the way for all of our Sails apps which are running on the same machine, we can actually move this sailsrc folder up to our User or home directory, and that will then serve as a global settings file. And lastly there's an app.js file. This file is used to run the app without using Sails lift if we need to. We won't be using that during this course, but just be aware that that's what it's for. So, in this lesson we installed Sails, and any of the other required dependencies. And then created a brand new Sails app, ready for us to start working with. We saw how we can preview our app, by lifting it, a Sails term for building the app. And we also took a look at the anatomy of a newly created Sails app, to see what we get out of the box. So there's just one more thing that we're gonna need and use frequently throughout this course. It's a Chrome extension called Postman. And we can get this from the Chrome Web Store. So I've already got this app installed. If you don't have it installed, I suggest you come here and download the app and install it now. So let's move on to the next section and start building our app and diving into Sails. Thanks for watching.

Back to the top