CODEWITHSUNDEEP
reactjstypescriptgoogle-cloud-functionslernamonorepo
Xiiryo
Xiiryo

Reputation: 3267

How do you enable hot reloading in a Typescript monorepo with Lerna and Yarn Workspaces?

We use a full TypeScript mono repo with this structure:

project
| - packages
    | - common
    | - appsCommon
    | - Next.js-App
    | - React-Native-App
    | - Google-Cloud-Functions

So far common and appsCommon are compiled from TypeScript to ES6 into a lib folder.

The tsconfig.json of the common packages look like this:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "lib",
    "strict": true,
    "target": "es6",
    "jsx": "react"
  },
  "compileOnSave": true,
  "include": ["src"]
}

The packages.json of the common packages look like this:

{
  "name": "@project/common",
  "version": "0.0.10",
  "main": "lib/index.js", 
  "types": "lib/index.d.ts", 
  "files": [
    "lib/**/*" 
  ],
  ...
}

This is needed for Common, that is published to npm for use by cloud functions, but this is not needed for appsCommon, that is directly used by the Next.js and React Native apps.

Hot reloading shall also work for common within the project.

Currently the global packages.json looks like this:

{
  "name": "project",
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "**react**",
      "**react-native**",
      ...
    ]
  },
  ...
}

Currently the lerna.json looks like this:

{
  "packages": [
    "packages/*"
  ],
  "npmClient": "yarn",
  "version": "0.0.10",
  "useWorkspaces": true,

I guess it is not just a matter to change lib to src in the common package.json, when I do this modules are underlined by the VS Code: "not found". Also, I know that cloud functions can use raw typescript but I don't know if it is possible to call uncompiled typescript packages.

Upvotes: 4

Views: 5996

Answers (1)

sergio franco
sergio franco

Reputation: 346

You can orchestrate the compilation of your modules by using the sync-monorepo-packages utility, since it has the feature of Auto-discovery of packages via learna.json, that I see you are already using.

Related to the goal of using hot reloading I’ve found this github issue where it’s highlighted that the hot reloading is not ideal for a production environment, but it’s very useful for development purposes.

Upvotes: 1

Related Questions