Setting up Multiple Sides

Get Help and Help Others
1

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!

2 Likes