Deploying Angular

to Azure

William Grasel

@willgmbr

Angular? Azure? Que?

One Framework.

Mobile & desktop.

Github Octoverse 2016

Stack Overflow Survey 2017

AngularJS !== Angular

É apenas Angular!

Bem vindo ao Semantic Versioning!

Azure. Cloud for all.

Como eu começo?

Você pode usar algum Seed

Ou você pode começar do jeito certo!

Production Build

Minify / Uglify

~70% redução de arquivos

Tree Shaking

ES6 modules são mais poderosos do q você imagina!


  // utils.js

  export function makeMeASandwich() {
    return 'make sandwich: operation not permitted';
  }

  export function sudoMakeMeASandwich() {
    return 'one open faced club sandwich coming right up';
  }

  // index.js

  import { sudoMakeMeASandwich } from './utils.js';
  sudoMakeMeASandwich();

ES2015 Modules

Modo de Produção

desativa debugging e logs desnecessários

Ahead-of-Time Compilation

prepara seus templates, tira módulos do framework desnecessários e melhora seu código

Veja a diferença:

Um bundle inicial ideal deveria ter até uns 300kb

Veja como é difícil fazer tudo isso:

ng build --prod

Melhorando o Carregamento

Não se esqueça do GZip!

~70% redução de arquivos

Lazy Loading!

divida sua app por rotas ou features


  // src/app/app-routing.module.ts

  import { RouterModule } from '@angular/router';
  import { HomeComponent } from './home/home.component';

  export const routing = RouterModule.forRoot([
    { path: '', component: HomeComponent },
    { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' },
    { path: '**', redirectTo: '' }
  ]);

Lazy Loading Example

Server Side Rendering

com Angular Universal


  > ng generate universal <name>
  > ng build --app=<name>

  // index.server.ts

  // Express server
  const app = express();

  app.engine('html', ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
  }));

  // Server static files from /browser
  app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

  // All regular routes use the Universal engine
  app.get('*', (req, res) => {
    res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
  });

Caching Like a Boss!

Gerencie cache estático e dinâmico com Service Workers

Gerencie sua estratégia para cache dinâmico!

Mais uma vez a CLI faz o trabalho sujo para você:


  > ng new --service-worker

  > ng generate app-shell

Deploying!

Tudo que precisamos é um servidor de arquivos estáticos, né?

Quase isso...

As rotas precisam ser gerenciadas pelo Front!

Precisamos configurar nosso servidor para que isso aconteça!

No Azure é só configurar o web.config do seu Web Server!

Exemplo de config para SPA

Referências

Perguntas?

Obrigado! =)

@willgmbr

Deploying Angular to Azure

By William Grasel

Deploying Angular to Azure

Dúvidas de como colocar sua app Angular em produção? Vamos ver o passo a passo completo, desde sua criação com o AngularCLI até o deploy dela utilizando Azure, com todas as melhores práticas de mercado!

  • 2,132

More from William Grasel