Shared code between api and web

I have a shared code folder (‘config/’) that’s a peer of api and web and imported by each. I noticed it’s not being transpiled from es6 modules (and thus throwing errors). I see the passage about overriding webpack config for web, https://redwoodjs.com/guides/webpack-config.html#overriding-webpack-config, but what about api side, is typescript transpiling that?

Also, I’d like to be able to import from this shared folder like the current ‘src/’ imports set up for both api and web.

Any tips for achieving this or am I swimming upstream by having this shared code folder outside of api and web?

Since we’re using yarn workspaces I would recommend creating a new folder called “packages/” in the root and create a shared npm package in that folder.

You can then install and import that package. Let me know if you need a more detailed explanation. We should create a guide for this.

2 Likes

Ah, got it - thanks. That makes sense.

One final thing to make this perfect for development: I’m at a loss on how to get both api and web to auto-reload the shared code. Any pointers or easy things I’m missing here? I’ve yarn linked the local package into both api and web, but when api or web reload, code changes in the shared code are not loaded.

We don’t have a good path for this yet, but we should add one we when add the guide.

A “poor hack” could be to run nodemon: yarn nodemon -w packages/--exec 'touch api/src/functions/graphql.ts; touch web/src/Routes.js'

You could do that in a separate process and run yarn rw dev in another. Any changes to your package will cause a reload of the api and web server.

1 Like

Here’s another suggestion by @chris-hailstorm that I think is a lot easier:

I would go for the babel.config.js route since you’re targeting both sides. This still wouldn’t reload the sides, but we’ll come up with an official way of doing this.

Ah many thanks for the link - the webpack config may serve my purposes better. I’ll try it out.

FWIW, this babel config almost gets me there. I can import from ‘@sharedcode’ in both web and api. web reloads on any change, but api does not as you mentioned. Currently running a separate nodemon watch that you posted above.

module.exports = {
  presets: ['@redwoodjs/core/config/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          '@sharedcode': '../sharedcode',
        },
      },
    ],
  ],
}

I’d love a guide for this even if it is just a simple cliff notes version. This is my first usage of workspaces so most of the concepts are new to me.

@peterp curious if the babel-plugin-module-resolver we’re already using might be able to help on the API side of things?

I think this is what they’re using above, but our “watch code” for the api-server only reloads if a file in ./api changes. It doesn’t have a map of all imported files and reload if any of those changes. I’m planning on seperating the “watch and reload” part from the “dev-server” part which will make this possible.

1 Like