[AZURE] Publicando Angular2 + TypeScript + Webpack direto do Github

Ola pessoALL,

Continuando nossa serie de posts sobre publicações de sites no azure, hoje vamos falar sobre aplicações com TypeScript e html (sem nenhum web server especifico).

Com a evolução dos frameworks para produção de Single Page Applications eh cada vez mais comum a produção de front-end puramente em html + javascript.
Durante o desenvolvimento temos vários arquivos .js ou .ts e usamos algum automatizador de tarefas como gulp ou grunt, para gerar o arquivo .js final, adicione ainda Sass ou Less a equação e temos um cenário completo do dia a dia da maioria dos devs de front-end hoje em dia.

Felizmente com o Azure e a engine de publicação de sites eh muito fácil customizarmos o script de publicação e integrar direto com o GitHub.

Vamos fazer uma demo publicando uma aplicação com Angular2 + TypeScript + WebPack direto do GitHub gerando o build final. Vamos la!

Forkando o Repositório

Para começarmos vamos usar o repositório do Angular2 WebPack Starter:
https://github.com/AngularClass/angular2-webpack-starter

Crie um fork do repositório para sua conta do GitHub, precisaremos para fazer a integração com o Azure. Apos o fork clone o repositório localmente, lembre de substituir o rsantosdev pelo seu username do github.
git clone https://github.com/rsantosdev/angular2-webpack-starter.git

O repositório contem toda a configuração necessária para se trabalhar com Angular2 + Webpack, inclusive com testes, para testar o projeto localmente navegue ate o diretório aonde o projeto foi clonado e rode os seguintes comandos:

• Instalar as dependências: npm install
• Startar o servidor web: npm start

Apos o processo todo navegue ate: http://localhost:3000

Tudo certo agora, vamos fazer o deploy para o Azure.

Criando o script de deployment

Agora que temos nosso projeto configurado e rodando vamos criar o nosso script de deploy para o azure, a maneira mais fácil de criamos eh usar o azure-cli, se você ainda não tem instalado, rode o seguinte comando:
npm i -g azure-cli

Com a cli do azure instalada, vamos aos passos para gerar o script:

• Primeiro precisamos forcar o modo asm, execute o seguinte comando:
  
  azure config mode asm, o output deve ser parecido com:
  

info:    Executing command config mode
info:    New mode is asm
info:    config mode command OK

• Para gerar o script de deployment:
  
  azure site deploymentscript --node

• Ao final você terá 2 arquivos gerados pelo cli:
  
  .deployment - Indica qual o script sera executado, que por padrão eh o deployment.cmd.
  
  deployment.cmd - Contem o script para deployment

Toda a logica para o deploy fica no deployment.cmd, a primeira vista o arquivo pode paracer complicado mas a maioria do script eh para garantir que o script funcione localmente, procure a seguinte sessão para personalizar o script:

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:: Deployment
:: ----------

... Adicione os passos necessários aqui!

O arquivo gerado contem 3 passos:

• KuduSync
• Select node version
• Install npm packages

Iremos adicionar mais um passo, depois do final do passo 3 adicione o seguinte código:

:: 4. Builds the application
pushd "%DEPLOYMENT_TARGET%"
call :ExecuteCmd !NPM_CMD! run build:prod
IF !ERRORLEVEL! NEQ 0 goto error
popd

O código eh responsável por ir ate a pasta aonde a aplicação esta, no nosso caso o wwwroot e rodar o comando npm run build:prod, esse comando esta configurado no arquivo package.json e eh responsavel por criar o build da nossa aplicacao.
Ao final atualize o github com o comando git push origin master

Publicando para o Azure com o GitHub

Com nosso código pronto e nosso build configurado, agora podemos criar nossa aplicação no painel do Azure e fazer o setup do deployment pelo GitHub.

• Navegue ate o portal do Azure: https://portal.azure.com
• Crie uma nova webapp

• Selecione sua webapp, depois deployment options, temos varias opções para integração, hoje iremos utilizar o GitHub. Apos selecionado o GitHub configure o repositório conforme a segunda imagem

• Ao termino da configuração o Azure ira fazer o primeiro build da sua aplicação, durante o build, você pode clicar no mesmo e conferir os passos e os detalhes do log.

Quase tudo pronto, precisamos soh de uma ultima configuração, a task build:prod gera os arquivos na pasta dist, então precisamos mapear o root da aplicação como sendo a pasta dist e não a pasta wwwroot.

• Selecione Application Settings e desça ate o fim da pagina para a sessão Virtual Applications and directories e configure conforme a imagem

Com tudo configurado, navegue ate o seu site e teste a aplicação:
http://angular2-auto-publish.azurewebsites.net/#/

A partir de agora todo check-in na branch ira gerar um novo deploy e atualizara sua aplicação.

Conclusão

Vimos como eh fácil configurar um processo de deploy personalizado com o Azure websites, podemos personalizar deployments de node.js, react e outras tecnologias.

Para mais informações acesse: https://github.com/projectkudu/kudu/wiki/Custom-Deployment-Script

Por hoje eh só pessoal, qualquer duvida e só deixar um comentário ou abrir uma issue la no repositório: https://github.com/rsantosdev/angular2-webpack-starter