Criando um app de terminal (CLI) para criar arquivos react #3

jos3s

José Ulisses

Posted on February 14, 2024

Criando um app de terminal (CLI) para criar arquivos react #3

Tabela de Conteúdo

Parte 1: O que vamos fazer?

Agora que já temos um aplicativo funcional podemos publicar esse app como um executável no windows e adicionarmos o seu caminho as variáveis de ambiente, de modo que possamos invocar esse aplicativo de qualquer lugar.

Parte 2: Publicar no Windows

Para isso vamos primeiro publicar o nosso aplicativo, a maneira mais simples é fazermos isso pelo console com o comando:

dotnet publish -o <CAMINHO>
Enter fullscreen mode Exit fullscreen mode

Image description

Se formos na pasta indicada como saída do comando devemos ver diversos arquivos que são necessários para o nosso projeto funcionar.

Pasta do programa publicado

Parte 3: Variáveis de Ambiente no Windows

Pronto, agora precisamos adicionar o caminho dessa pasta nas variáveis de ambiente do nosso sistema operacional para usarmos pelo terminal de maneira mais prática apenas passando o nome do programa.

No menu inicial do windows, pesquise por "Variáveis de Ambiente" e abra o programa.

Image description

Com o programa aberto as variáveis de usuário procure o Path e clique em editar.

Image description

Com a nova janela aberta, clique no botão de novo e digite o caminho que o seu programa foi publicado.

Image description

Agora já podemos chamar o nosso app em qualquer pasta do nosso pc!

Parte 4: Testando o programa

Para testar a execução vou criar um pequeno projeto React com o Vite.

Image description

Vamos acessar a pasta deste projeto react criado e vamos tentar executar o nosso programa, podemos fazer isso digitando o nome do programa:

reactcomponent
Enter fullscreen mode Exit fullscreen mode

Image description

Como resultado devemos ver uma demonstração de uso, opções disponíveis e comandos, tudo isso já vem da biblioteca que estamos usando e pode ser personalizado.

Vamos criar um componente? Digite:

reactcomponent create Menu
Enter fullscreen mode Exit fullscreen mode

Ao exibirmos o tudo dentro pasta Menu, podemos ver que o arquivo de index.jsx e o styles.css foi criado.

Image description

Final

Pronto, a partir desse ponto você já tem uma ideia e pode expandi-la, fazendo o programa criar arquivos de test para o componente ou algo da sua escolha. A biblioteca Spectre.Console oferece muito mais do que foi mostrado aqui, se quiserem posso mostrar como seria para fazer o programa perguntar quais arquivos o usuário desejaria criar e outras coisas como algumas animações. Agradeço a todos que leram e vamos conversar nos comentários?

💖 💪 🙅 🚩
jos3s
José Ulisses

Posted on February 14, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related