Remix

tip

Remix apps that use Vite under the hood should not need to install the plugin. If you are using Remix and Vite and you think you might need the plugin, please let us know.

1. Install the mightymeld package in your project:

   npm

   npm install --save-dev mightymeld

   Yarn

   yarn add --dev mightymeld

   pnpm

   pnpm add --save-dev mightymeld

2. 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/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');

3. 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"
     },
     ...
   }

4. 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",
     ...
   }