Como Usar o Aplicativo de Publicação de Vídeos: Guia Completo e Passo a Passo

Sempre crie uma frase de segurança única para jogos, testnets ou airdrops e evite usar sua carteira principal.

Tutorial: Publicando seu App no GitHub Pages

Este tutorial guiará você, passo a passo, para publicar seu aplicativo no GitHub Pages. Ao final, seu app estará disponível no link: https://canalqb_upload.github.io/.

Pré-requisitos:

Conta no GitHub: Já deve estar configurada.
Repositório Criado: O repositório deve se chamar canalqb_upload.github.io.
Acesso ao Terminal: Pode ser via GitHub Codespaces, terminal local ou outro ambiente de desenvolvimento.

Passo 1: Verifique e Envie os Arquivos para o GitHub

Primeiro, vamos garantir que todos os arquivos do projeto estão corretamente configurados no repositório.

1. Verifique os Arquivos do Projeto:

Certifique-se de que todos os arquivos necessários estão presentes no seu diretório de trabalho:

index.html
index.tsx
App.tsx
types.ts
metadata.json
package.json
vite.config.ts
tsconfig.json
tsconfig.node.json
components/FileSelector.tsx
components/Header.tsx
components/Icons.tsx
components/Toast.tsx
components/VideoProcessingCard.tsx
services/geminiService.ts

2. Adicione e Envie as Alterações para o GitHub:

No terminal, execute os seguintes comandos para enviar os arquivos para o repositório:

git add .  # Adiciona todas as alterações
git commit -m "Finalizando a configuração completa do projeto para deploy"  # Cria um commit com uma mensagem descritiva
git push origin main  # Envia as alterações para o repositório GitHub

Passo 2: Instale as Dependências do Projeto

Agora, precisamos garantir que todas as dependências do projeto sejam instaladas.

1. Instale as Dependências:

No terminal, execute o comando abaixo:

npm install

Esse comando irá ler o package.json e instalar todos os pacotes necessários na pasta node_modules.

Passo 3: Publique o Aplicativo no GitHub Pages

Com as dependências instaladas, vamos compilar o código e publicá-lo no GitHub Pages. Para isso, o script deploy no package.json será executado automaticamente.

1. Comando para Publicação:

Execute o seguinte comando:

npm run deploy

O que esse comando faz:

predeploy: Roda o npm run build, que compila o código e cria uma versão estática na pasta dist.
deploy: Utiliza a ferramenta gh-pages para enviar os arquivos estáticos da pasta dist para o branch gh-pages do repositório.

Nota: O branch gh-pages é onde o GitHub Pages irá buscar os arquivos para o site.

Passo 4: Verifique a Publicação no GitHub

O GitHub automaticamente configura o GitHub Pages, mas é bom verificar a configuração.

1. Acesse as Configurações do Repositório:

No seu repositório do GitHub, clique em Settings.
No menu à esquerda, selecione Pages.

2. Verifique a Fonte do Deploy:

Verifique se a fonte do deploy está configurada corretamente:

Source: Deploy from a branch
Branch: gh-pages (root)

Quando isso estiver configurado, o seu site estará sendo publicado a partir do branch gh-pages.

Passo 5: Acesse Seu Aplicativo

Após a configuração, o GitHub pode levar de 1 a 5 minutos para colocar seu site no ar.

Acesse o site através do link: https://canalqb_upload.github.io/.

Atualizando Seu Aplicativo no Futuro

Quando precisar fazer alterações ou atualizações no seu aplicativo, basta seguir o mesmo processo:

Faça as alterações no código.
Adicione e envie as mudanças para o Git:

git add .
git commit -m "Mensagem de atualização"
git push origin main

Republique o aplicativo:

npm run deploy

O site será atualizado automaticamente com as novas mudanças!

Dicas e Considerações Finais

Verificação de Build: Sempre verifique se o build local funciona corretamente antes de publicar. Execute o comando npm run build e teste a versão localmente, se necessário.
Erros Comuns: Caso o site não seja exibido corretamente, verifique o console do navegador para possíveis erros de JavaScript. Muitas vezes, problemas de caminho de arquivo ou dependências ausentes podem causar falhas.

Pronto! Agora seu app está publicado no GitHub Pages e pode ser acessado de qualquer lugar do mundo. 🥳