DEPLOY de projeto em REACT JS com VITE no GITHUB PAGES em 10 MINUTOS

[@MatheusBattisti]

💡 Conheça nosso curso completo de React JS: app.horadecodar.com.br/course/curso-react-js-completo

[@TxhanxaGame]

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!

[@cyberDynoo]

Projeto Node ! é o mesmo processo ? fora o element de BASe , ou totalmente diferente ? NODE/FullStack

[@luizfilipedelima2310]

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

[@M-scott]

E nas rotas filhas, estou tendo problemas com elas.

[@TxhanxaGame]

@@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”

[@joshved]

o meu só abre a home, mesmo colocando /repositório/rota, as rotas não abrem

[@HernaniSamuel]

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!

[@demetriotake8566]

Você foi fantastico. Que explicação, que explicação meus amigos. Parabéns.

[@tibrasilbr]

Me sinto obrigado a te agradecer pelo conteúdo de qualidade que você disponibiliza gratuitamente. Matheus, Obrigado!

[@inventorapi8673]

Meu jesus, muito bom, parabéns, muito simples e muito funcional

[@danielmourasilva8618]

Caraca man, passei o dia tentando saber pq não pegou meu vite. Seu video salvou. obrigado

[@keytoncunhabatista4009]

Fiz diferente, usei GitHub Actions. Um vídeo sobre deploy no gitHub com domínio personalizado seria massa demais..

[@dogmagro]

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 KZbin… sua forma de explicar eh ótima, valeuuuu

[@rafaa.rodriguesz5372]

Só tenho que agradecer, fiquei umas 3 horas tentando resolver o problema, mas esse video me ajudou muito parabéns

[@officialstarfi]

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!

[@marcelkaled4872]

Meu projeto tinha as rotas feitas com o react-router-dom. Fiz a configuração abaixo e finalmente deu certo!

[@1988ademir]

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 ?

[@1988ademir]

@@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.

[@TxhanxaGame]

@@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!

[@marcelkaled4872]

@@1988ademir desculpe-me pela demora. é só colocar exatamente o mesmo no do seu repositório do github. Funcionou para mim no github pages

[@1988ademir]

@@marcelkaled4872 eu já resolvi , mas obrigado pela dica !

[@emanuelmarques1035]

Super prático e objetivo. Muito obrigado

[@flaviodamataflv]

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!!!

[@wagnersantos9597]

mano como vc conseguiu?, o meu fala que não tem o diretório dist

[@flaviodamataflv]

@@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.

[@vrct07]

Nossa, valeu mesmo professor, era tudo que eu precisava e nao achava em lugar nenhum.

[@williamdondas9132]

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!

[@MycaelaSilva-m8y]

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 🚀🚀🚀

[@douglasbatistavilasboassil5872]

Caramba que trampo para subir uma aplicação salvou muito! kkk

[@manuelhonoredesousa]

Muito Bom... Vídeo Massa. Embora já saber, é sempre bom ver seus vídeos ❤

[@MatheusBattisti]

Valeu Manuel

[@talysonsoares2712]

Cirúrgico em suas palavras!

[@MatheusBattisti]

Operação realizada com sucesso

[@mizaelktnazareno]

Esse eu vou salvar , video bacana didático e massa padrao Mateus camarada.

[@yuritokioofficial6087]

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)

[@gabrielliz8647]

Obrigado manoooo, salvou de maissssss

[@leonardofilipe8425]

Matheus. Muito obrigado por compartilhar seus conhecimentos. Comprei alguns cursos seus e também acompanho você aqui no youtube. Você está ajudando gente!

[@fernandafortes3782]

Olá Matheus você poderia fazer um vídeo sobre deploy em projetos angular ? Minha cabeça ta quebrando nessa parte.

[@muitocompouco3396]

Cara, obrigado pelo seus conteúdos, já tenho uns 5 cursos seu. gosto muito da sua didática!

[@MegaVinigomes]

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 )

[@nathazz8774]

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';

[@enzody3077]

caramba eu estou a duas horas tentando resolver esse problema, vou testar isso

[@eu.niilista]

Valeu mn! Tava quebrando a cabeça aqui

[@enzody3077]

@@eu.niilista 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 }, })

[@skytxtion]

valeu demais mano, funcionou

[@gaiek]

@@enzody3077 ajudou muito, não conseguiria buildar sem essa dica

[@eusouiana]

Me salvou! Obrigado

[@AnaSantos-gj2fh]

Matheus, vc é maravilhoso. Aprendo muito contigo. Obrigada!!

[@ThePraQNome]

Muito obrigado, excelente vídeo.

[@donsantoryu3995]

Matheus vc e foda mano,nunca pare com esse conteúdo incrível

[@PedroHenrique-pp6ur]

obrigado, deu super certo! ótimo conteúdo de fácil entendimento e cirúrgico!

[@williamdondas9132]

Muito obrigado Matheus! era o que eu estava precisando para fazer o deploy de um projeto! vou assistir seu projeto em react também!

[@GabrielSousa-hk1sg]

Muito bom! continue com os vídeos curto muito seu canal!!!!!

[@moisescruz3144]

Conteúdo muito TOP.

[@zulutiii]

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

[@niltonCesar157]

Top demais , consumindo uma API no projeto preciso seguir os mesmos passos ?

[@emanoelinfinity]

Antes de tudo, obrigado pelo conteúdo! Seria muito bom também um vídeo com deploy através do GitHub Actions.

[@LucasCosta-uk3wz]

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?

[@cholburap]

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?

[@luiz-dev]

Não, Reactjs para web, e React Native para Mobile.

[@mariaeduardadesalesmiranda8934]

Muito obrigada!!!

[@balasquin]

Caraca irmão, muito obrigado!

[@collaxd]

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!

[@oataide]

Amigo, estou com o mesmo problema, voce sabe como resolver?

[@collaxd]

@@oataide negocio e mudar na mão mesmo kk

[@DiogoLScarmagnani]

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 '/'?

[@negrao11]

Ótimo conteúdo!!

[@gabrielgomesmabiala6707]

muito bom obrigado

[@Xamastrufa]

Valeu demais! mto bom

[@lrglucas97]

Muito obrigado, me salvou

[@geoxiz]

Muito obrigado!!! Ajudou muito!

[@channeldel]

Show top irmão, ajudou bastante!

[@mayconrocha8723]

Top demais.

[@henrique_sc3436]

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

[@mrcomputer2007]

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.

[@joaovictorteixeira4614]

Acho bem mais simples inclusive, basta clicar em deploy na vercel e já está tudo certo.

[@mrcomputer2007]

@@joaovictorteixeira4614 Eu estava tendo problema ao colocar um domínio personalizado. Mas ontem eu consegui fazer. Mas poderia fazer em algum outro servidor gratuito.

[@pocoloco753]

Uma coisa que eu não entendo: antes de fazer deploy, eu rodo npm run build no terminal pra pegar o link local e abrir a página no navegador, pra ir vendo ela enquanto vou codando. Depois que faço as alterações no vídeo, npm run build dá erro, e eu não sei mais como visualizar a página em tempo real, localmente.

[@jorgesouza1904]

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?

[@raphaelramosbr]

Muito bom! Você usa o OBS ou outra ferramenta para colocar sua câmera na tela?

[@jhon-itallo]

toda vez que eu modificar o código eu preciso dar o commit e o push e depois o npm run deploy?

[@enzody3077]

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 }, })

[@thiagoandradewp]

Tem algum video com bitbucket?

[@piruladentro]

Como que faz para subir multiplas paginas no github, toda vez o javascript some da página

[@HiagoSouza-dev]

Professor, pq quando eu faço alterações e envio para github, o site não atualiza?

[@gabrielvilar866]

para subir na hostinger e na vercel aparece o erro 404, devo arrumar algo na minha aplicação ou é um problema na prorpia platafoma?

[@danielnascimento6414]

Voçe e top cara

[@karenpacheco8426]

professor, faz um video fazendo deploy com projeto em vue.js! nao encontro nenhum video bom explicando

[@bergz74]

Deu certo, tentei hospedar meu projeto na Vercel e deu erro, resolvi tentar colocar no github

[@luiscarvalho5726]

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.

[@rocosttaa]

Muito bom!

[@arozendojr]

você acha vite melhor que o nx ?

[@aldineyribeiro5110]

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.

[@MacacoVictor]

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

[@joshved]

vc fez o tutorial do vídeo? O meu tava dando esse problema tbm, mas com o tutorial deu certo

[@williamdutra1639]

Baita aula!!!

[@ipcmeanthony1905]

Os seus cursos são vitalícios ? E os da Udemy tem teus cursos também?

[@cleristonmarciel4229]

se tiver dando algum erro no deploy, é só instalar alguma extensão que debugge o json

[@lorenzofrinhani5857]

Bom vídeo

[@ryanalecrim5774]

salvou dms

[@skypper4333]

eu gostava de saber como por sites com php pelo git hub pages

[@websolucoes6569]

Gostei da novidade

[@MatheusBattisti]

Opa, aí sim!

[@genildocs]

muito bom

[@leonardolima3936]

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 "/"

[@brunacarla-x1g]

obrigadaaaaaaaaa

[@joao-lucky]

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

[@brunomendoncadev]

Após fazer isso, em outros projetos estou com problema agora pra dar o comanado run dev da um erro 'ERR_DLOPEN_FAILED' 😡😡😡

[@RogerioLacerdaSnts]

valeu man

[@isbum]

como faço pra atualizar o deploy??? atualizar o projeto? não funciona refazer o deploy

[@eduardohenriquedeassis9729]

Eu fiz o deploy mas os ícones da pasta assets não foram incluídos.

[@thaiisaraujjo]

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?

[@ramonhenrique1073]

Conseguiu resolver? Pq eu penso que o deploy não tá pegando as imagens

[@kaiorodrigo4231]

Se fosse um projeto comum de HTML, CSS e JS seria os meus passos? Eu faço sempre usando o git desktop

[@Alex_Santos_dev]

da pra fazer direto pelo vscode tbm

[@beuge91]

Não consegui no meu app com React com TS e React Router DOM.

[@ramonhenrique1073]

Eu fiz isso mas as imagens ficaram quebradas, como eu poderia resolver?

[@preparacaoonline]

fiz deploy só que quando abro o link só aparece uma pagina branca

[@homeromedeiros8691]

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.

[@ramonmachadosilva]

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.

[@fabioinovacoes3463]

Eu comprei o curso de Javascript do básico ou avançando só fiz uma semana e desapareceu não estou conseguindo fazer mais

[@MatheusBattisti]

opa, se foi pela udemy precisa falar com eles, se foi na nossa plataforma manda um email para [e-mail] para analisarmos

[@rafaelcustodiosilva5273]

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 ?

[@edselvitali3702]

É 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

[@edselvitali3702]

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

[@cleristonmarciel4229]

para cancelar o terminal é: q + enter

[@thiagopereira5609]

no meu deu uma tela preta, oq poder ser?

[@davidsyllva]

top

[@MatheusBattisti]

Valeu David!

[@ROGERIOJOSEDOSSANTOSSILVA]

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?

[@ROGERIOJOSEDOSSANTOSSILVA]

No npm run dev roda normalmente, ja alterei o path para /nome do repositório e mesmo assim fica tudo branco

[@luucaasvaz]

no "homepage": "." eu deixei assim e funcionou pra mim, ai faz o processo de build e deploy de novo@@ROGERIOJOSEDOSSANTOSSILVA

[@sillasemanoel6215]

fiz tudo isso, mas o meu, quando abro, ta todo branco kkkkkkkk alguém pode me ajudar?

[@nathaliaduarte9254]

provavelmente nn mudou o endereço do css , pois quando coloca o github muda o endereço

[@ramonmachadosilva]

Fiz conforme o video e a pagina ficou toda branca, alguem com mesmo problema?

[@luucaasvaz]

no "homepage": "." eu deixei assim e funcionou pra mim, ai faz o processo de build e deploy de novo

[@fezeeGz]

minha page ficou em branco..

[@williamdias6895]

Mano, acabei de fazer aqui e minha página ficou em branco também.

[@leonardoalmeida6169]

Conseguiu resolver?