Criando seu primeiro projeto com @totvs/thf-cli em 3 passos

Olá mundo!

Quer saber um pouco da história do THF? Leia esse post aqui.

Está sem tempo e já manda dos paranues, show me the code 😜.

Pré-requisitos

Antes de iniciar tenha em mãos o Git e o Node.js instalado (sugiro o uso da versão 10.x) e o seu gerenciador de pacote favorito atualizado (eu gosto do velho e bom npm).

Caso você ainda não tenha instalado o pacote @angular/cli, instale-o via npm ou yarn:

NPM: npm i -g @angular/cli
YARN: yarn global add @angular/cli

Passo 1 - Instale a ferramenta de linha de comando

O time do THF disponibilizou uma ferramenta de linha de comando que já deixa o seu projeto configurado com as dependências compatíveis com a biblioteca, instale-o via npm ou yarn.

NPM: npm i -g @totvs/thf-cli
YARN: yarn global add @totvs/thf-cli

Passo 2 - Crie seu primeiro projeto

Agora basta iniciar um novo projeto com a ferramenta de linha de comando que você instalou. Navegue até seu diretório de trabalho e execute o seguinte comando:

thf new my-thf-project

Após alguns segundos (quem sabe até minutos 😢), será criada uma pasta chamada my-thf-project e vai configurar o seu projeto inicial com o THF. Além de criar seu projeto a ferramenta já vai fazer a instalação das dependências do seu projeto, deixando tudo pronto para você testar seu projeto.

Passo 3 - Teste seu projeto

Acesse o diretório do projeto:

cd my-thf-project

Agora basta rodar mais um comando para ver seu projeto no ar.

ng serve

Abra seu browser e acesse a url http://localhost:4200. Pronto seu projeto deve estar parecido com essa imagem.

Aplicação com menu lateral e 2 módulos gerados pelo THF Cli.

E agora?

Agora é só abrir seu editor / IDE favorito e começar a trabalhar no seu projeto.

O @totvs/thf-cli por padrão irá configurar uma aplicação com menu lateral e 2 módulos de exemplo, isso já vai ajudar bastante se você está começando a se aventurar no THF e/ou em aplicações Angular.

TL;DR - Show me the code

1 - Instale a ferramenta de linha de comando

NPM: npm i -g @totvs/thf-cli
YARN: yarn global add @totvs/thf-cli

2 - Crie seu primeiro projeto

thf new my-thf-project

3 - Teste seu projeto

cd my-thf-project
ng serve

Referências

• Repositório do @totvs/thf-cli com documentação completa da ferramenta.
• Documentação oficial do THF.
• Post com mais detalhes sobre o THF Cli do Jhony Senem.