Monorepo ReactJS, Node.js & React Native com Yarn Workspaces | Code/Drops #42

[@leandroreal5258]

Que Netflix o que, agora vou maratonar é a Rocketseat, só conteúdo de QUALIDADE

[@mateushenrique6421]

😂😂😂😂

[@83923]

tive que concorda com vc kkkk

[@alessandrob.g.4524]

@@DanielGO20 boa kkk

[@kissema]

Realmente se tem muitas dúvidas em relação a este tema, principalmente quando avaliadas as vantagens em relação a diversos repositório. Falo de Angola e acompanho seus vídeos e aproveito para te parabenizar e a sua equipa da Rocketseat

[@MDKohaku]

A didática da Rocketseat é outro nível

[@rocketseat]

Fala Matheus! Valeeu pelo feedback 😍💜

[@fellypejonata5389]

Já viu a do Gustavo Guanabara?

[@thiagomattos450]

@@fellypejonata5389 Terrível

[@cariocacode6243]

O bom do monorepo é a simplicidade de acesso, manutenção e manteneção do código, ou seja, isso facilita o processo para focar mais na regra de negócio (desenvolver a app) e deixar uma parte da arquitetura do ecossistema da aplicação (back, front, mobile) em uma estrutura já consolida e verificada pela comunidade que funciona muito bem, não que seja a melhor de todos, mas que realmente funciona, e assim entregar mais rápido uma solução, deixando um pedaço do processo padronizado dentro uma equipe.

[@flawtista]

Eu acho que monorepo funciona bem com scope. O exemplo que ele deu a respeito de uma feature afeta vários repositórios. Se vc tiver um único front-end e várias views, vc pode ter um único repositório para todas as views, onde possa rolar o compartilhamento de código, e o outro com o back-end. Pra mim, essa é a real motivação pra fazer monorepo.

[@teste-yh5df]

se vc for ver mesmo, não é muito recomendado para iniciantes, ja que tudo pode acabar dando ruim. Por exemplo se vc precisar reconstruir a pasta android?fudeu né tem q refazer as configuraçóes do monorepo tbm

[@tiagourbano1]

Mais uma dica: No minuto 33:20, onde você fala para apertar CTRL + D para ir selecionando todas as ocorrências de node_modules, você pode apertar CTRL + F2 uma única vez que o vscode já seleciona todas as ocorrências =D

[@mastersorcerer555]

Presente

[@guilhermenascimentomonte6235]

Ficou mto top a explicação! Trabalho com monorepo desde 2018 e esse é o melhor conteúdo BR q eu já vi sobre! Só faltou falar um pouco do Lerna, em pq e como utilizá-lo. Eu utilizo Lerna pra me ajudar no versionamento dos packages: instalação de dependencias internas, subir versão automático de todos os packages q tiveram alterações, geração de tags automatizadas, geração de changelog pra cada package através da padronização de commits (essa dica peguei aqui na rocketseat \o), e algumas facilidades com o cli, como por exemplo importar um repositório pra dentro do monorepo.

[@rocketseat]

Que massa Guilherme! Muito bom ver o feedback de quem já utiliza esse modelo diariamente! 💜

[@IanTorquato]

Podes ajudar com uma dúvida? Onde seria o ideal para fazer deploy de um monorepo com back e front? Que a alteração de um não acione um "novo deploy" do outro. E se puderes explicar um pouco de como subir o serviço, ou indicar um conteúdo... ia ajudar demais

[@marcusviniciuskoch550]

Vc e o Akita sao os maiores exemplos de programador do youtube.

[@carlosspohr]

Conteúdo bem direcionado e uma didática impecável. Parabéns!

[@leonardoviana8763]

RocketSeat é outro nível, como desenvolvedor, arrisco em dizer que minha vida melhorou muito quando conheci esses gurus da programação. PS: O Diego emagreceu muito.

[@rocketseat]

Fala Leo!! Que honra!! 😍💜

[@MarcelZanlucas]

O vídeo ficou realmente muito bom! Senti falta de você comentar sobre o Lerna e build! Parabéns!!!

[@wdias05]

Ótimo vídeo como sempre!! Galera, quem está com problemas com expo-yarn-workspace no Win 10, basta remover o script postinstall do package.json no app-expo, e coloca-lo da seguinte forma no package.json global: "postinstall":"cd ./packages/expoapp && expo-yarn-workspaces postinstall" Esse problema está com uma issue aberta no repositório do expo: github.com/expo/expo/issues/6983

[@rocketseat]

Fala, Weslei!! Valeeu pelo feedback e por compartilhar a solução! 💜

[@hemerson327]

outra observação é que se ainda assim ficar dando erro talvez seja questão de permissão, comigo tive que rodar pelo powershell em modo admin pra só aí criar a pasta __generated__

[@kochgamers]

lembro de ter visto isso ano passado, n entendi nada, mas continuei fazendo meu projeto aprendendo e colocando em pratica, e hoje eu refatorei todo meu codigo usando omnirepo, e ficou MUITO bom, conteudo incrivel!

[@fabiomendes6901]

Eu achando que ia aprender só como bota front e back end lá, o cara me ensinou foi tudo kkkkkkkkkkkkkkkk

[@ramonsena7466]

Nada melhor do que um guia inicial muito bem feito! Valeu, Diego!!

[@rocketseat]

Fala Ramon!! Valeeeu pelo feedback! 💜

[@knowledgeinbold]

Excelente conteúdo, obrigado por compartilhar. Fiquei na dúvida nos seguintes pontos: - monorepo serve para projetos de diferentes linguagens? ou ainda, num projeto de diferentes microsserviços, que normalmente serão executados em containers docker separados? - monorepo é voltado somente para projetos que compartilham de recursos/pacotes/libraries? - então, um projeto em monorepo, no ambiente final de hospedagem vira um monolito?

[@cassiogroh7844]

Esse vídeo devia passar no globo repórter kk. Ficou muito bom! era tudo o que eu queria, deixou uma visão muito clara do caminho a ser seguido, valeu!!

[@sthefanocarvalho2823]

Esse "eita" nos 9:45 ficou ótimo haha

[@rocketseat]

Hahahaha ficou!! 💜

Estou usando o nrwl/nx para gerir um monorepo aqui onde eu trabalho e tem sido uma experiência muito boa, permitindo criar e compartilhar libs entre projetos facilitando a manutenção e evitando a repetição de código. Parabéns @Rocketseat pelo excelente vídeo.

[@rocketseat]

Fala Rodrigo! Valeeu pelo feedback! 💜

[@apholo8308]

@Rodrigo Brandão amigo, sabe dizer se usando o NX é possível adicionar o React Native? Achei a ferramenta legal mas só vi com React pra web. Obrigado

@@apholo8308 não sei te responder cara. Se descobrir conta pra gente :)

[@batista7898]

Esse video foi do BARALHO, rapaz, que top, tem tudo ai pra conseguir fazer o meu próprio e sair programando, TOP.

[@educobuci]

Bem legal, parabéns por trazer conteúdo de alto nível em português. Só ficou faltando falar do Lerna :P

[@vitoremidio4090]

Achei o vídeo sensacional. Incrível. Muito conteúdo bom e um ótimo aprendizado.

[@rocketseat]

Faala Vitor! Valeeeu pelo feedback! 💜

[@cogumm]

Diegão com barbinha? Isso é novidade que acompanho o canal a alguns anos hahahahaha Que delicinha de conteúdo, parabéns pela dinâmica do vídeo.

[@rocketseat]

Hahahha. Valeeu pelo feedback Gabriel! 💜

[@caiolucas9136]

Video muito bom. Rocketseat me preparando para a vida!!!!

[@iorrancastro]

Moro aqui em portugal e ja estava triste que o video nao havia saido hoje kkk

[@mathws1]

Muito show!! Acredito que Dockerizado esse setup ia ficar massa também!

[@TheMatthewizee]

porra diego eu to apaixonado, n to sabendo lidar vcs são do caralho porra ;-; eu fico arrepiado aprendendo cara kkkkkkkkk ce n tem noção do quanto isso é emocionante. na vdd deve saber sim como é vlw por vcs existirem gente

[@AndrelinoSilvas]

Parabéns, ajudou muito. Não sabia que dava pra criar assim tudo junto. Não concordava em ter tantos node_modules gigantes separados pra os 3 projetos (sever, web e mobile). Mas, isso ai deu uma boa clareada nas possibilidades.

[@rocketseat]

Que legal que te ajudou Adrelino!! 💜

[@AndrelinoSilvas]

@@rocketseat , E poxa para de roubar meu "n"! kkkkkk

[@renatoc1986]

Muito bom o vídeo, sou muito fã do seu trabalho!

[@eltonmarques2]

Vídeo bom demais, parabéns para toda equipe da Rocketseat

[@rocketseat]

Fala Elton! Mais uma vez muito obrigado pelo feedback! 💜

[@rafael.ribeiro]

Conteúdo muito massa como sempre! 01:41 não tem como ser um dos code/drops mais longos com o Diego falando em 3x. kkk

[@ThyagoRaphael]

Precisa nem assistir, todos os vídeos da Rocket são tops.

Mto bom, transparência total para o time

[@rocketseat]

Faala Clóvis! Valeu pelo feedback 😊

[@aleodoni]

Como sempre, vídeo de altíssima qualidade !

[@flawtista]

Esse foi um Code drops? Kkk parece mais um master class

[@rocketseat]

Pois então! hahahaha 💜

[@obred]

O vídeo ficou bem da hora, faltou um conteúdo ou outro como a importação de um package dentro de outro package em casos como lib de components para a parte do frontend que precisa estar sempre atualizando aquele module conforme aquele package de componentes tem uma nova build ou está em modo de desenvolvimento recebendo atualizações quase que constantes. Uma outra observação é na configuração do eslint, é uma boa pratica ela ser extendida (usando o extends como se uma dep de configuração externa fosse) ao invés de importar diretamente o arquivo e retornar ele, outra coisa também é que as configurações dentro do package eslint-config é mais interessante serem adicionadas dentro da configuração “overrides”, desse modo aquela configuração pode ser extendida dentro de um outro projeto no monorepo e ser sobrescrita para atender alguma particularidade específica naquele package. A extensão da configuração ao invés de fazer aquele import e return também permite que configurações adicionais sejam feitas de package para package.

[@ronnyacacio9944]

Esse eu tava esperando faz tempo!!!

[@gcardoso102]

conteúdo muito foda, vocês são d+

[@YagoFernades]

Timing perfeito!

[@rocketseat]

Hahaha 💜

[@rafaelsantoslabordafernand4634]

Mano, entendo que todo mundo tem opiniões diferentes, mas não consigo imaginar um motivo pra alguém dar dislike nesse vídeo

[@walfredocarneiro]

Ficou show! Difícil entender porque criaram tudo separado

[@AeroNavSim]

Show Diego, tirou todas minhas duvidas sobre monorepo.

[@rocketseat]

Fala, Julio! Que bom!!! 💜

[@HenriqueWeiand]

Ficou muito bom! estava esperando muito esse video

[@rocketseat]

Faala Henrique! Valeeu pelo feedback! 💜

[@codigocomentado]

Toooooooop! Diego faz um vídeo de CI de backend? (pedido) Diego, você está utilizando netlify ou vercel para deploy de projetos frontend? (dúvida) #PR

[@apholo8308]

Finalmente a aula de monorepo aaaaaaaaaaahhhh

[@gleysonabreu6346]

Show de bola esse conteúdo 👏👏

[@rocketseat]

Fala, Gleyson! Valeeu pelo feedback! 💜

[@isaipack]

Tava esperando MUITO por esse vídeo. Valeu rocketseat

[@rafamardegan1067]

Faaala Diego! Blz? Cara, conteúdo mto bacana e esclarecedor. Parabéns! Tenho uma dúvida com relação à estrutura de testes nos diretórios. Por exemplo, eu posso criar um diretório main e outro test dentro de cada um dos packages? "packages > web > main" e "packages > web > test". E no que isso impactaria na sua estrutura monorepo? Abraço.

[@taciocabraloficial]

Cara, você é um monstro!

[@bernardoborgesgamer7877]

Muito Monstro....

[@rocketseat]

Diegão é monstro mesmo! 💜 😛

[@FedBalves]

excelente vídeo. parabéns!

[@rocketseat]

Fala, Fernando!! Valeeu pelo feedback! 💜💜

[@peterpbt]

Vocês são foda! Top demais!!

[@ViniBatatinha]

Quem e o melhor dev br ??? Diego Rocketseat- Felipe Deschamps - Lucas Montano??? cara voces sao demais!!! obrigado pelo conteúdo

[@rocketseat]

Hahahahaha 💜🚀

[@victorbiasibetti]

Esse video foi demais!!!!

[@rocketseat]

Faala Victor! Obrigado pelo feedback 💜💜

[@juloko]

Feature mais interessante, integração do lint, mto embora não faça sentido ter package só pra ele já que ainda vai existir o `.eslintrc.js` no root. Ainda sim, interessante utilizar ele no como dependência no `package.json` é muito legal. Faria sentido se ele carregasse o `prettier-config.js` e o `.eslintignore`, mas não vai. ):

[@douglasoliveira2119]

Conteúdo excelente como sempre! Só ficou faltando falar sobre o uso do Lerna (como e pra que é utilizado). Ficamos no aguardo!

[@rocketseat]

Fala Douglas!! Valeeu pelo feedback e sugestão! 💜😊

[@juninhopo]

Pra ficar bagual mesmo! ehheheheheh

[@thenriquedb]

Daria para incluir o Storybook junto para compartilhar componentes entre as aplicações web?

[@nicholaseduardooficial]

Tamo junto

[@lucasmatos7707]

Bigodinho fininho do Diego tá o brabo

[@rocketseat]

Hahahaha 💜

[@matheusaraujo8617]

muito bom!

[@EdZava]

Chega cair ate uma lagrima !!!!!

[@rocketseat]

Hahahahaha 💜

[@LewisSenpai]

Fala Diego, Se eu tenho dois projectos com React que compartilham funcionalidades e ate muitos componentes de interface, seria interessante usar a estrategia de monorepo nesse caso (compartilhando os componentes de interface tambem) ou seria melhor ter dois App.jsx para carregar cada um dos clientes e ai ter uma pasta shared onde ficariam os componentes comuns?

[@hesch_dev]

Esse bigodinho do Diego tá um absurdo, 100sual

[@rocketseat]

Eita! hahahaha 💜

[@YagoErnandes]

Sensacional!!!

[@rocketseat]

Fala, Yago! Valeeu pelo feedback 💜 🚀

[@silventin0]

Aula muito bem dada, parabéns! Já tive alguns problemas com o create react app em monorepos e acabei tendo que utilizar ferramentas para alterar as configurações do webpack (como react-app-rewired) já que o CRA deixa tudo "engessado" com a configuração deles. Quando vocês utilizam o CRA em monorepos, também têm de fazer essas modificações?

[@eltonmarques2]

Estou com esse exato problema, ao gerar o build, os pacotes não estão sendo exportados

[@HenriqueWeiand]

estamos no mesmo barco entao... eu to tentando validar uma POC aqui github.com/henriqueweiand/tests-monorepo

[@silventin0]

@@HenriqueWeiand consegui criar o monorepo com CRA, vou olhar seu repositório pra ver se consigo te ajudar. Tive que usar um pacote chamado customize-cra

[@HenriqueWeiand]

@@silventin0 boa! entao esse meu ai to com a proposta de rodar como microfrontends roteados por um nginx

[@HenriqueWeiand]

@@silventin0 Voce esta na comunicada do discord da rocket? se nao for demais me chama la

[@EdZava]

Vendo o video completo a idea e interesante do Monorepo, mais e tanta config e tanta modificações nos templates dos projetos que não vejo que vale muito a pena (Levando em conta as vantagens do Monorepo). Talvez seja melhor usar o Monorepo apenas para agrupar os diferentes projetos de git mais que cada um tenha suas dependências e suas criações usando o templantes normais dos projetos. 🤔

[@alex2261997]

Nice video bro !

[@kalilmagal2733]

Eu tenho duas dúvidas sobre monorepos, Primeiro, eu preciso colocar os apps (web, server, mobile etc.) dentro da pasta packages, ou eu posso deixar eles na raiz? Segundo, como se faz o deploy de cada app do monorepo separadamente, tipo colocar o app server no heroku e o app web no netlify, por exemplo (ou qualquer outra plataforma)?

[@igorkaliel]

E como fica incluir o docker na parte do hot-reloading?

[@felipemateus7599]

Boa tarde Familia, queria compartilhar uma pequena atualizacao para o webpack v5+, no arquivo webpack.config nao usar o contentBase no devServer pois a partir dessa versao o contentBase esta descontinuado e dara erro na hora de rodar o script "yarn start", para corrigir isso e so trocar o "contentBase" por "static" que o problema sera resolvido, espero ter ajudado :D Belo video Diego, vc e 10!

[@rodgomesc]

cara, eu queria muito ver uma abordagem de monorepo utilizando lerna + bili

[@rocketseat]

Faala Rodrigo! Valeeu pela sugestão! 💜💜

[@hallexcosta]

Diego vocês tem algum conteúdo na rocketseat ensinando a compilar um projeto monorepo? Tenho um projeto monorepo com mobile, server, shared (para compartilhar pacotes), só que eu to tento dificuldades para compilar o server e os shared parece q ele não reconhece esse tipo de estrutura, tem alguma configuração que eu tenho fazer a mais?

[@DiegoAraujodeLima]

Faz sentido Mono Repo para vários projetos diferentes de vários clientes onde tenho algumas funcionalidades que são comuns a todos os meus clientes (validações comuns em quase todos os projetos, métodos genéricos, etc)?

[@HenriqueWeiand]

Diegao, voce comentou no video q voces usam monorepo com CRA ai na rocket, voce n conseguiria disponibilizar a estrutura base de um repositorio com monorepo e CRA

[@icaroteles5301]

Como utilizar o docker com monorepos e yarn workspaces?

[@jorgealegretti4796]

Vai ter monorepo na NLW 2 ?? (Estava muito esperando esse video heheheh )

[@jeftarmascarenhas2538]

Como faz a gestão de branchs para cada package diferente?

[@tiagourbano1]

Uma dúvida, eu vi que no axios na hora de importar ele dentro dos projetos vc coloca * para trazer qualquer versão, caso vc atualizeo axios para a versao 2.0.0 ... Como vc faz por exemplo o projeto web usar a versao 1.0.0 e o server usar a versao 2.0.0???

[@eladioclaudio5860]

Cheguei até esse vídeo pensando... Que tal, ter apenas um node_modules para vários projetos... E aí encontrei esse tal de monorepo...

[@HugoMarceloSilva]

Explicação ótima como sempre, Diego. Só uma dúvida, como seria a publicação do monorepo no heroku, por exemplo?

[@rocketseat]

Faala, Hugo! Você conhece nossa comunidade aberta? Por lá você pode tirar essa e outras dúvidas que tiver :purple_heart::purple_heart::purple_heart: Segue o link: www.rocketseat.com.br/comunidade

[@andreghisleniraimann]

Oi, estou tentando criar um monorepo com 2 servers, um http e outro mqtt, é possível utilizar um único banco de dados (arquivos do typeorm) configurado como um package??? vcs tem algum exemplo parecido????

[@joserubensdeoliveirajunior9945]

Alguém sabe por que essa configuração de lint não funciona se tiver só o projeto backend? Aí quando crio o projeto react com create react app funciona.

[@RafaelSantos-vn8ff]

No caso de usar um AdonisJS pra Backend, ainda assim é interessante usar Monorepo? Como fica a questão do Eslint (configs etc) do Adonis vs React, ele fica individual em cada pasta do package?

[@teste-yh5df]

sim todos os pacotes q vc gera por boileplate ele criar o node moudles dentro da pasta do projeto

[@soufleetEnevinel]

Da pra tu deixar uma configuração global (que é pra todos os projetos) até mesmo individual (pra cada projeto) ou até mesmo para um projeto especifico ter uma configuração especifica

[@vandrepriaro1]

Oi, é possível criar um ambiente usando MONOREPO+NODE+TYPESCRIPT+POSTGRES+DOCKER?

[@AdsonCicilioti]

COmo publicar os packages no npm???

[@vitordelfino952]

Como ficaria o buid do projeto e o build de cada package, teria que rodar o build individualmente pasta por pasta ?

Tenho a mesma dúvida Vitor, você conseguiu alguma coisa? Ajuda ae kkk

[@paulospiguel]

Olá galera da rocketseat. Como posso integrar o monorepo usando o adonisjs no server?

[@GustavoWalienDev]

Alguém poderia me ajudar, como o Diego tem acesso aos comandos prontos dentro do Terminal no Visual Code, praticamente dentro do terminal é sugerido os comandos pra ele meio q invisivel e ele apenas aperta tab e auto-completa

[@lucasjuan14]

São plugins do oh my zsh, no blog da Rocket tu encontra essas configurações

[@GustavoWalienDev]

@@lucasjuan14 Obg amigo vou procurar e ver como funciona!!

[@joaobibiano]

14:14 para ficar BAGUAL mesmo... WHATT tive que pesquisar no dicionário

[@LSbrissa]

Pra quem teve problemas para reproduzir o monorepo do video no windows, importante instalar antes "metro-config"

[@roago]

A live vai ficar gravada?

[@nurycaroline]

Seria correto, compartilhar as interfaces ts entre pacotes?

[@aguinaldotupy]

Aaaaaaah, cancela, cancela, cancela.. (Quem nunca. hahaha) 24:51 Esses vídeos mostrando a realidade são os melhores...

[@JUYkJ4GolbOgOtS]

Só um alerta, já tive problemas com React-Redux, devido a versão do React estar a frente da versão do Expo ... bem importante esse alerta. Perdi horas, o aplicativo bugava 100%. Então eu não faria isso de atualizar o React ... usa a versão compatível com o Expo.

[@CaioLesnock]

Só de pensar na quantidade de erros que isso pode gerar, já me dá medo kkkk Acho que prefiro separar mesmo kkk

[@marcusvpu]

No momento 19:52 que crio a dependencia do "express" a node_modules esta sendo criada dentro da minha pasta server ao invez de na raiz do projeto, (ai fiquei doido hein) me pergunto sera que por estar dentro de packages/server obviiuuuu que ele criaria a node_modules ali. Pergunto : Quando o diego criou ela isso nao aconteceu a node_modules foi criada na raiz. Porque ? .O node nao foi com a minha cara ? igual o o bundle do React-Native tambem nao hoje mais cedo comigo

[@GustavoWalienDev]

meu tbm nao :/ me da agonia essas coisas, eu copiando e fazendo igual o video e acontecendo tudo diferente

[@maxwell-silva]

Man... ta dificil... mas melhor impossivel... GoStack 12 e acompanhar a Rocket no youtube... em fim... to pagando Netflix atoa... hahahahaha

[@rocketseat]

Hahahahaha cancela a Netflix então que vai ficar ainda pior 💜😄

[@gamerasmatico5019]

T o p d e m a i s Tô começando a programar :) C++

[@caiomatheus817]

C++ é muito bom pra começar. Já passa por algumas partes consideradas "amedrontadoras" depois fica muito mais fácil aprender e acimilar outras linguagens.

[@gamerasmatico5019]

@@caiomatheus817 : )

[@rbltv]

toppppp

[@rocketseat]

Valeeeu demais, Rabelo! 😍 💜

[@alexsandrobezerra3252]

Diego! Eu preciso usar o Prettier para o linting funcionar? Se não, quais os benefícios que eu ganho usando?

[@fellipecechinel]

Não sou o Diego mas posso tentar ajudar kkkk Não precisa do prettier não. O eslint funciona sozinho. Mas ele é útil pra ajudar mais ainda na padronização de código porque ele faz algumas coisas a mais que o eslint, tipo arrumar quebras de códigos muito longos e algumas outras configurações que no fim das contas vale a pena ter ele

[@rocketseat]

Fala Alexsandro! Não precisa dele não, mas é muito usar também. Ele ajuda bastante a configurar algumas padronizações como o Fellipe apontou! 💜

[@alexsandrobezerra3252]

​Obrigado @@fellipecechinel! Eu vi aqui e o Prettier realmente tem umas features realmente úteis!

[@alexsandrobezerra3252]

@@rocketseat Obrigado!