I’m working on a larger project that has essentially 5 separate websites all interacting with the same database. It makes sense to leverage the power of a monorepo so I can have the same code base and reuse various elements across the websites.
RedwoodJS gives us the following sides or workspaces natively: web and api. I would like to use the Web side as a navigation/general info hub with the dbauth component.
I figured if I could get 1 side to work, I could replicate that to the other sides.
Here’s what I’ve tried and it’s not working.
Fresh install on a local sandbox.
BEFORE I ran yarn install
I’ve gone into package.json and added this code:
"workspaces": {
"packages": [
"api",
"web",
"MyNewSide"
]
Next, I went into the redwood.toml and added this code:
[MyNewSide]
title = "MyNewSide"
port = 8912
apiUrl = "/.redwood/functions"
includeEnvironmentVariables = [ ]
- CD into /web and opened up the tsconfig.json file. I added the following code:
"rootDirs": [
"./src",
"../.redwood/types/mirror/web/src",
"../api/src",
"../.redwood/types/mirror/api/src",
"../MyNewSide/src",
"../.redwood/types/mirror/MyNewSide/src"
],
"paths": {
"src/*": [
"./src/*",
"../.redwood/types/mirror/web/src/*",
"../api/src/*",
"../.redwood/types/mirror/api/src/*",
"../MyNewSide/src/*",
"../.redwood/types/mirror/MyNewSide/src/*"
],
"$api/*": ["../api/*"],
"$gts/*": ["../MyNewSide/*"],
"@redwoodjs/testing": ["../node_modules/@redwoodjs/testing/web"]
},
From here, I went back to root and then made of copy of the web directory and renamed it to one of the workspaces I needed. I then cd into that directory and made the following changes:
- in the jest.config.js file I changed the preset from web to the MyNewSide.
- in the package.json file I changed the name from web to the MyNewSide.
- in the tsconfig.json file I changed the MyNewSide to web so that it looked like this:
"rootDirs": [
"../web/src",
"../.redwood/types/mirror/web/src"
.....
"paths": {
"../web/src/*",
"../.redwood/types/mirror/web/src/*"
....
"$web/*": ["../web/*"],
- I also updated the @redwoodjs/testing and the Include: "…/.redwood/types/includes/ to the new workspace name
Next - I went into the root script folder and updated that tsconfig.json file with the new workspaces:
"paths": {
"$api/*": [
"../api/*"
],
"api/*": [
"../api/*"
],
"$web/*": [
"../web/*"
],
"web/*": [
"../web/*"
],
"$web/src/*": [
"../web/src/*",
"../.redwood/types/mirror/web/src/*"
],
"web/src/*": [
"../web/src/*",
"../.redwood/types/mirror/web/src/*"
],
"$MyNewSide/*": [
"../MyNewSide/*"
],
"MyNewSide/*": [
"../MyNewSide/*"
],
"$MyNewSide/src/*": [
"../gts/src/*",
"../.redwood/types/mirror/MyNewSide/src/*"
],
"MyNewSide/src/*": [
"../MyNewSide/src/*",
"../.redwood/types/mirror/MyNewSide/src/*"
]
"types/*": ["../types/*", "../web/types/*", "../api/types/*", "../MyNewSide/types/*"]
},
"typeRoots": ["../node_modules/@types"],
"jsx": "preserve"
},
"include": [
".",
"../.redwood/types/includes/all-*",
"../.redwood/types/includes/web-*",
"../.redwood/types/includes/MyNewSide-*",
"../types"
]
}
Finally - we are ready to initiate yarn install.
If things work correctly - then you should get some errors on the install - but when you run yarn rw dev - you’ll see the localhost:8910 will pull up with the default screen. so it appears API and Web are working as they should - the only thing that’s not working is the new side.
At this point - I’m now in the NodeModules section in the @redwoodjs/cli/dist/commands directing and adding the MyNewSide to everything that has the api and web in it.
I think I’m at least a little closer to figuring this out - but if someone has an easier solution - I’m definitely open to learning it!