React - Migrando projeto CRA para Next.js - Code/drops #79

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ธ.ค. 2024

ความคิดเห็น • 85

  • @cassiolacerda2486
    @cassiolacerda2486 3 ปีที่แล้ว +6

    10:22
    comando para windows (Power Shell) SEM precisar instalar nenhum package adicional:
    "start": "set PORT=4000 && react-scripts start",

  • @shirayukiDev
    @shirayukiDev 3 ปีที่แล้ว +1

    Exatamente o que eu precisava, Boa Diego Excelente conteúdo.

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว +1

      Que show, Alessandro! Valeu demais! 😍 💜

  • @FilipeMoraes87
    @FilipeMoraes87 3 ปีที่แล้ว +1

    Excelente vídeo. Manter o contexto entre as apps pode ser mais complicado mas compensa muito utilizar Nextjs, é muito rápido.

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว

      Exatamente, Filipe! Que massa que curtiu o conteúdo! 💜 🚀

  • @matheusnascimento4793
    @matheusnascimento4793 3 ปีที่แล้ว +4

    6:22 isso na verdade é um problema especifico do KDE Plasma relacionado a uma limitação na lixeira. da pra resolver indo nas configurações do Dolphin, na parte de Lixeira, e remover a limitação. mas de qualquer forma, o VS Code (e vários outros apps) funcionam bem melhor em ambiente GTK (GNOME, CINNAMON, XFCE, MATE, BUDGE, I3)

  • @edmilsonsoares255
    @edmilsonsoares255 3 ปีที่แล้ว

    Diego, Salvaste a minha vida

  • @juniorsk65
    @juniorsk65 3 ปีที่แล้ว +1

    Fala Diego, parabénns pelo conteúdo. Fala mais sobre microfrontends, realmente está cada vez mais em alta, recomendo dar uma olhada no Single SPA ou Module Federation do webpack5.

  • @Ronaldo61
    @Ronaldo61 3 ปีที่แล้ว

    Pode por favor falar, Qual distro vocês está usando nesse vídeo ?

  • @kesleydaviddev5569
    @kesleydaviddev5569 3 ปีที่แล้ว

    Muito bom, eu tinha exatamente essa dúvida sobre como poderia ser feito, parabens a todos !

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว +1

      Faaaala, Kesley!
      Que massa que te ajudamos com essa dúvida! 💜 😍

  • @JeanMartinsRoss
    @JeanMartinsRoss 3 ปีที่แล้ว

    Excelente tópico e abordagem! Posta mais sobre micro front-ends sim 🚀

  • @gubmx20
    @gubmx20 3 ปีที่แล้ว +5

    Boa Diego! Fala sobre o Module Federation do webpack 5, uma das maneiras de se fazer micro-frontend nos dias de hoje.

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว

      Faaaaaala, Gustavo!
      Sugestão anotada aqui! 💜 😍

    • @juloko
      @juloko 3 ปีที่แล้ว

      @@rocketseat Pow uma pena PWA do NextJS não funcionar ainda com webpack 5. Tive um monte de erro com carregamento de imagens.

  • @maiquelleites2893
    @maiquelleites2893 3 ปีที่แล้ว

    show de bola...cria mais videos sobre microfrontends...

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว

      Faaaala, Maiquel! Beleza!? Opa, sugestão anotada! 💜

  • @xavierjece12
    @xavierjece12 3 ปีที่แล้ว +9

    Boaaa excelente video!!! Estou precisando fazer isso na empresa agora kkk tu me salvou,. Só continuei com uma duvida, como vou fazer publicar ele agora com netlify ou vercel ? #PR

    • @dieegosf
      @dieegosf 3 ปีที่แล้ว +3

      Fala Jecé, você pode publicar em projetos separados e usar o endereço do projeto CRA no proxy do endereço do projeto Next.

    • @Dreevibe
      @Dreevibe 2 ปีที่แล้ว

      @@dieegosf topeeee

  • @edymbhify
    @edymbhify 3 ปีที่แล้ว +1

    Diego mais uma vez um excelente conteúdo, você poderia explicar sobre o uso do redux-toolkit com typescript e saga, existem pouquíssimos conteúdos atualmente.

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว +1

      Faaaaala, Edson!
      Que massa que curtiu! Anotei sua sugestão aqui! Valeu demais! 💜 😍

    • @cassiolacerda2486
      @cassiolacerda2486 3 ปีที่แล้ว

      Dá uma olhada lá no repositório do Github na pasta examples... tem vários exemplos de Redux lá.

    • @edymbhify
      @edymbhify 3 ปีที่แล้ว

      @@cassiolacerda2486 Redux-toolkit não tem...

  • @matheuscruz1195
    @matheuscruz1195 3 ปีที่แล้ว

    Belo conteúdo Diegão, parabéns

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว +1

      Que massa que curtiu, Matheus!
      Bem útil, né!? Valeu demais! 💜

  • @robertoumbelino6286
    @robertoumbelino6286 3 ปีที่แล้ว +1

    Baita conteúdo Diegão 😄, quem diria que seria algo tão simples de configurar.
    Um vídeo de mono repo seria muito fera mas de PWA seria mais maravilhoso ainda haha ❤️

    • @pablodanilomota
      @pablodanilomota 3 ปีที่แล้ว +1

      Concordo @Roberto, dois conteúdos sensacionais!!

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว +1

      Curtiu, Roberto!? Maravilha! 🚀
      Sugestões anotadas... 👀 💜

  • @pablodanilomota
    @pablodanilomota 3 ปีที่แล้ว +1

    Muita massa o conteúdo!! 🚀
    Mas tenho a mesma dúvida da @Catharina, como funcionaria com autenticação?

  • @marcus48106
    @marcus48106 3 ปีที่แล้ว

    Show demais, quero ver muito conteudo sobre MF e BFF no CD da Rcoket

  • @contiero_
    @contiero_ 3 ปีที่แล้ว +1

    Muito bom conteúdo!

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว

      Que show que curtiu! 💜

  • @JrMarquesHD
    @JrMarquesHD 3 ปีที่แล้ว

    #PR Digamos que eu tenha a persistência de estado via cookies como eu faço pra compartilhar essa info entre as duas aplicações? Todas elas compartilharam o mesmo storage?

  • @Mannoeu
    @Mannoeu 3 ปีที่แล้ว +2

    No caso de precisar compartilhar a sessão/usuário logado por exemplo entre as duas aplicações durante a migração, isto é, loguei pelo next, acessei uma página que ainda está no CRA, mas preciso por exemplo mostrar o usuário logado na navbar. Isso é possível?

    • @dieegosf
      @dieegosf 3 ปีที่แล้ว +2

      Sim, mas o token vai precisar estar em algum local acessível por ambas aplicações, ou seja, o melhor local são os cookies. Vale lembrar que quando você navega de uma aplicação CRA para o Next ou vice-versa o que vai acontecer é um reload completo da aplicação, ou seja, todos estados são perdidos, mas no caso da autenticação podem ser recarregados normalmente se o token estiver disponível.

    • @Mannoeu
      @Mannoeu 3 ปีที่แล้ว +1

      @@dieegosf massa!!

  • @guilhermesantanadev
    @guilhermesantanadev ปีที่แล้ว

    O que esta travando ai é o Git integrado no vscode... como vc tirou o gitignore a pasta node começou ser monitorada.... @Rocketseat

  • @joaoluis7926
    @joaoluis7926 3 ปีที่แล้ว

    Mais que maravilha 😍

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว +1

      Curtiu, João!? 👀 💜

    • @joaoluis7926
      @joaoluis7926 3 ปีที่แล้ว

      @@rocketseat sensacional 💜

  • @sidneydev
    @sidneydev 3 ปีที่แล้ว

    #PR Fala Diego, blz! Manda um Salve para galera de Cuiabá-MT, super empolgados com esses conteúdos. A dúvida é de como chamar uma página no Next.js passando valores com método post ou algo que mantenha os dados seguros e não públicos.

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว +1

      Faaaaala, Sidney!
      Um SALVE pra Cuiabá! 😍
      Excelente ponto! Valeu demais por nos enviar a sua dúvida! 💜 🚀

  • @EulerAlvarenga1
    @EulerAlvarenga1 3 ปีที่แล้ว +1

    Seria uma boa falar do microfront-end.
    Tenho uma aplicação rodando bem complexa e com bugs em uma versão muito antiga do react. Seria interessante ter um novo app (provavelmente cra) porém atualizado e com novas features incrementalmente?

    • @gabrielguimaraes5623
      @gabrielguimaraes5623 3 ปีที่แล้ว +1

      Aí o ideal não seria um novo projeto em Next.js? Assim você melhora incrementalmente com o método usado no vídeo.

  • @maiquelleites2893
    @maiquelleites2893 3 ปีที่แล้ว

    #pr quando devo usar NEXT ou CRA ?

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว

      Excelente ponto! Anotado! Valeu demais por nos enviar sua dúvida! 💜

  • @guilhermesantanadev
    @guilhermesantanadev ปีที่แล้ว

    oi tudo bom? como você sobre isso em um servidor com nginx?

  • @jHallyson32
    @jHallyson32 2 ปีที่แล้ว

    #PR Diego, tudo bem? Como esse redirecionamento funciona quando temos autenticação essas telas, é possível compartilhar essas informações?

  • @heitorpacheco6913
    @heitorpacheco6913 3 ปีที่แล้ว

    Diego, eu consigo fazer esse rewrites manualmente ? No caso redirecionar conforme uma regra de negócio.

  • @Jack-ss4re
    @Jack-ss4re 2 ปีที่แล้ว

    Qual é esse OS que vc tá usando?

  • @noriller
    @noriller 3 ปีที่แล้ว

    #PR: No caso, esse redirecionamento precisaria ser pra uma pagina react? Ou se colocar uma página em outra tecnologia ele também funcionaria?

  • @ribeiro.evandro
    @ribeiro.evandro 3 ปีที่แล้ว

    Uma dúvida, sobre o deploy dessa estratégia na Vercel, eu preciso criar projetos diferentes ou posso enviar a pasta contendo as duas aplicações?

    • @dieegosf
      @dieegosf 3 ปีที่แล้ว +2

      Fala Evandro, você pode publicar em projetos separados e usar o endereço do projeto CRA no proxy do endereço do projeto Next.

  • @mathws1
    @mathws1 3 ปีที่แล้ว +1

    Diego, daria pra fazer o inverso? o CRA ser o proxy pro Next ao invés do Next ser o proxy pro CRA?

    • @dieegosf
      @dieegosf 3 ปีที่แล้ว +5

      Não porque o CRA no fim gera uma build totalmente estática, ou seja, não tem nenhum server rodando com ele. O proxy precisaria ser feito por um terceiro dai nesse caso, tipo um NGINX que fica entre a conexão do cliente com o seu app CRA e o NGINX em si faz esse processo e não o CRA.

    • @jHallyson32
      @jHallyson32 2 ปีที่แล้ว

      @@dieegosf #PR Diego, tudo bem? Como esse redirecionamento funciona quando temos autenticação essas telas, é possível compartilhar essas informações?

  • @fernandobrunoboscato7236
    @fernandobrunoboscato7236 ปีที่แล้ว

    Boa tarde poreriam fazer um conteudo atualizado e mais completo com autenticação no propria api e com o google?

  • @Eduardo-cx1up
    @Eduardo-cx1up 3 ปีที่แล้ว

    será que vale a pena eu comprar o ignite nesse que está por vir agora, e começar mais pra frente sem acompanhar voces? e depois quando lançarem o proximo eu refaço junto mais rápido para acompanhar... Voce acha que eu ficaria perdido 'sozinho'? kkkk
    Porque ainda estou vendo Javascript Intermediário, e se esse próximo ignite vir no mes que vem, eu n devo conseguir terminar de ver bem js,html e css, daí eu precisaria de mais um ou dois meses pra poder começar o Ignite

  • @danteanjos_
    @danteanjos_ 3 ปีที่แล้ว

    Pelo que entendi, é apenas um redirect... e se a outra aplicação for um Angular por exemplo? Funcionaria tbm?

  • @lennonlemos455
    @lennonlemos455 3 ปีที่แล้ว

    Top! 👏👏👏

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว +1

      Valeu demais, Lennon! 💜

  • @AlexandreHPiva
    @AlexandreHPiva 3 ปีที่แล้ว

    Cara, faz mais vídeos sobre microfrontends!

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว

      Faaaaala, Alê! Beleza!?
      Sugestão anotada!
      Por hora, deixo esse #PR em que o Diego responde uma pergunta sobre:
      *Micro Frontends, Node.js, Unform, StyleSheets, Styled-components, ORMs | **#PR** 13*
      th-cam.com/video/YQr5CIRZ4Og/w-d-xo.html
      💜 🚀

  • @RodrigoZacariotto
    @RodrigoZacariotto 3 ปีที่แล้ว

    Essa config de proxy serve também pra arquivos da pasta public (css, js, imagens, etc) ou é somente para as rotas? Tenho uma aplicação antiga rodando e estou fazendo a migração pra JS (next), tem muito css, js e imagens nessa aplicação antiga.

    • @dieegosf
      @dieegosf 3 ปีที่แล้ว +2

      Pode ser usado pra qualquer tipo de arquivo.

  • @BrendonDosReisCarvalho
    @BrendonDosReisCarvalho 3 ปีที่แล้ว

    Diego, como fazer o deploy dessa estratégia para a Vercel?

    • @dieegosf
      @dieegosf 3 ปีที่แล้ว +1

      Fala Brendon, você pode publicar em projetos separados e usar o endereço do projeto CRA no proxy do endereço do projeto Next.

  • @tennebris5371
    @tennebris5371 3 ปีที่แล้ว

    Seria possível compartilhar os contextos entre os dois projetos?

    • @daniel1404able
      @daniel1404able 3 ปีที่แล้ว +1

      Local storage

    • @dieegosf
      @dieegosf 3 ปีที่แล้ว +2

      Toda informação que precisa ser persistida entre sessões e compartilhada entre ambos deve ser armazenada nos cookies principalmente, a não ser que seja uma informação exclusiva da parte visual e dai pode ser usado o Local Storage.

    • @tennebris5371
      @tennebris5371 3 ปีที่แล้ว

      Obrigados ótimo conteúdo parabéns. Ansioso para a nlw

  • @JaykonWillian
    @JaykonWillian 3 ปีที่แล้ว

    Fala Diego, pq eu deveria hj em dia começar um projeto com cra ao invés de next.js? Existe algum case específico?

  • @alitonoliveira1700
    @alitonoliveira1700 3 ปีที่แล้ว

    Faaaaala, Diego! Subdomínios funcionam nesse mesmo esquema de duas aplicações ou podem ser criados para uma única aplicação? Ou seja, uma aplicação com subdomínio para admin (cra ou next) e outra no endereço url principal para usuários?

    • @dieegosf
      @dieegosf 3 ปีที่แล้ว +1

      Nesse caso são dois apps diferentes e tudo bem, eu particularmente sempre prefiro criar apps diferentes caso sejam acessados por pessoas diferentes.

    • @alitonoliveira1700
      @alitonoliveira1700 3 ปีที่แล้ว

      @@dieegosf Obrigado pela dica! Como eu uso bastante o free quota da firebase pra aprender a programar, o difícil seria conectar as duas aplicações ambas com o mesmo banco de dados NoSQL, mas com registros de autenticação diferentes para que o usuário não faça login na área admin e vice-versa.

  • @guilhermealbert
    @guilhermealbert 3 ปีที่แล้ว +1

    Dá pra criar um .env pra adicionar a variável PORT=4000, sem precisar de alterar no package.json.

    • @dieegosf
      @dieegosf 3 ปีที่แล้ว

      Boa, obrigado pela adição.

  • @pscover2445
    @pscover2445 3 ปีที่แล้ว

    Qual é a versão do Linux que você usa? Ele já vem esse layout ou vocês editou?

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว +1

      Faaaaala, dev! É o Kubuntu! 💜
      Vou deixar um vídeo em que o nosso querido Rodz customiza, tudo bem!? 😉
      th-cam.com/video/h-FsG-QpgfI/w-d-xo.html
      🚀

    • @pscover2445
      @pscover2445 3 ปีที่แล้ว

      @@rocketseat s2 vcs são top !

  • @luca0898
    @luca0898 3 ปีที่แล้ว

    Diego, qual distro linux tu usa? Vlw pelo vídeo 🚀

    • @rocketseat
      @rocketseat  3 ปีที่แล้ว

      Faaaaala, Luca! Beleza!?
      O Diego ta usando o Kubuntu!
      Vou deixar um vídeo do nosso querido Rodz mostrando como customiza assim:
      *Customizando KDE Plasma (Kubuntu, Manjaro, etc) | Guilherme Rodz*
      th-cam.com/video/h-FsG-QpgfI/w-d-xo.html
      💜 🚀

  • @gabriel11776
    @gabriel11776 3 ปีที่แล้ว

    Esse bug ao deletar arquivos nunca rolou comigo. Que bizarro