Extensão de front-end

Alterando o front-end original

289 views 22/01/2018 24/01/2018 gian-pasqualini 1

Obtendo o código fonte

Para customizar um front-end o primeiro passo é obter os fontes originais.

Eles são disponibilizados através de repositórios privados do Github, para obter acesso a eles é necessário que você ou sua organização tenham uma conta privada no Github e entrem em contato com a Senior solicitando acesso ao repositório.

Para o tutorial disponibilizamos um front-end do aplicativo de referência no repositório https://github.com/dev-senior-com-br/tutorial-extensao-frontend

Ele é público, e pode ser acessado à vontade.

Recomendamos que realize um

Fork

do repositório, assim você poderá manter um registro de suas alterações e beneficiar-se do versionamento no git.

Uma vez realizado o fork clone o repositório para sua estação de trabalho

 git clone <caminho_do_repositório>

Realizando as customizações

Abra o diretório 

tutorial-extensao-frontend

em sua IDE de preferência. Utilizaremos o Visual Studio Code neste tutorial.

Neste momento faça as alterações que deseja no código fonte

Por momento alteraremos algo bem simples, o texto que aparece na pagina inicial do aplicativo de referência

Para isso abra o fonte src > features > main > main.html

Alterando o texto “Aplicativo de Referencia, Front-end customizado” para algum valor de sua escolha

Gerando o pacote para Implantação

O front-end que estamos customizando foi criado com Angular, e utiliza npm como gerenciador de pacotes.

Posicionado no diretório root do projeto insira os comandos no prompt:

npm install

, e em seguida

npm run build

.

Os arquivos do front-end serão gerados para implantação na pasta

dist

do projeto.

Este artigo foi útil para você?