Edit Page
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 config/views.js.
If a new view you've created isn't rendering, make sure you've hooked it up in your 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, views/layout.ejs.
<!-- Default home page -->
<link type="text/css" href='http://sailsjs.com/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.com/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.com/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://sailsjs.com/documentation/concepts/models-and-orm/models">model</a> <code class="pocket">api/models/User.js</code> and a <a href="http://sailsjs.com/documentation/concepts/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://sailsjs.com/documentation/concepts/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://sailsjs.com/documentation/concepts/routes">routes</a>, set up <a href="http://sailsjs.com/documentation/concepts/policies">security policies</a>, configure your <a href="http://sailsjs.com/documentation/reference/configuration/sails-config-connections">data sources</a>, and build custom <a target="_blank" href="http://sailsjs.com/documentation/concepts/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.com/documentation/anatomy"><li>App Structure</li></a>
<a target="_blank" href="http://sailsjs.com/documentation/reference"><li>Reference</li></a>
<a target="_blank" href="http://sailsjs.com/documentation/concepts/deployment/faq"><li>FAQ</li></a>
<a target="_blank" href="http://sailsjs.com"><li>Supported Databases</li></a>
<h4>Tutorials</h4>
<a target="_blank" href="https://github.com/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>
For a better experience on sailsjs.com, update your browser.
App Structure
Built with Love
The Sails framework is maintained by a web & mobile studio in Austin, TX, with the help of our contributors. We created Sails in 2012 to assist us on Node.js projects. Naturally we open-sourced it. We hope it makes your life a little bit easier!
© 2012-2018 The Sails Company.
The Sails framework is free and open-source under the MIT License.