DEPLOY de projeto em REACT JS com VITE no GITHUB PAGES em 10 MINUTOS
Se você quer fazer o deploy de um projeto em React JS com Vite no GitHub Pages em apenas 10 minutos, este tutorial é para você!
Passo 1: Crie um projeto em React JS com Vite
Primeiro, crie um novo projeto em React JS utilizando o Vite como bundler. Você pode fazer isso com o seguinte comando:
npm init @vitejs/app my-react-app --template react
Passo 2: Configure o GitHub Pages
Após ter o seu projeto pronto, crie um repositório no GitHub e configure as páginas do GitHub para publicar a branch gh-pages. Você pode fazer isso nas configurações do seu repositório.
Passo 3: Instale as dependências necessárias
Instale as dependências necessárias para fazer o deploy do seu projeto no GitHub Pages. Você vai precisar do pacote gh-pages para ajudar no processo de deploy.
npm install gh-pages --save-dev
Passo 4: Adicione os scripts necessários no package.json
Adicione os seguintes scripts no seu arquivo package.json para ajudar no processo de deploy:
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
}
Passo 5: Faça o deploy do seu projeto
Agora, basta executar o seguinte comando para fazer o deploy do seu projeto no GitHub Pages:
npm run deploy
Conclusão
Com estes simples passos, você conseguiu fazer o deploy do seu projeto em React JS com Vite no GitHub Pages em apenas 10 minutos. Agora, o seu projeto está disponÃvel publicamente para que todos possam acessar!
Conteúdo muito TOP.
Muito obrigado, excelente vÃdeo.
Top demais.
Matheus, primeiramente gostaira de te agradecer por tanto. Você ensina de forma simples e muito clara. Gratidão por cada ensinamento.
Já agora gostaria de tirar uma dúvida por favor. Depois que criamos a page como você ensinou e é criado a pasta dist. Se eu fizer melhorias no meu site, eu preciso fazer tudo novamente? Com devo proceder?
Obrigado
🚀🚀🚀
Nossa, valeu mesmo professor, era tudo que eu precisava e nao achava em lugar nenhum.
Após fazer isso, em outros projetos estou com problema agora pra dar o comanado run dev da um erro 'ERR_DLOPEN_FAILED' 😡😡😡
Valeu demais! mto bom
Deu certo, tentei hospedar meu projeto na Vercel e deu erro, resolvi tentar colocar no github
Caraca irmão, muito obrigado!
Galera eu estava com problema tbm, a página ficava toda em branco. Pesquisando o que funcionou pra mim, foi no package.json, colocar "homepage": "." só isso, o ponto. E no react router dom eu fiz como o @TxhanxaGame colocou em um comentario
eu to com um problema que não sei o motivo, ele não coloca na dist minhas imagens, só svg, ('e ainda assim ele coloca o svg com nome alterado, e eu uso o svg no icon do site e dentro do site, mas só altera o nome do svg no icon do site')ai perco a referencia delas na pagina do github
Galera fiz todas as configurações, Failed to load resource: the server responded with a status of 404 (), ele fica dando esse erro, alguém tem alguma noção do que pode ser?
Muito obrigado, me salvou
como faço pra atualizar o deploy??? atualizar o projeto? não funciona refazer o deploy
Alguém pode me dar uma dica de branch, por favor? No meu projeto, eu tenho a branch main ("acredito" que como principal, não sei onde ou como olhar essa informação), porém, também tenho uma outra branch diferente da main, com todo conteúdo do meu projeto que preciso fazer deploy (o conteúdo não está na main). No vÃdeo acima, no minuto 5:40 ele dá o comando "git branch -M main" e define a main como principal… E no meu caso, que o conteúdo do meu projeto está em outra branch, alguém sabe como fazer ?
Fiz conforme o video e a pagina ficou toda branca, alguem com mesmo problema?
Só tenho que agradecer, fiquei umas 3 horas tentando resolver o problema, mas esse video me ajudou muito parabéns
As minhas imagens não estão aparecendo, o que pode ser?
Fui acessar meu site e imagens que eu estou pegando a partir de um json não estão aparecendo, outras imagens que estou pegando de forma "normal" aparecem sem problemas.
Eu estava tomando uma surra do git no começo do vÃdeo, aà no final pareceu que tava no começo mas deu tudo certo. Obrigado!
eu faço tudo q ta no video mas fica com a tela toda em branco, como resolvo? (to usando vite e react dom routers
)