DEV Community

José Ulisses
José Ulisses

Posted on

1

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?

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay