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:
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
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.
I’m working on this together with @jeromewuerf so I’ll just answer
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:
Create a new turbo/nx project with their respective cli tools
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)
Move/migrate .yarn, .vscode, .editorconfig, .nvmrc and .yarnrc.yml to the top level folder
For each RW project change the name property in <redwood>/web and <redwood>/api package.json to something unique, I just appended -<app name>
Give each Redwood project a unique name in their package.json with the name key
Run yarn install in the top-level folder
Change the Web and API ports in redwood.toml to something unique
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)
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
}
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:
Which configuration files to share between projects and how
How to share (parts of) the prisma schema between projects
How to share common code (like the same authentication API and UI) between projects
Figure out how to deploy it and if everything works in production
We probably need to replace more aliases from the RW config - could there be a better way? Maybe some RW configuration option?