Setting the application home page

Summary

In this lesson, we replace the default Sails homepage with a custom homepage for our blog, displaying a welcome message and preparing to show recent articles. This involves:

1. Removing the Default Page

   • Deleting views/pages/homepage.ejs.

   • Creating a new folder views/pages/home/.

   • Adding index.ejs inside it with a basic structure.

2. Creating the New View

   • Adding a title (<h1>Sails Blog</h1>).

   • Writing a welcome message.

   • Adding a section for displaying the top five recent articles.

3. Setting Up the Route

   • Editing config/routes.js to map / to home/index.

   • This means a HomeController with an index action needs to exist.

4. Generating the Action

   • Running sails generate action home/index.

   • Updating api/controllers/home/index.js to render the new view.

5. Restarting Sails and Testing

   • Restarting the Sails server with sails lift.

   • Navigating to http://localhost:1337 to see the new homepage.

Transcript

Alright, now in the previous lesson, we saw how to create our first page in Sails by setting up a route, adding an action, and writing a .ejs file. So, you would notice that currently, if I run sails lift and open up Firefox, going to localhost:1337, we see the default Sails page.

But for our blog, we don’t want this page. Instead, when users visit the home page, we want a welcome message and the top five recent articles. Let’s set that up before moving forward.

So, let’s go back to Visual Studio Code. The page currently displayed is homepage.ejs. We don’t need this, so I’m going to delete it.

Next, I’ll create a new folder called home inside views/pages/. Inside this folder, I’ll create index.ejs. Now, let’s add some content:

<h1>Sails Blog</h1>
<p>Welcome to my very first web application with Sails.</p>
<h2>Recent Articles</h2>
<!-- TODO: Display top five recent articles -->

Now, if we restart the Sails server, nothing will happen. In fact, we’ll likely get an error because there’s no route serving this new homepage yet.

To fix that, let’s head into config/routes.js. Just like in the last lesson, we’ll replace the default homepage route with:

'/': 'home/index'

This tells Sails that GET / should be handled by an action called index in a home controller. But since this action doesn’t exist yet, let’s generate it.

sails generate action home/index

This creates api/controllers/home/index.js. Inside this file, we’ll set up our action to render the new homepage:

module.exports = {
  friendlyName: 'Index',
  description: 'Display homepage',
  exits: {
    success: {
      responseType: 'view',
      viewTemplatePath: 'pages/home/index'
    }
  },
  fn: async function () {
    return {};
  }
};

In the future, we’ll fetch the five most recent articles and pass them to the view, but for now, this is our basic setup.

Now, let’s restart the Sails server:

sails lift

And if we refresh Firefox, we see our new homepage. We’re not focusing on styling in this course, just understanding how Sails works for creating pages.

In the next lesson, we’ll dive into MVC and start working with models to create and manage articles.