By Sails.js Tech Brasil

Em termos gerais, Sails.js é um gerador de códigos JavaScript que entrega, em poucos minutos, um protótipo executável de uma Aplicação WEB do tipo backend robusta, segura e escalável. Diz-se backend porque todo o processamento ocorre do lado do servidor e depois disso é retornado ao navegador páginas HTML5 + CSS + JavaScript dinâmicas ao Cliente Web.

Um Protótipo Sails é gerado com base na biblioteca CSS Bootstrap 4 ©, portanto você encontrará nas páginas .EJS (templates para HTML) criadas várias declarações de classe tais como <span class="text-danger">Texto na cor danger (normalmente vermelho)</span>

Este passo-a-passo demonstra como modificar o Bootstrap como solução de frontend em sincronia com as funcionalidades do Sails.js no backend.

Se esta é sua primeira vez aqui, recomendamos a leitura dos conteúdos abaixo antes de continuar:

• Visão Geral do Framework
• Detalhes do Funcionamento do Sails.js
• Sails com CSS / LESS

• Node.js instalado na estação de trabalho (https://nodejs.org)
• Acesso a internet
• Pré conhecimento do básico de CSS
• Uma IDE de desenvolvimento qualquer instalada (IntelliJ, Visual Code, Eclipse, Netbeans, Kdeveloper, etc.)

1. Instalação do Sails.js
   npm i sails -g
2. Criando o protótipo
   sails new primeiro-prototipo
   Quando perguntado, responda: 2. Empty

    Choose a template for your new Sails app:
    1. Web App  ·  Extensible project with auth, login, & password recovery
    2. Empty    ·  An empty Sails app, yours to configure
    (type "?" for help, or <CTRL+C> to cancel)
   ? 2
             

3. Navegando para o diretório raiz do Protótipo
   cd primeiro-prototipo
4. Executando o Primeiro Protótipo pela primeira vez
   sails lift você verá:

    info: Starting app...
   
    info: Initializing project hook... (`api/hooks/custom/`)
    info: Initializing `apianalytics` hook...  (requests to monitored routes will be logged!)
    info: ·• Auto-migrating...  (alter)
    info:    Hold tight, this could take a moment.
    info:  ✓ Auto-migration complete.
   
   debug: Running v0 bootstrap script...  (looks like this is the first time the bootstrap has run on this computer)
    info:
    info:                .-..-.
    info:
    info:    Sails              <|    .-..-.
    info:    v1.5.8              |\
    info:                       /|.\
    info:                      / || \
    info:                    ,'  |'  \
    info:                 .-'.-==|/_--'
    info:                 `--'-------'
    info:    __---___--___---___--___---___--___
    info:  ____---___--___---___--___---___--___-__
    info:
    info: Server lifted in `C:\Users\rogeriorfs\git\passo-a-passo`
    info: To shut down Sails, press <CTRL> + C at any time.
    info: Read more at https://sailsjs.com/support.
   
   debug: -------------------------------------------------------
   debug: :: Mon Jul 17 2023 08:15:43 GMT-0300 (Horário Padrão de Brasília)
   
   debug: Environment : development
   debug: Port        : 1337
   debug: Local       : http://localhost:1337
   debug: -------------------------------------------------------
             

5. Utilize o navegador (browser) de sua preferência e navegue para http://localhost:1337. O navegador deve apresentar algo do tipo:
   
6. Se uma nova página se abriu, então continue na próxima etapa

1. Localize, dentro do novo diretório criado pelo gerador de códigos Sails, o diretório assets/dependencies/bootstrap-4/ e visualize os arquivos que lá estão. Digite no console ls -l e você deverá visualizar algo do tipo:

   -rw-r--r-- 1 Regina 197609 212345 Apr 11  2023 bootstrap-4.bundle.js
   -rw-r--r-- 1 Regina 197609 173597 Apr 11  2023 bootstrap-4.css
               

2. Localize o arquivo views/pages/homepage.ejs e observe o uso das classes bootstrap!

     <div id="homepage" v-cloak>
     <div style="padding-top: 100px; padding-bottom: 25px; color: #14acc2;" class="d-flex flex-column justify-content-center position-relative" purpose="full-page-hero">
       <div class="container text-center">
         <div style="width: 220px; height: 170px;" class="mx-auto position-relative">
           <img style="width: 170px; left: 25px; top: 25px;" class="position-absolute" alt="The sky above the ocean" src="/images/hero-sky.png"/>
           <img style="width: 80px; top: 55px; left: -40px;" class="position-absolute" purpose="cloud-1" alt="A grayish-blue cloud" src="/images/hero-cloud.png"/>
           <img style="width: 80px; top: 45px; left: -40px;" class="position-absolute" purpose="cloud-2" alt="Another grayish-blue cloud" src="/images/hero-cloud.png"/>
           <img style="width: 160px; bottom: 50px; left: 18px;" class="position-absolute" purpose="ship" alt="A ship hovering a few feet over the surface of the water, bearing a flagpole with the Sails.js logo" src="/images/hero-ship.png"/>
           <img style="width: 170px; bottom: 40px; left: 25px;" class="position-absolute" alt="The shadow of the floating ship on the water" src="/images/hero-water.png"/>
         </div>
         <h1 class="display-4 pb-5">A new <strong>Sails</strong> app.</h1>
         <div>
   
         [...]
   

1. Existem várias versões de temas (Themes) Bootstrap pagas e gratúitas que podemos utilizar. Veja abaixo uma lista delas:
   • Site Oficial de Temas Bootstrap: https://themes.getbootstrap.com/
   • Free Bootswatch: https://bootswatch.com/4/
   • Creative TIM: https://www.creative-tim.com/bootstrap-themes/
   • Flatlogic: https://flatlogic.com/templates/
2. Escolha aquela que mais se adapta a sua necessidade de identidade visual e faça o download do respectivo arquivo bootstrap.css e SUBSTITUA pela versão que se encontra em assets/dependencies/bootstrap-4/
3. Reinicie seu Protótipo com o comando sails lift e navegue para a página inicial http://localhost:1337/homepage
4. Se o tema se alterou na sua tela, então sua nova identidade visual está pronta!