MightyMeld can now be set up and launched with a single command: npx mightymeld.
As our open beta has progressed, we’ve learned tons—not just about MightyMeld as a tool but also about friction points in getting MightyMeld set up and running on a wide variety of React projects. Thanks to all the developers who have tried all kinds of things and shared the results—we are feeling the love!
The Early Days
When MightyMeld was first introduced during our open beta, the setup was admittedly complex. Developers had to write config files, download secrets, and install a plugin. This process was not only time-consuming but also fraught with potential errors due to its manual and somewhat platform-specific nature. For larger projects, the plugin setup proved to be particularly cumbersome.
A Single Command
Fast forward to today, and we’re thrilled to announce a significant transformation in how MightyMeld operates. A single command, npx mightymeld, is your one-stop shop for installing, running, and configuring MightyMeld. You’ll be guided through a few choices the first time you run this command in your project’s directory. No more typing (or downloading) files, it’s all automated.
And It’s Better Too
The improved CLI is part of a new architecture that not only makes MightyMeld easier to work with, but also resolves many issues devs faced running their apps. Authentication problems associated with iframes seem to be entirely gone. Your app’s cookies are now treated as first-party cookies, bypassing the issues with third-party cookies Daniel discussed here. Prior to this update, many apps required auth modifications to function properly.
For many platforms (Vite, Remix, CRA, etc), the MightyMeld plugin is no longer necessary. This removes the most intricate part of the setup process for these frameworks. Because Next aggressively strips debug information from developer builds, the plugin is still required for many Next.js projects, however for simple projects npx mightymeld can now set it up for you.
Launching MightyMeld has been decoupled from running your app. If you already have your dev server up, and want to reach for MightyMeld, you can simply launch it. Also, this simplifies setup since MightyMeld is no longer concerned with how you run your app. Of course, you can still opt to have MightyMeld launch your app if you prefer.
How It Works
A lot has changed behind the scenes to enable these advancements. The enhanced npx mightymeld command now automates tasks that were previously manual, such as configuration and secret management. If you need to dive in, npx mightymeld now takes a variety of command line options.
MightyMeld Studio is now loaded via a proxy, elevating your app’s cookies to first-party status. Authentication providers now see exactly what they’re looking for when they stick their hands in the cookie jar. This means that logging into your work project when it’s running in MightyMeld Studio should be seamless (no more fiddling with auth settings — sorry ‘bout that 😛).
The biggest setup hurdle, the plugin, was cleared by developing client-side code that uses the built-in instrumentation of React and other libraries to map active DOM elements to their origins in the codebase in a React-aware manner. Some frameworks have bugs on older versions, and Next.js likes to strip out debug information even for dev builds, so both the SWC and Babel plugin remain supported.
The proxy approach also automates the addition of MightyMeld’s Browser API to your running app. The plugin used to do this by adding an import line to your code. Instead of asking you to add an import manually, we now automate it via the proxy so you don’t have to think about it.
Let’s Keep It Rolling
These improvements mark a significant milestone in our journey to make MightyMeld as simple and developer-friendly as possible. However, our work is not done. Please try the new setup and share your experiences so we can keep getting better.
Thank you once again for your incredible support and participation. It’s your feedback and collaboration that drive the continuous improvement of MightyMeld, helping us achieve our goal of making UI development fun fast, and intuitive for all.