Extensão de front-end

A implantação do front-end customizado é realizada servindo os arquivos gerados na pasta

como uma pagina web.
O servidor web que disponibiliza o front-end customizado deve estar configurado para responder requisições via HTTPS.
Tendo estas premissas utilizaremos 2 serviços da amazon em conjunto para a disponibilização do front-end customizado, sendo eles:

• S3: manterá os arquivos e os disponibilizará como uma pagina web
• CloudFront: Adicionará a camada HTTPS aos arquivos do S3

Configuração do S3

Crie um bucket no S3

Copie todo o conteúdo da pasta dist para o bucket

Marque a opção “Bucket hosting” o bucket

Selecione a opção “Use this bucket to host a website” e informe “index.html” como index document

Configuração do CloudFront

Crie uma nova distribuição:

Selecione a distribuição do tipo Web

Nas propriedades informe o bucket do S3 criado para o campo “Origin Domain Name” e um id para sua distribuição no campo “Origin ID”

Informe “index.html” para a propriedade “Default Root Object”

Clique em create distribution no canto inferior da pagina.

O CloudFront iniciará o processo de disponibilização do conteúdo. quando concluído copie a url do campo “Domain Name” Ex.: d3tfg7xzbvvd1u.cloudfront.net

Implantando o front-end na plataforma

Para a implantação do front-end, recomenda-se esconder o menu da tela original e adicionar um alternativo, visando manter o caminho para a tela original intacto em caso de necessidade.

A adição de itens de menu se dá através da criação de um módulo, descrito no tutorial de Criação de menus

O Config.json utilizado pode ser o do próprio projeto de front-end, localizado em: <diretorio_do_projeto > src > static > config.json.

IMPORTANTE: como no projeto de exemplo as propriedades withCredentials e category devem ser setadas ex:

A propriedade withCredentials define que as credenciais serão compartilhadas com a pagina que está sendo aberta através do item de menu

A propriedade category define como a pagina será aberta. Para este tutorial funcionará apenas como IFRAME (na mesma janela).

A propriedade menuId receberá a url copiada do campo Domain Name (Lembre-se de adicionar o endereço iniciando com “https“)

Após adicionado o menu, basta acessá-lo para abrir seu front-end customizado na plataforma.