Introdução ao gRPC com Node.js

Introdução

Muitos desenvolvedores estão comentando e utilizando gRPC no seu dia dia, mas o que ele realmente ele é? e quais as vantagens de se utilizar ele?

Em um breve resumo nós temos:

gRPC foi desenvolvido pelo Google com foco em ser um serviço de alto desempenho para atender chamadas RPC (Remote Call Procedures) ou no português “Chamada de protocolo Remoto”. Ele é open source e pode ser executado em qualquer ambiente, independentemente de linguagem de programação ou plataforma. O gRPC tem suporte a load balancetracinghealth-check autenticação.

Mas o que é exatamente o RPC (Remote Call Procedures)?

RPC (Remote Procedure Call) é uma tecnologia para desenvolvimento de programas distribuídos client/server de comunicação de alto nível no sistema operacional. (deinfo.uepg.br)

gRPC trabalha com Protobuf (Protocol buffers), método criado e utilizado pelo Google para serializar dados estruturados, tornando a comunicação entre serviços mais eficiente. Ele é uma forma simples e agnóstica com relação a linguagem de se definir uma estrutura de dados como XML, só que mais rápido e mais simples.

Agora falando sobre os benefícios de se utilizar o gRPC:

  • A estrutura RPC é mais leve e de alto desempenho
  • Ele esta disponível para várias linguagens de programação
  • Tem suporte a chamada bidirecional de streaming entre client/server
  • Com a serialização do Protobuf, nós temos uma redução no trafego de dados na rede

Agora para ficar mais claro, vamos criar um exemplo prático de gRPC utilizando o Node.js

Exemplo prático

Para que você possa ter uma visão geral sobre esse assunto eu irei criar dois exemplos, um demonstrando o gRPC rodando no lado do servidor e um outro no lado do cliente.

O primeiro passo será a criação de um novo projeto. Para isso, abra um terminal no seu computador, escolha um diretório e execute o comando abaixo:

npm init -y

Esse comando deve criar um arquivo chamado package.json com as informações iniciais do seu projeto.

Com essa etapa OK e ainda no seu terminal, execute o comando abaixo para importar a biblioteca grpc para o seu projeto:

npm install --save grpc

Conforme comentado na introdução desse artigo, para trabalhar com gRPC nós precisamos criar os nossos arquivos Protobuf . Crie um novo arquivo chamado notes.proto na raiz do seu projeto e atualize ele com o seguinte trecho de código:

syntax = "proto3";

service NoteService {
    rpc List (Empty) returns (NoteList) {}
}

message Empty {}

message Note {
   string id = 1;
   string title = 2;
   string content = 3;
}
message NoteList {
   repeated Note notes = 1;
}

Analisando o trecho de código acima nós temos:

  • syntax: versão do protocol buffer language que nós estamos utilizando
  • note: model com 3 propriedades (id,title e content). Obs.: Os valores 1,2 e 3 são os indixes de cada propriedade
  • NoteService: método aceitando Empty em caso de mensagem vazia e retornando NoteList
  • NoteList: mensagem que sera retornada. No nosso exemplo deve retornar um array de note

Com o arquivo .proto criado, vamos criar o arquivo de configuração do nosso server. Para isso, crie um novo arquivo na raiz do seu projeto chamado index.js e atualize ele com o trecho de código abaixo:

const grpc = require('grpc')
const notesProto = grpc.load('notes.proto')

const notes = [
    { id: '1', title: 'Note 1', content: 'Content 1' },
    { id: '2', title: 'Note 2', content: 'Content 2' }
]
const server = new grpc.Server();

server.addService(notesProto.NoteService.service, {
    list: (_, callback) => {
        callback(null, notes)
    },
})
server.bind('127.0.0.1:50051', grpc.ServerCredentials.createInsecure())
console.log('Server running at http://127.0.0.1:50051')
server.start()

Analisando o trecho de código acima nos temos:

  • 1: chamada do pacote ‘grpc
  • 2: estamos carregando o arquivo .proto
  • 4 a 7: Objeto que iremos enviar para o nosso server. Note que ele tem as mesmas propriedades do nosso arquivo .proto (id, title e content).
  • 8: criação do server gRPC
  • 10 a 13: estamos passando o arquivo .proto para o server
  • 15 a 17: subindo o server na porta 50051

Com o arquivo .proto definido e o server OK, vamos criar o nosso client. Para isso, crie um novo diretório no seu projeto chamado client e dentro dele dois novos arquivos: client-grpc.js e get_notes.js, em seguida atualize eles com os seguintes trechos de código:

client-grpc.js

const grpc = require('grpc')
const PROTO_PATH = '../notes.proto'
const NoteService = grpc.load(PROTO_PATH).NoteService

const client = new NoteService('localhost:50051',
    grpc.credentials.createInsecure())
    
module.exports = client

Analisando o trecho de código acima nos temos:

  • 2: estamos passando o arquivo do arquivo .proto
  • 5: criando uma chamado com o server

get_notes.js

const client = require('./client-grpc')

client.list({}, (error, notes) => {
    if (!error) {
        console.log(notes)
    } else {
        console.error(error)
    }
})

Analisando o trecho de código acima nos temos:

  • 1: importando o modulo criado no passo anterior
  • 3 a 9: chamando o metodo List RPC e retornando os dados na console

Obs.: o método list e o mesmo que foi definido no arquivo .proto e na criação do service no arquivo index.js

Agora para testar os passos anteriores, abra dois terminais no seu computador e execute os comandos abaixo:

para executar o server:

node index.js

para executar o client:

cd client 
node .\get_notes.js

Abaixo você tem um print do projeto executando no meu computador, com o retorno esperado:Image for post

Bom, com isso nos finalizamos mais um artigo 😉 caso tenha interesse em clonar a versão final do projeto demonstrado aqui, segue link dele no meu GitHub: node-grpc.

Espero que tenham gostado e até um próximo artigo pessoal.

Referências: https://medium.com/xp-inc/introdu%C3%A7%C3%A3o-ao-grpc-com-node-js-98f6a4ede11

TypeScript: Upload de arquivos para o Azure Storage

Veja nesse artigo como fazer upload dos seus arquivos para o Azure Blob Storage

npm i multer-azure-blob-storage --save
import * as multer from 'multer';
import { MulterAzureStorage } from 'multer-azure-blob-storage';


const azureStorage: MulterAzureStorage = new MulterAzureStorage({
    connectionString: 'connectionString',
    accessKey: 'accessKey',
    accountName: 'accountName',
    containerName: 'containerName',
    containerAccessLevel: 'blob',
    urlExpirationTime: 60
});

const uploadAzure = multer({ storage: azureStorage });

export default uploadAzure;

Em seguida, caso esteja acompanhando esse passo a passo utilizando o projeto do meu artigo anterior, atualize o método post dentro do seu arquivo index.ts com o trecho de código abaixo:

app.post('/', uploadAzure.single('file'), (req, res) => {
    if (!req.file) {
        res.send('Erro ao fazer upload do arquivo!');
    } else {
        res.send('Arquivo enviado com sucesso!');
    }
})

Obs.: Não esquece de importar no inicio do arquivo o módulo abaixo:

import uploadAzure from './uploadAzure';

Image for post

2º no campo de pesquisa digite: blob e selecione a primeira opção demonstrada abaixo:

Image for post

3º Clique em create:

Image for post

Image for post

Image for post
Em seguida cole ele dentro da variável connectionString:
Image for post
2º copie o valor de Key (1 ou 2):
Image for post
E cole dentro da variável accessKey
Image for post
3º Copie o valor de Storage account name:
Image for post
E cole em accountName:
Image for post
npm run compile
//esse comando deve fazer o transpile
npm start
//esse comando deve rodar o projeto na porta 3000
Image for post
Acessando agora o nosso serviço Storage accounts, va em -> Storage Explorer -> Blob Containers -> clique no nome do container que você criou e veja a listagem dos arquivos que você fez upload:
Image for post

Referências:https://medium.com/typescript/typescript-upload-de-arquivos-para-o-azure-storage-838fccc83a2e

TypeScript: Union

Dando continuidade a minha serie de artigos sobre TypeScript, hoje eu irei apresentar o Union.

O Union é um dos tipos do TS que nos permite combinar um ou mais tipos de types. Sua sintaxe é um pouco diferente do que eu demonstrei nos últimos artigos, ele utiliza um barra vertical para passar os tipos que ele irá aceitar.

Sintaxe:

(tipo1| tipo2 ...)

Para ficar mais claro, vamos criar alguns exemplos práticos:

let exemploVariavel: (string | number);
exemploVariavel = 123;
console.log(exemploVariavel); //123
exemploVariavel = "ABC";
console.log(exemploVariavel); //ABC

Note que a variável exemploVariavel aceitou os dois valores: 123 (number) e “ABC” string.

Mas ai vem aquela dúvida, ele só aceita dois types? Não, nós podemos passar mais de um type para ele.

let exemploVariavel: (string | number | boolean);
exemploVariavel = 123;
console.log(exemploVariavel); //123
exemploVariavel = "ABC";
console.log(exemploVariavel); //ABC
exemploVariavel = true;
console.log(exemploVariavel); //true

Nós podemos utilizar ele também como parâmetro de função.

function deleteTeste(usuario: string | string[]) {
    if (typeof usuario == "string") {
        console.log(usuario, "deletado");
        //função para deletar um registro
    } else {
        var i;
        for (i = 0; i < usuario.length; i++) {
            //função para deletar mais de um registro
            console.log(usuario[i], "deletado");
        }
    }
}

Nesse exemplo nós podemos passar um registro para o nosso método deleteTeste ou passar um array de registros para serem deletados.

E para finalizar esse artigo, nós podemos utilizar ele também com Arrays.

var arr: (number[] | string[]);
var i: number;
arr = [1, 2, 4]

for (i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

arr = ["A", "B", "C", "D"]

for (i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

Resultado:

Image for post
Resultado union TypeScript

Bom, a ideia desse artigo era apresentar mais um dos types do TS 😉 Espero que tenham gostado e até um próximo artigo pessoal.

Referência: https://medium.com/xp-inc/typescript-union-4c6899ccf408

Comparando os termos utilizados no NoSQL com SQL

SQL

SQL é a sigla utilizada para “Structured Query Language” que traduzindo para o português significa: “Linguagem de Consulta Estruturada”.

NoSQL

NoSQL (Not Only SQL) é o termo utilizado para banco de dados não relacionais. Ele foi desenvolvido para ter uma performance melhor e uma escalabilidade mais horizontal para suprir necessidades onde os bancos relacionais não são muito eficazes.

  • Colunas: Os dados são armazenados em linhas dentro de tabela no disco. Um exemplo de banco de dados neste formato é o Cassandra
  • Grafos: Os dados são armazenados em forma de grafos (vértices e arestas). Um exemplo de banco de dados neste formato é o Neo4j
  • Chave-valor: Em algumas pesquisas e testes realizados pela internet, esta família de banco NoSQL é a que mais aguenta carga de dados, pois o seu conceito é que um determinado valor seja acessado através de uma chave identificadora única. Um exemplo de banco de dados neste formato é o Redis.

Image for post

Image for post
Comparando SQL com NoSQL fonte: (codersera)

Os termos utilizados em cada um deles:

Image for post
Conhecendo os termos entre SQL e NoSQL
Image for post
Comparando as instruções de inserção e consulta no SQL com NoSQL

Referência: https://medium.com/xp-inc/comparando-os-termos-utilizados-no-nosql-com-sql-e862788e2374

Azure DevOps + Docker + Node.js

Veja nesse artigo como automatizar o processo de deploy do seu projeto utilizando Docker e o Azure DevOps.

Dando continuidade ao meu artigo anterior: publicando imagem Docker no Azure Web App for Containers em 7 passos, hoje eu irei demonstrar como automatizar o processo de deploy demonstrando no artigo anterior, utilizando o Azure DevOps.

Para os próximos passos será necessário ter uma conta no Azure. Caso você ainda não tenha uma, eu recomendo a leitura do seguinte artigo: Azure DevOps + Angular + GitHub Pages, nele eu demonstro a criação de uma nova conta e a criação de uma pipeline no Azure DevOps.

Com o passo da conta OK, a sua imagem no Docker hub (passo demonstrado no artigo anterior) e o seu projeto já publicado no Web App for Containers. Vamos agora criar a nossa pipeline no Azure DevOps. Para isso, siga os passos abaixo:

Clique em pipelines:

Criando pipeline no Azure DevOps

Em seguida clique em Create Pipeline:

Criando pipeline no Azure DevOps

Agora clique em Use the classic editor:

Selecione o local do seu repositório, para esse exemplo eu irei utilizar um projeto versionado no meu GitHubnode-azure-7-steps. Clique nos três pontos e selecione o seu projeto:

GitHub Azure DevOps

Em seguida selecione a sua branch:

Selecionando branch Azure DevOps

Agora selecione o template Docker container.

Docker no Azure DevOps

Esse template deve criar dois stepsBuild an Image para criar uma nova versão da imagem do seu projeto e Push an image, para publicar a imagem no no seu repositório de imagens, nesse artigo eu irei enviar para o Docker Hub.

Build imagem docker no Azure DevOps

Agora vamos dar permissão para pipeline subir uma nova versão da sua imagem no Docker Hub. Para isso, siga os passos abaixo:

Clique em Push an image, em Container Registry Type selecione Container Registry, em seguida selecione a sua conexão.

Caso não tenha uma conta registrada ainda, clique em + New e preenche a modal com os seus dados de acesso no Docker Hub.

Em seguida clique em Include Latest Tag:

E no nome da imagem coloque o seu usuário do dockerhub e o nome da sua imagem no passo de build e release:

Build

Release

Para verificar se tudo esta OK, clique em Save & queue e rode o processo:

build imagem doker no Azure DevOps

Quando esse processo finalizar você deve receber o resultado abaixo:

Build OK Azure DevOps

Com o processo do build OK, vamos criar a nossa release. Para isso, clique em Releases -> New pipeline e selecione o template Azure App Service deployment.

Clique em Artifacts e preencha conforme os passos abaixo:

  • Project: nome do projeto
  • Source (build pipeline): sua pipeline de build
  • Default version: versão que deve pegar
  • Source alias: nome do artefato

Criando relase node.js + docker no Azure DevOps

Agora clique em 1 job e forneça os dados do seu projeto no Azure Web App for Containers conforme lista abaixo:

  • Display name: nome da aplicação
  • Azure subscription: Subscription no Azure
  • App name: nome da sua aplicação no Azure
  • Image name: nome da imagem com o sufixo latest

Obs.: Esse sufixo garante que iremos sempre pegar a ultima versão da imagem criada.

Agora para verificar se todos passos anteriores estão OK, clique em Create release para gerar uma nova release do seu projeto:

Criando release Azure DevOps

Ao clicar em Create Release irá subir a seguinte mensagem:

Clique na sua Release para acompanhar o processo de deploy. Caso tudo esteja OK você deve receber o retorno abaixo:

Agora clique em Succeed:

Em seguida clique em Azure Wer App on Container Deploy:

E dentro do log copie a URL do seu projeto:

Agora para finalizar, cole a url no seu navegador e verifique se a ultima alteração do seu projeto esta nessa versão publicada:

Bom, a ideia desse artigo era demonstrar como automatizar o processo de deploy criado em um dos meus artigos anteriores.

Espero que tenham gostado e até um próxima artigo pessoal 😉

Confira o artigo original em: https://medium.com/xp-inc/azure-devops-docker-node-js-90cff720af22

Gostou deste artigo? Comente abaixo!

[Post rápido]Novidades do TypeScript

É isso mesmo pessoal, a alguns dias saiu uma nova versão do TypeScript, e como em algumas das versões anteriores, eu não podia deixar de escrever algo rápido sobre 🙂

Eu irei dividir esse post em algumas partes para tentar explicar cada uma das novidades dessa nova versão, nesse primeira eu irei abordar: Optional Chaining e Nullish Coalescing.

O primeiro passo será verificar a sua versão. Para isso, abra um terminal no seu computador e execute o comando tsc–version. Abaixo você tem uma imagem demonstrando a minha versão.

Agora, caso você esteja com uma versão menor que a 3.7, execute o comando abaixo para atualizar a sua versão:

npm i -g typescript@latest

Com o ambiente atualizado, vamos as novidades 🙂

Optional Chaining

Essa funcionalidade nos permite validar se uma expressão tem um valor null ou undefined, sem a necessidade de utilização de um if. Para ficar mais claro, vamos a dois exemplos práticos:

Imagine que você tem o retorno de uma API e precisa validar ele antes de passar esse valor para uma variável.

A forma mais simples seria utilizando um operador ternário como no exemplo abaixo:

let t = (video === null || video === undefined) ? 
undefined :video.media.thumb();

Agora com essa nova funcionalidade nós podemos passar o operador ? para validar esse valor antes de passar ele para variável t:

let t = video?.media.thumb();

Bem mais elegante né?

Nullish Coalescing

Essa funcionalidade utiliza o operador ?? para validar uma expressão, caso o valor da esquerda seja null, ele retorna o valor default, caso não, ele retorna o valor que está sendo validado.

Em cenários como esse também é muito comum a utilização de um ternário:

let numbers = null;
let code = (numbers !== null && numbers !== undefined) ? 
numbers : 10;
console.log(code);

Agora nessa nova versão nós podemos utilizar o operador ?? para validar a nossa expressão e em caso de um valor null ou undefined, ele ira pegar o valor default. Esse operador pode substituir a utilização dos ||.

let numbers = null;
let code= numbers ?? 10;
console.log(code);

Bom, a ideia desse post era ser algo rápido demonstrando duas das novidades dessa nova versão do TS.

Espero que tenham gostado e até o próximo post pessoal 😉

Confira a publicação original em: https://medium.com/xp-inc/post-r%C3%A1pido-novidades-do-typescript-98970a46d591

Gostou dessa publicação? Comente abaixo!

TypeScript: Adicionando description em um Enum

Dando continuidade ao meu artigo anterior: TypeScript: Enums, hoje eu irei demonstrar como criar uma descrição para cada um dos elementos de um enum, e como recuperar essa descrição a partir de suas chaves. Para isso, eu irei utilizar o enum criado no artigo anterior de dias da Semana.

Caso você não tenha lido o artigo anterior, segue o enum mencionando abaixo:

export enum DiaDaSemana {
    Segunda = 1,
    Terca = 2,
    Quarta = 3,
    Quinta = 4,
    Sexta = 5,
    Sabado = 6,
    Domingo = 7,
}

Conforme demonstrei no artigo anterior, nós podemos pegar os valores de um enum pela sua chave ou pelo seu valor.

Agora pensando em um cenário mais próximo do nosso dia dia e focando no enum acima, não seria mais interessante retornar : “Segunda-feira” ou “Terça-feira” … etc ?

Em outras linguagens como C# nós podemos utilizar as descriptions dos enums, mas e no TS como fazer isso?

Existem algumas formas, uma delas é com a utilização de um map. A seguir você tem um exemplo de criação de um map para retornar os dias da semana conforme mencionado acima.

export enum DiaDaSemana {
    Segunda = 1,
    Terca = 2,
    Quarta = 3,
    Quinta = 4,
    Sexta = 5,
    Sabado = 6,
    Domingo = 7,
}

export const DiaDaSemanaLabel = new Map<string, string>([
    ['Segunda', 'Segunda-feira'],
    ['Terca', 'Terça-feira'],
    ['Quarta', 'Quarta-feira'],
    ['Quinta', 'Quinta-feira'],
    ['Sexta', 'Sexta'],
    ['Sabado', 'Sábado'],
    ['Domingo', 'Domingo']
]);

Caso você tenha interesse em saber mais sobre o map, eu recomendo a leitura do seguinte artigo: [Dica rápida]TypeScript: map().

Agora para que possamos retornar a descrição do dia da semana, basta executar o trecho de código abaixo:

console.log(DiaDaSemanaLabel.get(DiaDaSemana[1]))

Resultado:

Bem simples né?

Dessa forma nós conseguimos mapear para que os nossos enums retorne um valor mais amigável para o nosso front.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/typescript-adicionando-description-em-um-enum

Gostou deste artigo? Comente abaixo as suas dúvidas!

Angular decode payload JWT

Veja nesse artigo como decodificar o seu token JWT e ler o seu payload.

Dando continuidade aos meus artigos sobre Angular e JWT, hoje eu irei demonstrar como decodificar os dados de um token no lado do seu front.

Caso tenha interesse em ler os meus artigos anteriores sobre esse assunto, segue o link de cada um deles abaixo:

O objetivo desse artigo não sera demonstrar como configurar o JWT em um projeto angular, ele será rápido e objetivo demonstrado através de alguns trechos de código.

O primeiro passo será importar o pacote jwt-decode. Para isso, abra um terminal no seu computador, navegue até o seu projeto e execute o comando abaixo:

npm i jwt-decode --save

Agora execute o comando abaixo para criar serviço no seu projeto para ser responsável por decodificar o token:

ng g s shared/authToken

Em seguida atualize ele com o seguinte trecho de código:

import { Injectable } from '@angular/core';
import * as jwt_decode from 'jwt-decode';


@Injectable({
  providedIn: 'root'
})
export class AuthTokenService {
  public getToken(): string {
    return localStorage.getItem('token');
  }

  public decodePayloadJWT(): any {
    try {
      return jwt_decode(this.getToken());
    } catch (Error) {
      return null;
    }
  }
}

Analisando o trecho de código anterior, note que nós temos um método chamado getToken(), responsável por pegar o token do seu localStorage e um outro método chamado decodePayloadJWT() retornando any, esse método irá decodificar o token e retornar os seus dados de payload.

Obs.: Esse método está retornando any porque o payload pode variar de projeto para projeto, caso você já tenha um contrato definido de retorno o ideal será criar um class ou interface com os dados de retorno no lugar de any.

Bem simples né?

Agora você pode injetar o seu código nos seus componentes e receber os dados do seu token 😉

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/angular-decode-payload-jwt

Gostou deste artigo? Comente abaixo!

Novidades Angular 8.3

A alguns dias saiu a release 8.3.12 do Angular. Segundo alguns tweets, o time focou em algumas novidades como: um novo comando no CLI, correção de bugs e ajustes no novo render que deve entrar como default na versão 9, o Ivy.

Caso tenha interesse em saber mais sobre esse compilador, eu recomendo a leitura do seguinte artigo: Angular: Conhecendo Ivy.

Bom, mas quais foram os novidades dessa versão?

Novo layout

Caso você já tenha atualizado o seu CLI e criado um novo projeto , deve ter notado o novo layout dessa versão.

Além do novo layout, note que nessa etapa nos temos algumas sugestões de próximos passos.

Deploy

Nessa versão foi adicionado um novo comando no CLI, o ng deploy. Agora com apenas alguns comandos no terminal, e possível publicar o nosso app no Azure, Firebase, Zeit, Netlify, ou GitHub.

Em um próximo artigo eu irei criar um passo a passo de como publicar o nosso utilizando esse novo comando do CLI.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/novidades-angular-8-3

Gostou deste artigo? Deixe seu comentário abaixo!

Angular 8.3: publicando projeto com o Angular CLI em 5 passos

Veja nesse artigo como publicar o seu projeto no GitHub pages em 5 passos

Dando continuidade ao meu artigo anterior: novidades do Angular 8.3, hoje eu irei demonstrar como publicar um projeto no GitHub pages, utilizando o novo comando que foi adicionado na versão 8.3 do CLI, o ng deploy.

Para os próximos passos será necessário estar com a versão 8.3.12 do Angular CLI no seu computador. Caso essa não seja a sua versão, abra um terminal e execute o comando abaixo:

npm install -g @angular/cli

Com a versão do CLI atualizada, vamos aos 5 passos de criação e deploy do projeto.

1- Passo: Criação de um novo projeto

Abra um terminal no seu computador e execute o seguinte comando para criação de um novo projeto:

ng new (nome do seu projeto)

2- Adicionando pacote ghpages

Com o projeto criado, volte no seu terminal, navegue até ele e execute o comando abaixo:

ng add angular-cli-ghpages

3- Criação de um novo repositório no GitHub

Com o projeto criado e o pacote importado, vamos criar um novo repositório no GitHub. Para isso, siga os passos abaixo:

Acesse o link: https://github.com/, vá até o canto superior e clique no icone do lado do simbolo de notificações:

Em seguida clique em new repository:

Agora volte no seu terminal e execute os comandos abaixo para versionar ele no GitHub:

git add *
git commit -m "first commit"
git remote add origin https://github.com/{seu usuario}/{seu repositorio}.git
git push -u origin master

4- Alterando a base url do projeto

Como o projeto será publicado em um subdiretório, será necessário alterar a base url dele. Para isso, vá até o arquivo index.html do seu projeto e altere ele conforme abaixo:

<base href="/nome do seu repositório no git/">

5-Deploy do projeto

Com todos os passos anteriores OK, execute o comando abaixo no seu terminal para publicar o projeto:

ng deploy

Esse comando irá publicar o seu projeto no GitHub Pages no seguinte link: https://github.com/<username>/<repositoryname>.git

  • username: o seu usuário do GitHub
  • nome do seu repositório

Para verificar se o seu projeto foi publicado com sucesso, acesse a url mencionada acima no seu navegador. No meu exemplo ficou a seguinte url: https://programadriano.github.io/angulardeploy/

Bom, a ideia desse artigo era de ser algo rápido demonstrando uma das novidades do Angular 8.3.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/angular-8-3-publicando-projeto-com-o-angular-cli-em-5-passos

Gostou deste artigo? Comente abaixo!