What would be the 'official' way to have package modifications show up in apps that have them installed without re-installing them?

[Jarrodsz]

For example I have

packages/ui 

This holds all components for example a Navbar component is exported from this package.

I then install this package into a remix application and use it as is like:

import {Navbar} from "@core/ui"

This works fine as is BUT:

Everytime I make modification to the package its changes do not reflect in my application for example inside apps/myremixapp i run:

pnpm dev

Is there a correct way of making the Navbar component changes I makde to from @core/ui appear in realtime with remix?
So i can just develop the component inside @core/ui as if it was inside my remix app.

I could only find the

pnpm link @core/ui 

command but this seems to install the package and does not reflect it changes.

How could one tackle this?

[PhilDL]

Hi,

First of all, I think you should look again at this repository, I made some modifications not a long time ago. In its actual state, changes in the UI packages are picked up by remix, same is for editing tailwind classes in the UI, they are reflected in the remix app directly in dev mode.

For your example and generally, you should run your commands from the root of the repository. To run dev your remix app from the root you can do pnpm run --filter remix-app dev. Then take a look at these 2 configs:

The tailwind.config.js

const colors = require("tailwindcss/colors");

module.exports = {
  content: [
    // app content
    // "./src/**/*.{ts,jsx,tsx}",
    "./app/**/*.{ts,jsx,tsx}",
    // This is the line that makes tailwind watch outside of the remix app
    "../../packages/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        brandblue: colors.blue[500],
        brandred: colors.red[500],
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

For tailwind, you will also have to look at this repo example to see how the tailwind watch commands are run and picking up tailwind.config file.

Your remix config file

Then for your remix app you should have the watchPaths filled with the path of the packages

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
  serverDependenciesToBundle: [
    "@remix-gospel-stack/internal-nobuild",
    "@remix-gospel-stack/database",
    "@remix-gospel-stack/business",
    "@remix-gospel-stack/ui",
  ],
  // This watchPaths lets remix reload when these packages change
  watchPaths: async () => {
    return [
      "../../packages/ui/src/**/*",
      "../../packages/business/src/**/*",
      "../../packages/database/src/**/*",
      "../../packages/internal-nobuild/src/**/*",
    ];
  },
  future: {
    v2_routeConvention: true,
    v2_normalizeFormMethod: true,
    v2_meta: true,
    v2_errorBoundary: true,
  },
};

Finally, look at your remix tsconfig file and check if your paths are correctly set like in that example monorepo.

[Jarrodsz]

Thank you, I totally forgot about the config files for a new app in the mono repro.
Modified everything and checked my changes against your repro, sadly havent been able to figure out why it still is not working.

It does not pick up my changes from the ui component in the package @core/ui, even on a stop and start of the remix dev server it fails to pick to changes up.

Im using the latest remix v1.16

[PhilDL]

I updated the repo to remix v1.16 today and the live reload is still working, could you share a repository so I can try to see where the problem is?

[Jarrodsz]

I start over using your latest repro version as a base, I indeed checked with the latest version of remix and it did work on your repro clone but not on mine. Its to cybersome to spend more time on it, rebasing of yours will be faster in the end.

I don't want to waste your time debugging my codebase and there have many updates that i might miss also, I could have broken some stuff by manually coping it over.

The problem is im not using fly.io so i have to remove that stuff.

[Jarrodsz]

Small contribution I documented the several files needed to modify a app and package just for reference to myself, might be usefull for the readme?

Add package to remix app

Instructions for a remix application including a package

/apps/remix_app

package.json:

"dependencies": {
  "@core/ui": "*",

tsconfig.json

"paths": {
      "~/*": ["./app/*"],
      "@core/ui/*": ["../../packages/ui/src/*"],
      "@core/ui": ["../../packages/ui/src/index"],
    },    

remix.config.js

    serverDependenciesToBundle: [     
        "@core/ui",        
    ],
    
    ...
    
     watchPaths: async () => {
        return [
            "../../packages/ui/src/**/*",
            "../../packages/site/src/**/*",
        ];
    },

/turbo.json

Needs an entry for each app(?)

"remix-app#start": {
      "dependsOn": ["^build"],
      "outputs": ["public/build/**"]
    },

Configuration for a package

Instructions for a package configuration

/packages/ui

package.json

Like the example package.json modify to needs, requires:
{
  "name": "@core/ui",
  "description": "Package description",

[PhilDL]

Thank you, maybe we need a docs folder that will hold some markdown file containing these guides at the root of the repository for now then we could spin up a little docsite.