Experiences from using Remix in a large scale company setting

[joms]

Hey guys!

I have been looking forward to an opportunity to use Remix at work after evangelising it at work for the last couple of months. I've also used Remix in hobby projects for the past year or so.

For context I work at a fairly large Norwegian insurance company with a high amount (hundred plus) of different user facing applications. These applications are served mostly from the same domain separated by using url paths. For instance Application A may be served at companydomain.com/applicationa whilst Application B may be served at companydomain.com/application/b or even at some.companydomain/application/b.

What I was building as a service utilising a Norwegian national authentication service. The implementation is fairly simple where you have a web page with an iframe in the center implementing the authentication service. Around the iframe there is a custom design with logo and texts.

Requirements for the application:

It will be used by at least two different companies that should be represented with dynamic favicon, logo and text content.

Functionality

• It must support showing logo based on domain
• It must support showing favicon based on domain
• It must support showing text based on domain
• It must support being served behind a path on different domains

Hosting paths

• Company A:auth-app.companya.com/app/path
• Company B: companyb.com/app/path

Wireframe

Wireframe of the application where the two gray boxes are contained by an iframe. The rest of the page is controlled by us and may be dynamic based on what company this is presented to.

Experiences building this application

In general, using Remix was a blast as it could make business logic decisions on the server side, ensuring that the different companies never saw another company logo. One could argue that using Remix is overkill, but it gave us tried and tested server rendering with a very low cost. It also proved as a good test case for using Remix in other projects.

Dynamic favicon

When building the favicon functionality I wish that LinksFunction would take the loader data as an argument, as with MetaFunction. The reason is that the loader calculated what company was seeing the application, and based on that the links function could have injected the correct favicon url.

In stead by tip from the amazing discord community I set up a favicon[.]ico.ts route serving the correct file based on the url using the same calculation as my index route.

This works, but seemed a bit overkill and tedious.

Dynamic logo

Same solution as for favicon. Looking at it again I think I could simplify it by putting the logos in my "deep" asset folder

Handling being hosted behind a url path

I had the expectation that this wouldn't be a problem, as React Router has the basename prop. However, I realised I had to manually define the routes with folder structure.

This in itself isn't too much of a problem, it just leads to a specific knowledge about the routing. However, it caused some issues for the assets which it took some time before I realised I had to create the same structure in the assets folder as Remix does not understand it is not hosted at the root of the path.

This is also where I think I could simplify at least the logo route.

Conclusion

First of all, using Remix was a blast! But it was surprising how much time I had to use to make it work being hosted behind the url path. I think this will be a fairly common case for large scale companies using Remix in their services, and I hoped it would be better supported. I know there are libraries fixing most or all of the above mentioned issues, but in my opinion this should be solved within Remix itself so it won't have to be special knowledge.

If this is either won't or can't be solved within Remix, it should be documented how to use Remix in such environments. I could absolutely help writing such a guide.

🤘 Rock on!

[kiliman]

I created a package that lets you mount your application to a different base path.

/ remix.config.js
const { mountRoutes } = require(https://github.com/kiliman/remix-mount-routes)

const basePath = process.env.REMIX_BASEPATH ?? ''

module.exports = {
  ignoredRouteFiles: ['.*'],
  // publicPath: `${basePath}/build/`,
  // assetsBuildDirectory: `public${basePath}/build`,
  routes: defineRoutes => {
    // /myapp => app/routes/index.tsx
    const baseRoutes = mountRoutes('/myapp', 'routes')
    // /test => app/addins/test/index.tsx
    const testRoutes = mountRoutes('/test', 'addins/test')

    // use standard Remix defineRoutes API
    // /some/path/* => app/addins/catchall.tsx
    const customRoutes = defineRoutes(route => {
      route('/some/path/*', 'addins/catchall.tsx')
    })
    const routes = {
      ...baseRoutes,
      ...testRoutes,
      ...customRoutes,
    }
    return routes
  },
}

https://github.com/kiliman/remix-mount-routes