Build a Home Page for a Losant Experience

In the previous part of this walkthrough, you learned how to create a login page to allow your Experience Users to authenticate against your custom experience. This part expands your experience to include a custom home page that only logged-in users can see.

Step One: Create an Experience View

The first step in building the home page is to create the view with the content.

Set the Layout to the layout you created earlier in this walkthrough. Once you click “Create Page”, you will redirect to a screen where you can edit the new page’s content.

Here is the page content:

{{#fillSection "metaDescription"}}This is an example home page for your application experience.{{/fillSection}}
<div class="container">
  <div class="jumbotron">
    <h1>Your Experience View!</h1>
    <p class="lead">
      This is an example <a target="_blank" href="https://docs.losant.com/experiences/views/">Experience View</a> we've built for you. It provides many of the common
      components that most web pages have, like a header, footer, and navigation. You can use this
      as a launching point for your own custom user interfaces.
    </p>
  </div>
  <p>
    All Experiences Views start with a <a href="https://docs.losant.com/experiences/views/#layouts">Layout</a>. The layout includes common items found on
    all pages, like a header and footer. <a href="https://docs.losant.com/experiences/views/#pages">Pages</a> are then rendered inside
    the layout.
  </p>
  <p>Most pages return custom HTML that you define; what you're reading now is an example of this. However, you can also create a <a target="_blank" href="https://docs.losant.com/experiences/views/#dashboard-pages">Dashboard page</a>, which allows you to embed an
    existing dashboard as an easy way to publish data to your Experience Users.
  </p>
  <p>
    For additional information, please read the <a target="_blank" href="https://docs.losant.com/guides/how-to-build-an-experience/overview/">Experience View Walkthrough</a>, which includes
    detailed instructions for how to build a complete example that includes both custom and
    dashboard pages.
  </p>
  <p>
    This example is created using <a href="https://getbootstrap.com/docs/3.3/" target="_blank">Twitter Bootstrap</a>, which
    provides many components, styles, and utilities that make building web pages simple.
  </p>
</div>

Copy/paste above into your new page.

This home page example is mostly Twitter Bootstrap markup for laying out the content, plus a {{#fillSection}} helper similar to what was part of the Log In page.

Step Two: Create the Experience Endpoint

Next, create the endpoint that returns the page you just created.

Set the Method / Route to / and set the Access Control to Any authenticated user.

Step Three: Use Static Replies

Next, you need to use static replies. When your endpoint does not need complicated logic, you can use static replies to immediately redirect or render a page (and so you don’t need to create a workflow).

In this case, there are two static replies:

• One for when there is an authenticated user.
• One for when there is not.

In the case where there is no authenticated user, the Unauthorized Reply redirects to /login to force the user to log in. In the case where there is an authenticated user, it replies directly with the page that you created above, the Home Page.

Now that the page and endpoint with static replies are created, your home page route will work. If you request the / route while not logged in, you’ll be redirected to /login. At that point you can log in and then you’ll be redirected back to / to view your home page content.

What’s Next

This completes this part of the walkthrough. The following parts of this walkthrough will begin adding additional functionality that is common to most web pages.