Remix

tip

Many applications do not require this plugin. Unless you have been directed here by other documentation, you can probably skip these instructions. See “Should I install the plugin?” for more information.

REMIX SUPPORT IS EXPERIMENTAL

The instructions here may not work as expected. If you run into problems, please let us know.

Create a new filed named mightymeld-remix.js with the following contents.

mightymeld-remix.js

// Remix does not provide an API for installing esbuild plugins.
// This script installs the plugin for esbuild and then runs `remix dev`.
const originalEsbuild = require('esbuild');
const Module = require('module');
const originalRequire = Module.prototype.require;
const mmEsbuildPlugin = require('@mightymeld/runtime/esbuild-plugin-mightymeld').default;

const installPlugin = (options) => ({
  ...options,
  plugins: [mmEsbuildPlugin(), ...options.plugins]
});

Module.prototype.require = function (specifier) {
  // When remix requires esbuild, it will get an esbuild with the plugin already installed.
  if (specifier === 'esbuild') {
    return {
      ...originalEsbuild,
      build: (options) => originalEsbuild.build(installPlugin(options)),
      context: (options) => originalEsbuild.context(installPlugin(options))
    };
  }

  // For other modules, do whatever require() normally does.
  return originalRequire.apply(this, arguments);
};

// Run remix.
require('@remix-run/dev/dist/cli');

Create a new start script that will be used just for MightyMeld:

package.json

{
  ...
  "scripts": {
    "dev": "remix dev",
    "mightymeld": "node mightymeld-remix",
    "start": "remix-serve build"
  },
  ...
}

Update the run entry in your mightymeld.json file as follows:

mightymeld.json

{
  ...
  "run": "node mightymeld-remix",
  "include": ["app"],
  "web_server_url": "http://localhost:3000",
  ...
}