Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

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

Javier Delgado Magdalena
  • Escrito por Javier Delgado Magdalena el 16 de Junio de 2015
  • 1 min de lectura | Backend
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.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

7 razones para aprender NodeJS y MongoDB

7 razones para aprender NodeJS y MongoDB

Backend

23 de Abril de 2015

Que JavaScript se está convirtiendo en el lenguaje con más futuro de la web es algo que no duda nadie. La aparición de frameworks como AngularJS o Express le han dado un gran impulso que parece no ...

Sails.js tutorial

Sails.js tutorial

tutoriales

24 de Julio de 2015

Aprende sobre Sails.js con este tutorial. Conoce a fondo el framework para Node.js basado en MVC ideal para crear aplicaciones en tiempo real

Programador JavaScript Profesional

carrera

Incluye 6 cursos:

  • Node.js, MongoDB y Express.js
  • Curso de Meteor JS
  • Curso de React JS

y 3 cursos más!

Duración: 54 horas y 23 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars