DEPLOY de projeto em REACT JS com VITE no GITHUB PAGES em 10 MINUTOS
Вставка
- Опубліковано 16 тра 2023
- Como fazer #DEPLOY de projeto em REACT JS? No vídeo de hoje, te ensinamos todo o passo a passo rápido e fácil, em menos de 10 minutos!
💡 Conheça nosso curso completo de React JS: app.horadecodar.com.br/course...
Se você é um desenvolvedor procurando respostas para "Como fazer deploy com GitHub Pages?" ou "Como fazer deploy projeto React?", produzimos um vídeo tutorial, que ensina de forma prática e didática o passo a passo para fazer o deploy de um projeto em React JS utilizando #Vite no #GitHub Pages. 🤩
O processo de deploy é uma etapa fundamental no desenvolvimento de software que envolve a disponibilização de um aplicativo ou site para uso público ou interno.
Passa por várias fases, como desenvolvimento, teste, integração, lançamento e, finalmente, manutenção. É essencial para garantir que o software esteja funcionando corretamente e acessível aos usuários finais.
O GitHub Pages é um serviço de hospedagem gratuito fornecido pelo GitHub que permite hospedar seu projeto React diretamente de seu repositório GitHub, tornando o processo de deploy simples e eficiente.
Este tutorial da Hora de Codar ensina a como realizar esse processo de maneira rápida e fácil tanto para iniciantes quanto avançados. Um guia completo de como subir um projeto React para o GitHub Pages!
Vamos juntos? Ah, e não esquece de comentar com a gente se possuir alguma indicação de vídeo ou curso, beleza?
🔴 Instagram: / horadecodar
🔷 Telegram: t.me/horadecodar
🟣 Discord Hora de Codar: / discord - Наука та технологія
💡 Conheça nosso curso completo de React JS: app.horadecodar.com.br/course/curso-react-js-completo
Pra quem tá usando rotas com o react-router-dom, é necessário fazer a alteração da rota base:
Ou seja, se seu código está assim: } />
Mude para: } />
Fiz assim e deu certo!
Projeto Node ! é o mesmo processo ? fora o element de BASe , ou totalmente diferente ? NODE/FullStack
fiz uma alteração conforme o vídeo e a tua tbm, n sei se só uma das 2 resolveu ou de fato as 2, mas de qualquer forma salvasse de mais kkkkkkkkk
E nas rotas filhas, estou tendo problemas com elas.
@@M-scott só repetir o elemento “mãe”, que no caso é o nome do repositório, e acrescentar mais uma barra, ou seja:
Route path=“/nome do repositório”/“nome da rota filho”
o meu só abre a home, mesmo colocando /repositório/rota, as rotas não abrem
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!
Me sinto obrigado a te agradecer pelo conteúdo de qualidade que você disponibiliza gratuitamente.
Matheus, Obrigado!
Matheus Battisti... Eu te amo cara!!!! 😂😂😂 papo reto mano... fiquei 1 dia quebrando a cara para tentar hospedar minha aplicação React / Vite no GitHub Pages caçando vários tutoriais até que apareceu o teu!!! Você é iluminado, continue com seus vídeos, você é a inspiração de muitos. Tenho fé em Deus também que vou conseguir ajudar muitas pessoas também daqui um tempo. Tamo junto!
Matheus. Muito obrigado por compartilhar seus conhecimentos. Comprei alguns cursos seus e também acompanho você aqui no youtube. Você está ajudando gente!
Matheus, vc é maravilhoso. Aprendo muito contigo. Obrigada!!
Muito obrigado Matheus! era o que eu estava precisando para fazer o deploy de um projeto! vou assistir seu projeto em react também!
Matheus vc e foda mano,nunca pare com esse conteúdo incrível
Muito bom! continue com os vídeos curto muito seu canal!!!!!
Esse eu vou salvar , video bacana didático e massa padrao Mateus camarada.
Fiz diferente, usei GitHub Actions.
Um vídeo sobre deploy no gitHub com domínio personalizado seria massa demais..
Cara, obrigado pelo seus conteúdos, já tenho uns 5 cursos seu. gosto muito da sua didática!
Muito bom, valeu mesmo pelo conteúdo!
Muito obrigado!!! Ajudou muito!
obrigado, deu super certo!
ótimo conteúdo de fácil entendimento e cirúrgico!
Só tenho que agradecer, fiquei umas 3 horas tentando resolver o problema, mas esse video me ajudou muito parabéns
Muito obrigado, excelente vídeo.
Super prático e objetivo. Muito obrigado
Show top irmão, ajudou bastante!
Nossa, valeu mesmo professor, era tudo que eu precisava e nao achava em lugar nenhum.
Conteúdo muito TOP.
Valeu demais! mto bom
Olá Matheus você poderia fazer um vídeo sobre deploy em projetos angular ? Minha cabeça ta quebrando nessa parte.
Caraca irmão, muito obrigado!
Muito obrigado, me salvou
Muito bom!
Baita aula!!!
Cara top de mais valeu… já estou fazendo curso seu na Udemy e pra não perder o costume consumindo mais conteúdo seu aqui no UA-cam… sua forma de explicar eh ótima, valeuuuu
Muito obrigada!!!
Ótimo conteúdo!!
Top demais.
Muito Bom... Vídeo Massa. Embora já saber, é sempre bom ver seus vídeos ❤
Valeu Manuel
Voçe e top cara
Antes de tudo, obrigado pelo conteúdo! Seria muito bom também um vídeo com deploy através do GitHub Actions.
Valeu irmao, eu nao sabia como fazer...
Caramba que trampo para subir uma aplicação salvou muito! kkk
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
)
muito bom
Pessoal que está com problemas na renderização de imagens, eu consegui resolver(No meu caso funcionou). O problema está no caminho delas em si, vc pode usar importações relativas pra resolver este problema.
Exemplo:
import GitSvg from './git.svg';
caramba eu estou a duas horas tentando resolver esse problema, vou testar isso
Valeu mn! Tava quebrando a cabeça aqui
@@the.cinico irmão usa essa solução aqui:
PRA QUEM ESTA COM PROBLEMAS NAS IMAGENS:
Essas configurações são necessárias para que as imagens sejam localizadas na Build do Projeto
e será necessário que todas as imagens fiquem no seguinte caminho:
“/public/assets/”
UMA DICA: Assim que colocar as imagens na pasta assets dentro de public, para referenciar as imagens em qualquer parte do projeto basta voce escrever assim:
ORGANIZEM AS IMAGENS DO SEU PROJETO NA SEGUINDO ESTRUTURA:
-meu-projeto
-node_modules
-dist
-public
-assets
-image1.jpg
-image2.png
-image3.svg
-src
-components
--------------------------------------------------------------------------------------
DENTRO DO ARQUIVO “vite.config.js”
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: "", // DEIXAR ESSA LINHA COMENTADA ENQUANTO
// ESTIVER PROGRAMANDO LOCALMENTE, TIRAR O
// COMENTARIO APENAS NA HORA DO DEPLOY
// AS CONFIGURAÇÕES ABAIXO É PARA PREPARAR A
// PASTA DIST PARA RECEBER AS IMAGENS DO PROJETO
publicDir: 'public',
build: {
outDir: 'dist', // Definindo o diretório de saída para dist
assetsDir: "assets", // Definindo o diretório de ativos para assets
},
})
Cirúrgico em suas palavras!
Operação realizada com sucesso
valeu man
Bom vídeo
obrigadaaaaaaaaa
Meu projeto tinha as rotas feitas com o react-router-dom. Fiz a configuração abaixo e finalmente deu certo!
fiz um projeto também usando o react-router-dom , fiz o deploy mas a pagina fica em branco . onde que você colocou essas configurações ?
@@cristiangarcia4370 estou tentando corrigir ... eu percebi que quando eu mudo o base:"/" minha pagina continua funcionado no npm run dev (no caso fiz meu projeto com vite) mas se eu coloco indicando meu repositório no base, para de funcionar .se eu conseguir solucionar esse problema eu volto para te fala.
@@cristiangarcia4370 é só mudar a rota base para o nome do repositório!
Ou seja, se seu código está assim: } />
Mude para: } />
Fiz assim e deu certo!
@@1988ademir desculpe-me pela demora. é só colocar exatamente o mesmo no do seu repositório do github. Funcionou para mim no github pages
@@marcelkaled4872 eu já resolvi , mas obrigado pela dica !
Olá Matheus! tenho uma pergunta, caso eu fizesse uma mudança no site por exemplo, como seria o processo? fazer os commits das mudanças e rodar o " npm run deploy" de novo? seria esse o raciocínio? e mais uma vez muito obrigado pela aula!
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
🚀🚀🚀
Bom dia! Como sempre ótimo vídeo!!! Gostaria de fazer teu curso de chatGPT, tu comentou que a gente poderia pedir um cupom de desconto em outros vídeos. Já fiz vários cursos teu na Udemy e são realmente excelentes.
Top demais , consumindo uma API no projeto preciso seguir os mesmos passos ?
Gostei da novidade
Opa, aí sim!
Excelente vídeo! Entretanto, faço uso do react-router para criar a navegação no meu projeto, e ao atualizar a pagina em uma das rotas, recebo error de page 404 ja que a URL padrão é o nome do meu projeto. Poderia me ajudar a criar uma página 404 para solucionar esse problema ? (react + vite + React-Router-Dom)
Cara! Valeu demais tinha refeito todo o meu projeto de portifolio agora utilizando React /Vite e não estava conseguindo fazer o deploy, agora meu portifolio já esta no ar!!! valeuuu, Matheus sua didatica é sensacional Parabéns!!!
mano como vc conseguiu?, o meu fala que não tem o diretório dist
@@wagnersantos9597 fala mano, consegui sim segui o passo a passo ai do Matheus e deu certinho, o arquivo dist e criando apos você no terminal digitar npm run deploy , ou yarn run deploy, fica ligado nas configuraçãoes, se esta passando tudo certinho, ja ter digitados os comandos npm i gh-pages --save -dev, e quando for configurar o arquivo package.json o predeploy, vai ser igual a npm ou yarn run build vai depender de qual voce esta utilizando no seu projeto. Espero conseguir lhe ajudar com estas dicas.
Muito bom! Você usa o OBS ou outra ferramenta para colocar sua câmera na tela?
man por algum motivo meu projeto quando eu coloco ele no github pages ele acusa no console de nao encontrar os arquivos css e js
top
Valeu David!
Excelente vídeo. Muito boa explicação. Um vídeo com deploy na vercel com domínio personalizado. seria interessante tbm. Ou em algum outro servidor gratuito. Obrigado por nos passar tanto conhecimento.
Acho bem mais simples inclusive, basta clicar em deploy na vercel e já está tudo certo.
@@joaovictorteixeira4614 Eu estava tendo problema ao colocar um domínio personalizado. Mas ontem eu consegui fazer. Mas poderia fazer em algum outro servidor gratuito.
toda vez que eu modificar o código eu preciso dar o commit e o push e depois o npm run deploy?
Fiz os passos mas o site gerado mostra uma tela em branco. Quando rodo o projeto com npm run dev, funciona. Alguém sabe como resolver?
Dúvida, toda vez que eu fizer uma alteração, eu preciso dar um npm run deploy e depois subir pro github pra conseguir visualizar as mudanças no link?
Esse deploy também serve quando seu app tem mais de uma página nas rotas? Ou só server quando a única página é a '/'?
Uma dúvida, da problema se os arquivos estiverem em outro beach? Estou com default branch chamado "main" e outro recent branch chamado gh-pages
Tem algum video com bitbucket?
para subir na hostinger e na vercel aparece o erro 404, devo arrumar algo na minha aplicação ou é um problema na prorpia platafoma?
Valeu
professor, faz um video fazendo deploy com projeto em vue.js! nao encontro nenhum video bom explicando
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.
Professor, pq quando eu faço alterações e envio para github, o site não atualiza?
Os seus cursos são vitalícios ? E os da Udemy tem teus cursos também?
Como que faz para subir multiplas paginas no github, toda vez o javascript some da página
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
Parabéns pelo conteudo! muito e explicativo como sempre!
- Porém como leigo tenho uma dúvida, notei que após o uso do homepage e da alteracao no vite.config quando estou ainda editando meu site e usando react-router-dom ele não respeita o ="/" como homepage, ou seja, tem uma incompatibilidade do desenvolvimento / deploy, alguma dica? Abraço!
Amigo, estou com o mesmo problema, voce sabe como resolver?
@@guilhermeataide8649 negocio e mudar na mão mesmo kk
Bro ,react js ele serve tanto p fazer aplicativo mobile ,quanto web , ou ele faz o aplicatico web e funciona como mobile ? E da p fazer por exemplo uma dashboard administrativa em página web e tbm o aplicativo mobile ai atualizar por exemplo um cardápio de pizza pela dashboard e atualizar no aplicativo ? Tem como etc, só p mim entender mais pra que serve esse react js?
Não, Reactjs para web, e React Native para Mobile.
se tiver dando algum erro no deploy, é só instalar alguma extensão que debugge o json
Deu certo, tentei hospedar meu projeto na Vercel e deu erro, resolvi tentar colocar no github
Eu fiz o deploy mas os ícones da pasta assets não foram incluídos.
você acha vite melhor que o nx ?
Não consegui no meu app com React com TS e React Router DOM.
como faço pra atualizar o deploy??? atualizar o projeto? não funciona refazer o deploy
Eu fiz isso mas as imagens ficaram quebradas, como eu poderia resolver?
Após fazer isso, em outros projetos estou com problema agora pra dar o comanado run dev da um erro 'ERR_DLOPEN_FAILED' 😡😡😡
por algum motivo, ao fazer o deploy, meu projeto está dando o erro 404, porém qnd rodo em meu pc com o npm run dev, meu projeto funciona normalmente, já não sei mais o que fazer
vc fez o tutorial do vídeo? O meu tava dando esse problema tbm, mas com o tutorial deu certo
no meu deu uma tela preta, oq poder ser?
Hey Matheus, eu subi minha página conforme você ensinou nesse tutorial, mas as imagens ficaram quebradas no github pages. Como faço para resolver, alguém pode me ajudar?
Conseguiu resolver? Pq eu penso que o deploy não tá pegando as imagens
fiz deploy só que quando abro o link só aparece uma pagina branca
olá, passei o dia todo tentando diversas soluções, por isso não sei se via lhe ajudar. Percebi em um momento que dentro do meu settings do GitHub em Branch não aparecia o git "gh-pages", só tinha "master". Confesso que fiz tanta coisas que não lembro quando gerou, rsrs. Quando consegui gerar isso, vim no meu VS Code rodei: "npm run dev", "npm run deployer", depois fiz um "commit" e um "push". Ai quando fui tentar "Visit site", abriu a pagina.
Conseguiu resolver, tive o mesmo problema, meu acho que é problema na base, nem local host tava rodando, a mudei pra ./ na base o projeto voltou qnd dou bom rum dev, mas no pages continua não funcionando.
Se alguém estiver recebendo uma mensagem de erro do tipo "MIME Type error" no console ou algo como a tela ficar em branco e o browser acusar que não consegue acessar os arquivos js e css, basta alterar o arquivo vite.config.js. Utilize base : "./" ao invés de "/"
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 ?
É só você mudar a branch pra main e usar o git merge nome-da-branch-que-quer-mesclar. Desse jeito você puxa as alteraçoes da outra branch pra main
E se você está em dúvida se a main é o principal, ela aparece um asterisco do lado do nome main, ao fazer o comando git branch
Se fosse um projeto comum de HTML, CSS e JS seria os meus passos? Eu faço sempre usando o git desktop
da pra fazer direto pelo vscode tbm
para cancelar o terminal é: q + enter
fiz tudo isso, mas o meu, quando abro, ta todo branco kkkkkkkk alguém pode me ajudar?
provavelmente nn mudou o endereço do css , pois quando coloca o github muda o endereço
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?
No npm run dev roda normalmente, ja alterei o path para /nome do repositório e mesmo assim fica tudo branco
no "homepage": "." eu deixei assim e funcionou pra mim, ai faz o processo de build e deploy de novo@@user-fq2lo9yv2b
Fiz conforme o video e a pagina ficou toda branca, alguem com mesmo problema?
no "homepage": "." eu deixei assim e funcionou pra mim, ai faz o processo de build e deploy de novo
minha page ficou em branco..
Mano, acabei de fazer aqui e minha página ficou em branco também.
Conseguiu resolver?
Pra mim deu certo, porém atualizei algumas coisas e nao mudou...
Demora um pouco pra atualizar... Acontece comigo
@@rocosttaa deu certo hahaha tmj
PRA QUEM ESTA COM PROBLEMAS NAS IMAGENS:
Essas configurações são necessárias para que as imagens sejam localizadas na Build do Projeto
e será necessário que todas as imagens fiquem no seguinte caminho:
“/public/assets/”
UMA DICA: Assim que colocar as imagens na pasta assets dentro de public, para referenciar as imagens em qualquer parte do projeto basta voce escrever assim:
ORGANIZEM AS IMAGENS DO SEU PROJETO NA SEGUINDO ESTRUTURA:
-meu-projeto
-node_modules
-dist
-public
-assets
-image1.jpg
-image2.png
-image3.svg
-src
-components
--------------------------------------------------------------------------------------
DENTRO DO ARQUIVO “vite.config.js”
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: "", // DEIXAR ESSA LINHA COMENTADA ENQUANTO
// ESTIVER PROGRAMANDO LOCALMENTE, TIRAR O
// COMENTARIO APENAS NA HORA DO DEPLOY
// AS CONFIGURAÇÕES ABAIXO É PARA PREPARAR A
// PASTA DIST PARA RECEBER AS IMAGENS DO PROJETO
publicDir: 'public',
build: {
outDir: 'dist', // Definindo o diretório de saída para dist
assetsDir: "assets", // Definindo o diretório de ativos para assets
},
})
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