Sign in Subscribe

Automatizando Tarefas com script postbuild

Rodrigo Acosta de Carvalho

Rodrigo Acosta de Carvalho

— 2 min read

Introdução

O script de postbuild é um recurso poderoso que pode automatizar diversas tarefas após a geração do build do projeto Angular. Neste artigo, vamos demonstrar uma implementação prática usando um exemplo simples: a inserção automática da versão da aplicação no index.html.

Tecnologias Utilizadas

  • Node.js v22
  • Angular v20
  • npm 10

Implementação Passo a Passo

1. Criando o Projeto

ng new spa-postbuild-v20

Nota: As configurações padrão do Angular CLI são suficientes para nosso exemplo.

2. Configurando o Package.json

Adicione o script de postbuild no seu package.json:

{
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "postbuild": "node postbuild.js",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  }
}

Nota: O nome "postbuild" é especial no ecossistema npm - ele será executado automaticamente após o comando build.

3. Preparando o Index.html

Modifique seu src/index.html para incluir uma meta tag app-version que será atualizada após o build:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SpaPostbuildV20</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="app-version" content="__VERSION__">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

4. Implementando o script PostBuild

Crie um arquivo postbuild.js na raiz do projeto:

const fs = require('fs');
const path = require('path');
const package = require('./package.json');

// Caminho padrão do index.html gerado após o build
const indexPath = path.join(__dirname, 'dist/spa-postbuild-v20/browser/index.html');

// Lê o conteúdo do arquivo
let indexContent = fs.readFileSync(indexPath, 'utf8');

// Substitui o placeholder pela versão atual do package.json
indexContent = indexContent.replace('__VERSION__', package.version);

// Salva o arquivo atualizado
fs.writeFileSync(indexPath, indexContent);

console.log(`✅ Versão ${package.version} inserida no index.html com sucesso!`);

Testando a Implementação

  1. Atualize a versão no package.json manualmente:
{
  "name": "spa-postbuild-v20",
  "version": "0.1.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "postbuild": "node postbuild.js",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  }
}
  1. Faça o build:
npm run build
  1. O arquivo index.html gerado na pasta dist terá a meta tag atualizada:
<meta name="version" content="0.1.0">

Ao rodar a SPA podemos fazer um inspect (F12) no arquivo index.html e ver a versão da SPA que chega no cliente.

Conclusão

O script postbuild é um recurso versátil que pode ser integrada à sua pipeline de CI/CD para automatizar tarefas cruciais após o build. Em nosso exemplo vimos como facilitar a identificação de qual versão da SPA está realmente e chegando no cliente, podemos chamar nossa atenção para questões de cache.

O exemplo demonstrado neste artigo é apenas um ponto de partida. O script postbuild pode ser expandido para atender necessidades específicas do seu projeto, tornando-se uma ferramenta essencial na automação do processo de build e deploy.

Referências

Read more