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.

No entanto, é possível separar o acesso aos dados e a renderização de telas para os usuários em dois "pacotes" distintos: o frontend - contendo as páginas html+JavaScript construídas na estação do cliente de forma dinâmica; e o backend - contendo as funções de acesso a base de dados e autenticação no lado do servidor.

Este passo-a-passo demonstra como utilizar o Vue 3 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

• Node.js instalado na estação de trabalho (https://nodejs.org)
• Vue3.js instalado na estação de trabalho (https://vuejs.org)
• Pré conhecimento do básico da linguagem de programação JavaScript
• 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. Digite na pasta raiz do seu projeto:
   npm init vue@latest
   Espera-se como resultado:
   

   
   Need to install the following packages:
   create-vue@3.7.1
   Ok to proceed? (y) y
   
   Vue.js - The Progressive JavaScript Framework
   
   ? Project name: » vue-project
   
           

2. Siga as orientações e crie seu Projeto de Páginas Dinâmicas Vue 3. Obs.: escolha [No] quando perguntado se deseja utilizar Typescript!
3. Localize, dentro do novo diretório criado pelo gerador de códigos Vue 3, o arquivo vite.config.js e adicione a informação build: { outDir: '../assets', emptyOutDir: true } de modo que o arquivo se pareça com:

   import { fileURLToPath, URL } from 'node:url'
   
   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [
       vue(),
     ],
     resolve: {
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url))
       }
     },
     build: {
       outDir: '../assets',
       emptyOutDir: true
     }
   })
             

4. Ainda dentro do diretório criado pelo Vue, digite no console npm install e, em seguida, npm run build. Você deve visualizar no console algo do tipo:

   vite v4.4.7 building for production...
   ✓ 42 modules transformed.
   ../assets/assets/logo-277e0e97.svg        0.28 kB │ gzip:  0.20 kB
   ../assets/index.html                      0.42 kB │ gzip:  0.28 kB
   ../assets/assets/AboutView-4d995ba2.css   0.09 kB │ gzip:  0.10 kB
   ../assets/assets/index-efcb3133.css       4.20 kB │ gzip:  1.30 kB
   ../assets/assets/AboutView-923dc868.js    0.23 kB │ gzip:  0.20 kB
   ../assets/assets/index-3541e00c.js       84.97 kB │ gzip: 33.45 kB
   ✓ built in 1.34s
               

5. Localize o arquivo views/pages/homepage.ejs e substitua todo o seu conteúdo por: <script> window.location.href='/index.html' </script>
6. Reinicie seu Protótipo com o comando sails lift (a partir da raiz do seu novo protótipo e não da pasta criada pelo Vue 3)
7. Você deverá visualizar algo do tipo:
   
8. Se a página acima apareceu, então passe para a próxima Etapa

1. Na console, navegue para o diretório criado pelo Vue 3 e digite npm run dev. Depois abra seu Navegador e navegue para http://127.0.0.1:5173/
2. Você deverá visualizar algo do tipo:
   
3. Localize o arquivo [nome-do-diretorio-vue]/src/App.vue e faça a alteração do texto You dit it! (provavelmente linha 11) para Sails com Vue 3
4. Se o texto se alterou na sua tela, então sua integração está pronta!
5. Ao término de sua manutenção no código Vue, execute npm run build para atualizar o conteúdo estático em assets/. Somente depois disso, reinicie sua aplicação Sails com o comando sails lift