Tutorial de Sails.js: Cómo crear un proyecto

Lo primero que haremos será crear un proyecto, al que llamaremos VideoClub . Para ello iremos a la consola, nos posicionaremos donde cada uno crea conveniente crear su proyecto y ejecutaremos el siguiente comando en la consola:
 

~/Desktop $ sails new videoclub

Ahora, accedemos a la carpeta del proyecto y arrancamos el servidor con:
 

~/videoclub $ sails lift

Como vemos en el navegador, se nos abre la vista wellcome que se crea por defecto. Una vez abierto el proyecto con Sublime Text , para cambiar esto lo que haremos será lo siguiente:

• Ir a la carpeta views
• Crear una carpeta con nombre static
• Crear dentro de dicha carpeta el fichero index.ejs
• Escribir el siguiente código html :
  • < h1>Bienvenido a mi primer proyecto con sails< /h1>
• Ir a la carpeta config
• Ir al fichero routes.ejs y cambiar la vista que se renderizará al arrancar el servidor.
   

  '/': { 'static/index' }
  

Si abrimos el fichero layout.ejs , que está dentro de la carpeta views , veremos que hay una línea que pone: <%- body -%> . Esto lo que hace es cargar en layout.ejs lo que hay en 'static/index' y en los diferentes ficheros .ejs que iremos creando a lo largo del curso.
 

Además, si añadimos archivos css dentro de la carpeta assets/styles y ficheros javascript dentro de la carpeta assets/js ; cuando hacemos esto el servidor los añade automáticamente al fichero, sin necesidad de hacerlo manualmente.
 

Ahora descargaremos los ficheros Bootstrap necesarios para añadirlos en sus correspondientes carpetas para tener nuestro index más atractivo.
 

Aquí puede descargar los ficheros que debe añadir en assets/js y aquí puede descargar los ficheros que debe añadir en assets/styles .
 

Una vez hecho todo esto, añadiremos el siguiente código dentro del fichero index.ejs de la carpeta static :
 

<div class="container">
    <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in
        <label for="inputEmail" class="sr-only">Email address
            <input type="email" id="inputEmail" class="form-control" placeholder="Email address" name="email" required autofocus>
        <label for="inputPassword" class="sr-only">Password
            <input type="password" id="inputPassword" class="form-control" placeholder="Password" name="password" required>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in
        <input type="hidden" name="_csrf" value="<%=_csrf %>"/>
    </form>
</div> < !-- /container -->

Finalmente, dentro del fichero layout.ejs , insertaremos el siguiente código entre la cabecera de body y <%- body %>
 

      <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation< /span>
            <span class="icon-bar">< /span>
            <span class="icon-bar">< /span>
            <span class="icon-bar">< /span>
          </button>
          <a class="navbar-brand" href="http://localhost:1337/">Ekembi</a>
          < a class="navbar-brand" href="/user/create/">Crear Usuario</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form action="" class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" name="email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" name="password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in< /button>
            <input type="hidden" name="_csrf" value="<%=_csrf %>"/>
          </form>
        </div>
      </div>
    </nav>

Cuando creemos el controlador y el modelo de user , modificaremos los forms para que tras pulsar el botón podamos autenticarnos.
 

Con esto tenemos la página index terminada y el código introducido en layout.ejs nos mostrará siempre la barra para autenticarnos y que luego modificaremos cuando estemos autenticados.