Sails.js Tech Brasil

By Sails.js Tech Brasil

Sails.js com Angular 14+

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 apelidado de 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.

O Angular é um framework para desenvolvimento de frontend, mantido pela equipe do Google e com rígidos padrões de projeto. Implementado em TypeScript. Uma vez concluída a implementação de suas funcionalidades, são gerados (build) arquivos JavaScript, HTML e CSS que podem ser distribuídos para execução em navegadores (ie, Edge, Safari, etc.)

Este passo-a-passo demonstra como utilizar o Angular 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:

Pré-requisitos

Node.js instalado na estação de trabalho (https://nodejs.org)
Angular/Cli instalado na estação de trabalho (https://angular.io)
Pré conhecimento do básico das linguagens de programação JavaScript e TypeScript
Uma IDE de desenvolvimento qualquer instalada (IntelliJ, Visual Code, Eclipse, Netbeans, Kdeveloper, etc.)

Primeira Etapa: Protótipo Raiz (5 min)

Instalação do Sails.js
npm i sails -g

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

Navegando para o diretório raiz do Protótipo
cd primeiro-prototipo

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: -------------------------------------------------------

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

Segunda Etapa: Criação de Nova Funcionalidade (10 min)

Digite na pasta raiz do seu projeto:
npm init @angular myApp
Espera-se como resultado:


Need to install the following packages:
  @angular/create@16.2.4
Ok to proceed? (y) y
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

Siga as orientações e crie seu Projeto de Páginas Dinâmicas Angular. Obs.: escolha [Yes] quando perguntado se deseja utilizar Angular routing!

Localize, dentro do novo diretório criado pelo gerador de códigos Angular, o arquivo angular.json e altere a informação de:

                "projects": {
                "myApp": {
               ...
                "build": {
                "builder": "@angular-devkit/build-angular:browser",
                "options": {
                   "outputPath": "dist/my-app",

para:

  "projects": {
    "myApp": {
     ...
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../assets",

de modo que o arquivo se pareça com:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "cli": {
    "packageManager": "npm"
  },
  "newProjectRoot": "projects",
  "projects": {
    "myApp": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../assets",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "myApp:build:production"
            },
            "development": {
              "browserTarget": "myApp:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "myApp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

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

√ Browser application bundle generation complete.
√ Copying assets complete.
√ Index html generation complete.

Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.4c8e9b0ac4639c46.js      | main          | 207.70 kB |                56.47 kB
polyfills.d9dc496a0e0d7b3e.js | polyfills     |  33.02 kB |                10.63 kB
runtime.b74d0b05de58f3da.js   | runtime       | 888 bytes |               513 bytes
styles.ef46db3751d8e999.css   | styles        |   0 bytes |                       -

                              | Initial Total | 241.58 kB |                67.60 kB

Build at: 2023-09-28T12:40:56.877Z - Hash: c6e031ca4939cd2a - Time: 15621ms

Localize o arquivo views/pages/homepage.ejs e substitua todo o seu conteúdo por: <script> window.location.href='/index.html' </script>
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 Angular) e navegue para http://localhost:1337
Você deverá visualizar algo do tipo:
Se a página acima apareceu, então passe para a próxima Etapa

Terceira Etapa: Editando sua página inicial Angular

Na console, navegue para o diretório criado pelo Angular e digite ng serve. Depois abra seu Navegador e navegue para http://localhost:4200/
Você deverá visualizar a mesma página acima.
Localize o arquivo [nome-do-diretorio-angular]/src/app/app.component.html e faça a alteração do texto Welcome (provavelmente linha 312) para Sails com Angular
Se o texto se alterou na sua tela, então sua integração está pronta!
Ao término de sua manutenção no código Angular, execute [nome-do-diretorio-angular]/ng build para atualizar o conteúdo estático em assets/. Somente depois disso, reinicie sua aplicação Sails com o comando [diretorio-raiz]/sails lift

Observe que, embora estejam dentro de uma mesma aplicação Web, não há conexão de dados entre o backend Sails e frontend Angular.
Para tornar esta conexão possível, é necessário criar no Sails Controles ou Ações que atuem como Endpoints e Funções de Consumo de API no Angular.

(*) Consulte também Como criar um JSON Web Token para autenticar o Cliente Vue no Servidor Sails/Node

(*) Consulte também Como criar um Validador JWT para validar o Token enviado pelo Cliente

Para saber mais: