View our GitHub

Please visit sails-docs on GitHub to view documentation on your mobile device.

Edit Page

myApp/views/homepage.ejs

Purpose

This is the actual template that is rendered by default when a user visits the base URL of your lifted app. Notice the file extension? It stands for Embedded JavaScript. EJS is what Sails uses by default to render server side HTML views. This can be changed in myApp/config/views.js.

If a new view you've created isn't rendering, make sure you've hooked it up in your myApp/config/routes.js.

If you're used to putting all your HTML in a single file, this might look funny. You might be thinking "Where are the head and body tags"? The answer is, myApp/views/layout.ejs.

<!-- Default home page -->
<link type="text/css" href='http://sailsjs.org/styles/fonts.css' rel='stylesheet'/>
<style>
    /* Styles included inline since you'll probably be deleting this page anyway */
    html,body{text-align:left;font-size:1em}html,body,img,form,textarea,input,fieldset,div,p,div,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,code{margin:0;padding:0}ul,li{list-style:none}img{display:block}a img{border:0}a{text-decoration:none;font-weight:normal;font-family:inherit}*:active,*:focus{outline:0;-moz-outline-style:none}h1,h2,h3,h4,h5,h6{font-weight:normal}div.clear{clear:both}.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden}body{font-family:"Open Sans",Arial,sans-serif;font-weight:300;}.top-bar {width: 100%; background-color: #e4f0f1; padding: 15px 0;}.top-bar .container img {float: left;}.top-bar .container ul {float: right; padding-top: 25px;}.top-bar .container li {float: left; width: 125px; text-align: center; font-size: 15px; color:#000; font-weight: 600;}.top-bar .container a li:hover {color: #118798; -webkit-transition:color 200ms; -moz-transition:color 200ms; -o-transition:color 200ms;transition:color 200ms;}.container{width: 80%; max-width: 1200px; margin: auto;}div.header {-webkit-transition: 6s; -moz-transition: 6s; -o-transition: 6s;transition: 6s; background: rgba(4, 36, 41, 0.89) url(http://sailsjs.org/images/img_sailsShadow.png) no-repeat 42% bottom; padding: 100px 0 65px;}.header h1#main-title{color: #fff; font-weight: 300; font-size: 2.5em;}.header h3{color: #b1eef7; font-style: italic; font-weight: 300;}.header h3 code{font-style: normal!important; background-color: rgba(255,255,255,0.5); font-weight: 300; color:#0e6471; margin: 0px 5px;}div.main.container{padding: 50px 0;}h1 {color: #118798; font-weight: 300;}code {font-size: inherit; font-family: 'Consolas', 'Monaco', monospace; padding:4px 5px 1px; background-color: #f3f5f7}a{color: #118798; font-weight: 300; text-decoration: underline;}a:hover {color: #0e6471; -webkit-transition:color 200ms; -moz-transition:color 200ms; -o-transition:color 200ms;transition:color 200ms;}p{line-height: 1.5em;}blockquote{background-color: #e4f0f1; padding: 25px; line-height: 1.5em; margin: 15px 0;}blockquote span{font-weight: 600; padding-right: 5px;}ul.getting-started{padding: 25px 75px 25px 0; width: 70%; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}ul.getting-started li{padding: 25px 0;}ul.getting-started li h3 {padding-bottom: 10px; font-size: 25px; font-weight: 300;}.sprite{background:url(http://sailsjs.org/images/newapp.sprite.png) no-repeat; position: absolute; left: 0; top:0;}.getting-started .sprite{margin-left:10px;padding-left:60px;height:42px;width:0; float: left;}.getting-started .one{background-position:0 0}.getting-started .two{background-position:0 -42px}.getting-started .three{background-position:0 -83px}div.step {position: relative; padding-left: 70px; opacity: 0.9;}div.step:hover{ opacity: 1;}div.links {float: left; width: 30%; max-width: 325px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #f3f5f7; border: 1px solid #ebebeb; padding: 25px 45px 35px;}div.links h3 {color: #727272; text-align: center; font-size: 28px; font-weight: 300;}div.links h4 {color: #727272; font-size: 17px; font-weight: 600; padding: 15px 0 10px;}div.links .link-list a {text-decoration: none; font-weight: 400;}div.links .link-list a li {padding: 0px 0px 5px 10px;}div.default-page{min-width: 1200px;}.pocket{display:none;}
</style>
<script type="text/javascript">
setTimeout(function sunrise () {
    document.getElementsByClassName('header')[0].style.backgroundColor = '#118798';
}, 0);
</script>

<div class="default-page">
    <div class="header">
        <h1 id="main-title" class="container"><%= __('A brand new app.') %></h1>
        <h3 class="container">You're looking at: <code><%= view.pathFromApp + '.' +view.ext %></code></h3>
    </div>
    <div class="main container clearfix">
        <!-- <h1>Getting started</h1>
        <p>Don't worry, we've got your back.</p> -->
        <ul class="getting-started">
            <li class="clearfix">
                <div class="step">
                    <div class="sprite one"></div>
                    <h3>Generate a REST API.</h3>
                    <p>
                        Run <code>sails generate api user</code>.  This will create two files: a <a href="http://links.sailsjs.org/docs/models">model</a> <code class="pocket">api/models/User.js</code> and a <a href="http://links.sailsjs.org/docs/controllers">controller</a><code class="pocket">api/controllers/UserController.js</code>.
                    </p>
                </div>
            </li>
            <li class="clearfix">
                <div class="step">
                    <div class="sprite two"></div>
                    <h3>
                        Lift your app.
                    </h3>
                    <p>
                        Run <code>sails lift</code> to start up your app server.  If you visit <a target="_blank" href="http://localhost:1337/user"><code>http://localhost:1337/user</code></a> in your browser, you'll see a <a href="http://links.sailsjs.org/docs/blueprints">WebSocket-compatible</a> user API.
                    </p>
                </div>
            </li>
            <li class="clearfix">
                <div class="step">
                    <div class="sprite three"></div>
                    <h3>
                        Dive in.
                    </h3>
                    <p>Blueprints are just the beginning.  You'll probably also want to learn how to customize your app's <a href="http://links.sailsjs.org/docs/routes">routes</a>, set up <a href="http://links.sailsjs.org/docs/policies">security policies</a>, configure your <a href="http://links.sailsjs.org/docs/config/connections">data sources</a>, and build custom <a target="_blank" href="http://links.sailsjs.org/docs/controllers">controller actions</a>. For more help getting started, check out the links on this page.</p>

                </div>
            </li>
        </ul>
        <div class="links">
            <!-- <h3>Links</h3> -->
            <ul class="link-list">

                <h4>Docs</h4>
                <a target="_blank" href="http://sailsjs.org/documentation/anatomy"><li>App Structure</li></a>
                <a target="_blank" href="http://sailsjs.org/documentation/reference"><li>Reference</li></a>
                <a target="_blank" href="http://links.sailsjs.org/docs/faq"><li>FAQ</li></a>
                <a target="_blank" href="http://sailsjs.org"><li>Supported Databases</li></a>

                <h4>Tutorials</h4>
                <a target="_blank" href="http://links.sailsjs.org/community/sails101"><li>Sails 101</li></a>

                <h4>Community</h4>
                <a target="_blank" href="http://stackoverflow.com/search?q=sails.js"><li>StackOverFlow</li></a>
                <a target="_blank" href="https://github.com/balderdashy/sails"><li>GitHub</li></a>
                <a target="_blank" href="https://groups.google.com/forum/#!forum/sailsjs"><li>Google Group</li></a>
                <a target="_blank" href="http://webchat.freenode.net/"><li>IRC (#sailsjs on freenode)</li></a>

            </ul>
        </div>
    </div>
</div>

Is something missing?

If you notice something we've missed or could be improved on, please follow this link and submit a pull request to the sails-docs repo. Once we merge it, the changes will be immediately reflected on the website.