Multiple RedwoodJS in monorepo

Get Help and Help Others
1

Hi, I want to use a monorepo with multiple redwood installations in it. The structure should look smth like this:

monorepo/
├─ packages/
│  ├─ redwood-one/
│  ├─ redwood-two/
│  ├─ shared-ui/
│  ├─ some-other-app/
├─ node_modules/

I hacked around with nx, but could not get it working with redwood. I encountered problems with yarn due to the similar workspace names within the redwood apps. Is it possible to change the name of the workspaces within a redwood app?

Further, I encountered an Issue when running yarn rw dev within the directory redwood-one in the following structure:

monorepo/
├─ packages/
│  ├─ redwood-one/
├─ node_modules/

Webpack related error(s):

Compiled with problems:

ERROR in ../../../node_modules/@reach/skip-nav/dist/reach-skip-nav.esm.js 1:0-50

Module not found: Error: Can't resolve 'react' in '...monorepo/node_modules/@reach/skip-nav/dist'
...

Any help or lessons learn regarding monorepos and redwood is much appreciated :blush:

Edit:
I poked a little around and found that the react imports are aliased in the standard webpack config of redwood. I think this could be the reason of the webpack errors.

1 Like
2

I could resolve the second question by overriding the react import alias in the default config (custom config of webpack is described here) with

config.resolve.alias.react = path.resolve(redwoodPaths.base, '../../node_modules/react')
3

I got it working by changing the name key of api and web in the respective package.json files of one redwood project.

1 Like
4

@jeromewuerf So you’re saying you actually got it working?! That’s awesome!
You say you used NX. Mind sharing any config (if any) you used for that?

5

Yeah !! what he said !!

This sounds really nice !!

6

I’m working on this together with @jeromewuerf so I’ll just answer :smiley:

I basically tried Turborepo and NX and so far everything seems to work with both, although I just spun up the RedwoodJS starter project and imported something from a shared UI package, so nothing fancy yet.

The process so far has been:

  1. Create a new turbo/nx project with their respective cli tools
  2. In the packages or apps folder (for NX and Turbo respectively) create new boilerplate RW projects (skip dependency installation, it will fail anyways for the second+ projects)
  3. Move/migrate .yarn, .vscode, .editorconfig, .nvmrc and .yarnrc.yml to the top level folder
  4. For each RW project change the name property in <redwood>/web and <redwood>/api package.json to something unique, I just appended -<app name>
  5. Give each Redwood project a unique name in their package.json with the name key
  6. Run yarn install in the top-level folder
  7. Change the Web and API ports in redwood.toml to something unique
  8. Add the relevant scripts you want to run into each RW project’s package.json like "dev": "rw dev" to be able to run everything at once (e.g. with turbo run dev)
  9. Add the following content into the web/config/webpack.config.js of each RW project:
const path = require('path')
/** @returns {import('webpack').Configuration} Webpack Configuration */
const {
  getPaths,
} = require('@redwoodjs/internal')
10. Run `npx turbo run dev` or `yarn nx run-many --target=dev --all` in the top-level directory and enjoy two parallel RedwoodJS projects

const redwoodPaths = getPaths()
module.exports = (config, { mode }) => {
  if (mode === 'development') {
    config.resolve.alias.react = path.resolve(redwoodPaths.base, '../../node_modules/react')
 }
  return config
}
  1. Run npx turbo run dev or yarn nx run-many --target=dev --all (Turborepo/NX) in the top level directory and enjoy two parallel RedwoodJS projects

Stuff to do and figure out next:

  1. Which configuration files to share between projects and how
  2. How to share (parts of) the prisma schema between projects
  3. How to share common code (like the same authentication API and UI) between projects
  4. Figure out how to deploy it and if everything works in production
  5. We probably need to replace more aliases from the RW config - could there be a better way? Maybe some RW configuration option?

Any help appreciated :slight_smile:

4 Likes
7

I just created a repository to possibly improve this setup together (see last post):

If you only want to check out the necessary configuration adjustments here you go:

Maybe you have some helpful input here! :smiley: @Tobbe

1 Like
8

Nice, I reproduced your outlined steps in this repo.

3 Likes
9

In my case I sync’d the Prisma file between two apps and pointed them at the same db – all good

I’d imagine that TR can do things with files (like nx can push down angular.json files from segments of a centrally located json file)

Ideally we’d be able to specify an arbitrary number of Prisma schema and push them down to the apps as desired.