erovere / angular-starter-schematic

Schematic para gerar código bolierplate com a arquitetura de referência para aplicações Angular

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Wiz Angular Starter Schematic

Sobre

Schematic para gerar código boilerplate com a arquitetura de referência corporativa para aplicações Angular. Compatível com as versões suportadas do Angular (^8.0.0, ^9.0.0 e ^10.0.0) e otimizado para as versões ^10.0.0.

Uso

IMPORTANTE: Este schematic supõe que a aplicação usa SASS e deve ser executado em projetos novos, pois faz a sobrescrita de arquivos.

# Gerar uma nova aplicação Angular
ng new my-app --style=scss

# Entrar na pasta da nova aplicação
cd my-app

# Adicionar arquitetura
ng add @wizsolucoes/angular-starter

Opções

White-label

Ao executar o schematic, você deve escolher se a aplicação é 'White-label' ou não, respondendo este prompt na linha de comando:

? Essa aplicação é 'White-Label'? (Y/n)

Para entender mais sobre a arquitetura 'White-label', consulta a documentação neste repositório.

Sobre a aplicação gerada

Estrutura

A aplicação tem 2 partes principais:

  • A parte "eager" que será carregada na inicialização na aplicação (o main.js bundle).
  • A parte "lazy" composta por funcionalidades da aplicação e que será carregada sob demanda como resultado da navegação do usuário.

"arquitetura da aplicação"

Esta é a estrutura de pastas proposta:

|-- core
    |-- [+] authentication
    |-- [+] guards
    |-- [+] http
    |-- [+] interceptors
    |-- [+] mocks
    |-- [+] services
    |-- [+] layout

|-- features
    |-- feature1
        |-- feature1-routing.module.ts
        |-- feature1.component.html
        |-- feature1.component.scss
        |-- feature1.component.ts
        |-- feature1.component.spec.ts
        |-- feature1.service.ts
        |-- feature1.module.ts

    |-- feature2 
        |-- [+] components
        |-- feature2-routing.module.ts
        |-- feature2.service.ts
        |-- feature2.module.ts

|-- shared
    |-- [+] components
    |-- [+] models
    |-- [+] directives
    |-- [+] pipes

|-- app-routing.module.ts
|-- app.component.html
|-- app.component.scss
|-- app.component.ts
|-- app.component.spec.ts
|-- app.module.ts

Core

O core module deve conter serviços singleton, componentes universais e outros recursos em que há uma instância única. Autenticação, header, interceptors são exemplos de componentes que terá apenas uma instância ativa para a aplicação e será utilizado praticamente por todos os modules.

Features - Módulos Lazy Loaded

Módulos lazy loaded ajudam a diminuir o tempo de inicialização da aplicação. Com o lazy load, o aplicativo não precisa carregar tudo de uma só vez. Ele só vai carregar o que o usuário espera ver. O módulo só irá carregar quando o usuário navegar para sua rota.

Observe que se o módulo de feature tiver mais de um componente, criamos sub-pastas para a cada componente (Ex. feature2) para que nenhuma pasta tenha mais de 6 arquivos conforme a recomendação do style guide do Angular.

Para gerar um novo módulo lazy loaded use a o schematic ng generate module com a flag --route. Por exemplo, para gerar uma nova rota /privacy:

ng g m features/privacy --route privacy --module app.module.ts

Shared

O shared é onde todos os componentes compartilhados, pipes, filters e services devem ir. O shared pode ser importado em qualquer module. Assim esses itens serão reutilizados. O shared module deve ser independente do restante do aplicativo. Portanto, não deve ter referências de outro módulo.

Referências

A estrutura é inspirada nas seguintes fontes:

Recursos

O seguintes recursos já estão implementados na aplicação starter. Para alguns dos recursos é necessário fazer uma configuração antes de utilizá-los.

Integração NGX Wiz SSO

Integração com NGX Wiz SSO. Um módulo Angular feito para facilitar processo de autenticação e renovação de token no SSO da Wiz.

Configuração

Adicione as configurações de SSO do seu projeto ao arquivo src/config/sso_config.ts.

export const ssoConfig = {
  apiPath: '<<urldo servico>>',
  clientID: '<<Cliente ID>>',
  clientSecret: '<<Cliente Secret>>',
  grantType: '<<Grant Type>>',
  authedPaths: ['<<dns a ser autenticado>>'],
  scope: '<<scope do projeto>>',
  options: {
    // parâmetros opcionais
    ssoTimeOut: 60000, // parâmetro opcional, determina o timeout para o SSO
    tokenAutoRefresh: true, // parâmetro opcional, determina se o token deve ser renovado
    loginRoute: 'login', // url que aponta para onde redirecionar no caso de não haver token
  },
};

O módulo do NGX Wiz SSO está importado no CoreModule.

@NgModule({
  declarations: [MainLayoutComponent, NavComponent],
  imports: [
    BrowserModule,
    RouterModule,
    HttpClientModule,
    NgxWizSSOModule.forRoot(ssoConfig), // <--- import do NGX Wiz SSO
  ],
  exports: [MainLayoutComponent, NgxWizSSOModule],
})
export class CoreModule {}

O componente home tem um botão de "Login" que exemplifica como usar o plugin. Para entender melhor as configurações consulte a documentação do projeto NGX Wiz SSO.

Monitoramento com Application Insights

Monitoramento de erros e de performance da aplicação Angular usando o Azure Application Insights.

Configuração

Adicione sua chave de instrumentação ao arquivo de variáveis por ambiente:

export const environment = {
  production: true,
  appInsights: {
    instrumentationKey: 'YOUR-APPLICATION-INSIGHTS-INSTRUMENTATION-KEY',
  },
};

Commit lint

As mensagens de commit devem seguir a convenção de Conventional commits que é o padrão para todos os projetos da Wiz. Este projeto já tem commit lint configurado com husky para te ajudar. Consulte a convenção Angular se tiver dúvidas sobre o tipo correto para seu commit.

Configuração Prettier

O código gerado contem arquivos de configuração da ferramenta de formatação Prettier e cria dois scripts npm:

  "scripts": {
    "//": "...",
    "format:check": "prettier **/*.{html,ts,js,json,scss} --check",
    "format:write": "prettier **/*.{html,ts,js,json,scss} --write"
  },

CI/CD

O código gerado irá conter um arquivo azure-pipelines.yml com a configuração de integração contínua de de deploy da aplicação. O deploy por padrão é feito para um Azure Storage e é necessário preencher os valores para os variáveis AzureStorageHml e AzureStoragePrd.

variables:
    AzureStorageHml: ''
    AzureStoragePrd: ''

Desenvolvimento do schematic

Por onde começar

# Instalar as dependências
npm install

# Buildar schematic
npm run build

# Executar os testes
npm test

Testando o schematic localmente

1. Gere um distribuível do schematic

# Instalar as dependências
npm install

# Buildar schematic
npm run build

# Gerar tarball eg. wizsolucoes-angular-starter-1.0.1.tgz
npm pack

2. Gere uma nova aplicação e instale e execute o schematic

# Gerar uma nova aplicação Angular em outra pasta para testar o schematic
ng new my-app --style=scss

# Entrar na pasta da nova aplicação
cd my-app

# Instalar schematic
npm i --no-save ../path/to/angular-starter-schematic/wizsolucoes-angular-starter-1.0.1.tgz

# Executar schematic
ng g @wizsolucoes/angular-starter:ng-add

Aprenda mais sobre schematics

About

Schematic para gerar código bolierplate com a arquitetura de referência para aplicações Angular

License:MIT License


Languages

Language:TypeScript 88.4%Language:HTML 8.0%Language:JavaScript 2.1%Language:SCSS 1.5%