The latest articles on DEV Community by Bárbara Perim (@barbaraperim). https://dev.to/barbaraperim https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F381453%2F6fc139af-5ffd-4b6e-9e06-22a5152e8012.jpeg https://dev.to/barbaraperim en Bárbara Perim Thu, 15 Oct 2020 23:46:14 +0000 https://dev.to/barbaraperim/como-fazer-deploy-da-sua-aplicacao-angular-com-github-pages-sem-bibliotecas-externas-930 https://dev.to/barbaraperim/como-fazer-deploy-da-sua-aplicacao-angular-com-github-pages-sem-bibliotecas-externas-930 <p><strong>O que é o GitHub Pages e para que serve?</strong><br> É uma ferramenta que permite fazer deploy dos seus repositórios no GitHub em websites de forma gratuita.</p> <p><strong>Primeiro passo: habilitar GitHub Pages nas configurações do seu repositório</strong><br> Acesse os setting de seu projeto:<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HXr1q5dZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/t201wjk828z2tlhcltkj.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HXr1q5dZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/t201wjk828z2tlhcltkj.png" alt="Alt Text"></a><br> Vá até a sessão Github Pages e configure uma branch e um folder onde ficarão seus arquivos após a build. Pode ser a main ou uma nova branch para isso. Aqui vou dar um exemplo criando a pasta /docs na raiz do projeto.</p> <p><strong>Segundo passo: Altere seu arquivo angular.json</strong><br> Altere a seguinte linha do seu arquivo angular.json para a nova pasta em que vamos direcionar os arquivos da build.</p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>"outputPath": "docs/" </code></pre> </div> <p><strong>Terceiro passo: Execute a build</strong><br> Execute o seguinte comando prestando atenção ao baseHref, substitua username pelo seu usuário no GitHub e seu-repo pelo nome do seu repositório.</p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>ng build --prod --baseHref=” https://username.github.io/seu-repo/” </code></pre> </div> <p><strong>Quarto passo: Página 404.html</strong><br> Quando a build estiver completa faça uma cópia da página index.html e renomeie ela para 404.html. É uma página para caso de erro, mas como o GitHub Pages por enquanto não tem uma solução para lidar com rotas, essa alteração faz com que elas funcionem! Mas ainda assim é um hack e a página ainda é servida com status code de 404.<br> E agora é só commitar!</p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>git add . git commit -m "generated deployables" git push -u origin master </code></pre> </div> <p><strong>Erro com as imagens?</strong><br> Provavelmente você está usando o caminho relativo, prefira utilizar da seguinte forma:</p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>'./assets/images/image.png' </code></pre> </div> github angular githubpages Bárbara Perim Sat, 03 Oct 2020 16:09:19 +0000 https://dev.to/barbaraperim/testes-no-angular-com-jest-componentes-e-servicos-4n06 https://dev.to/barbaraperim/testes-no-angular-com-jest-componentes-e-servicos-4n06 <p>Fiz uma apresentação esses dias sobre Testes no Angular com Jest e resolvi compartilhar fazendo um vídeo sobre!<br> Segue link: <a href="https://www.youtube.com/watch?v=3kwLQYDFtDE&amp;feature=youtu.be">https://www.youtube.com/watch?v=3kwLQYDFtDE&amp;feature=youtu.be</a></p> angular testing jest test