DEV Community

Cover image for How to Create a React Typescript Monorepo with Git Submodules

How to Create a React Typescript Monorepo with Git Submodules

Alex Eagleson on December 17, 2021

All code from this tutorial as a complete package is available in this repository and a video version of this tutorial is available below: Do ...
Read full post
Collapse
 
awitherow profile image
Austin Witherow •

Really great intro to lerna thank you for having converted me to using it on an upcoming project. Getting so tired of copy pasting from old repositories and am finally creating my giga repo storing all my knowledge in one place to reuse.

Collapse
 
alexeagleson profile image
Alex Eagleson • • Edited

Thanks for reading everyone. If anyone has any tips or suggestions themselves, I'm extremely interested in hearing them.

I feel like this is the kind of thing that can be configured so many different ways, I'd love to hear of any success stories, particularly from large long-lived projects with many contributors.

Cheers.

Collapse
 
wsh4and profile image
Eko Andri Subarnanto •

Hi thank you, just what I was looking for. Instead of lerna I've been using nx and it's great. I am gonna try this submodules to all my projects, thanks again and hope you keep posting! Keep up the good work

Collapse
 
alexeagleson profile image
Alex Eagleson •

Good stuff! I've never used nx, glad to head it works well for you.

Collapse
 
nda profile image
Dmitry •

Hi, thank you. Great article!
Just I think some text is missing in the end of chapter 'Sharing Code and Adding Dependencies':
' ...That is fairly harmless, but what if we...'
I am curious what is there :)

Collapse
 
alexeagleson profile image
Alex Eagleson •

That's a great question, nice catch! I'll have to update that

The intention was to say "what if we are not deploying our backend and frontend to the same server". By creating a "shared" repository we can include the shared data in both back & front, but deploy each one separately when setting up our production environments.

Collapse
 
musavand profile image
musavand •

hi
tanks a lot for your your code has some trial bugs..
fetch("localhost:3001/", {}) must change to fetch("localhost:3001/data", {})
and you must use var cors = require('cors'); for prevent cors error ,..

Collapse
 
rejetto profile image
Massimo Melina •

thanks for sharing!
I made a little experiment that didn't go well:
in simple-shared-data/index.ts
I added:

export const fun1 = () => console.log("I'm fun1")
Enter fullscreen mode Exit fullscreen mode

Then I imported it in App.tsx, like this:

import { QueryPayload, fun1 } from "@my-namespace/simple-shared-data";
Enter fullscreen mode Exit fullscreen mode

But as soon as I try to use it, like this:

onClick={() => { 
  fun1(); 
  fetch("http://localhost:3001/", {})
Enter fullscreen mode Exit fullscreen mode

Then it goes crazy😵

ERROR in ../simple-shared-data/index.ts 3:7
Module parse failed: Unexpected token (3:7)
File was processed with these loaders:
 * ../../node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ../../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| __webpack_require__.$Refresh$.runtime = require('C:/temp/monorepo-example/node_modules/react-refresh/runtime.js');
|
> export interface QueryPayload {
|   payload: string;
| }
 @ ./src/App.tsx 8:0-56 48:10-14
 @ ./src/index.tsx 7:0-24 11:33-36
webpack 5.65.0 compiled with 1 error in 223 ms
Enter fullscreen mode Exit fullscreen mode

are we doomed to export just types? 🤢
any help?😭

Collapse
 
kibolho profile image
Abílio Azevedo •

Thanks for the good content! Is it possible to have optionals submodules! In my use case I would like to share a submodule between two projects without giving access to the submodule code. I will share the submodule just in the build process.
I tried to do conditional import and require but it doesn't work with metro bundler in react-native.

Collapse
 
revskill10 profile image
Truong Hoang Dung •

So, how to switch branch inside the git submodule ?
Without it, this article seems useless ;)

Collapse
 
alexeagleson profile image
Alex Eagleson •

Same syntax as within the main module, just:

git branch branch-name

while within a directory of the submodule and the branch will be updated for the submodule and not the main module.

Collapse
 
ajimerasrinivas profile image
Srinivas Ajimera •

Impressive blog with lovely information. Really very useful article for us thanks for sharing such a wonderful blog.

espirittech.com/react-js-services/

Collapse
 
martin2844 profile image
martin2844 •

Good Post, great intro to the monorepo structure and also good introduction to Lerna.
I suggest using ViTE instead of CRA, for future examples!