TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: Reflame – Deploy your React web apps in milliseconds

147 pointsby lewisl9029over 2 years ago
Hi HN! I&#x27;ve been working on Reflame since I quit my job at Brex last year, excited to finally open it up for everybody to try out! Here&#x27;s a demo: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=SohUnrjiIxk" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=SohUnrjiIxk</a><p>Reflame deploys client-rendered React web apps instantly, to previews and to production.<p>In concrete wall-clock terms, deploys generally take:<p>- ~50-500ms from our VSCode extension<p>- ~500-3000ms from our GitHub app<p>(Jump to this comment (<a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=33134082" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=33134082</a>) for what makes Reflame so fast)<p>The Reflame GitHub App automatically deploys default branches to production, and other branches to previews. If you&#x27;ve used Netlify&#x2F;Vercel&#x27;s GitHub apps, you should feel right at home. The difference is it’s multiple orders of magnitudes faster. Fast enough that <i>you&#x27;ll probably never see an in-progress deploy on GitHub ever again</i>, only ready-to-go preview&#x2F;production links.<p>No more having to babysit builds or having to context switch to and from other tasks before being able to see our changes deployed in previews or production. Previewing, sharing, and even shipping, can now become part of the so-called inner loop, giving us the superpower to stay in flow state for much longer.<p>The Reflame VSCode extension is yet another order of magnitude faster than even the GitHub App. It was designed to offer an experience that can rival local development workflows in both speed and ergonomics, while addressing many of local dev&#x27;s limitations around collaboration and production-parity. Every time we make a change (e.g. by saving a file), the extension will deploy that change (in ~50-500ms) to a &quot;Live Preview&quot;, and will immediately update the app in our browsers to reflect that change.<p>Live Previews can operate in one of two modes:<p>- Development mode delivers updates through React Fast Refresh, offering the familiar state-preserving instant feedback loop we know and love from local development workflows.<p>- Production mode delivers updates by triggering a full browser reload on every change, and in exchange for this extra bit of friction, we get to develop against a byte-identical version of the fully optimized production deployment that customers will see once we ship, with a tighter feedback loop than was ever possible before.<p>Live Previews deliver updates over the internet, meaning we can effortlessly test out our changes on multiple devices simultaneously, and show our changes to anyone in the world, just by sharing a Live Preview link, all while having our updates reflected automatically across all connected devices in real-time (with live reload or React Fast Refresh <i>over the internet</i>).<p>Being able to ship quickly is valuable on its own, but Reflame&#x27;s true north star has always been to enable customers to ship quickly <i>with confidence</i>.<p>One way Reflame helps customers ship with more confidence today is by making previews with full production-parity available at every step of the development process. Previews in Reflame are accessible at the exact same URL customers will use to access the production deployment, instead of at a different subdomain for each preview (i.e. every preview is accessed through <a href="https:&#x2F;&#x2F;reflame.app" rel="nofollow">https:&#x2F;&#x2F;reflame.app</a> instead of at <a href="https:&#x2F;&#x2F;some-branch-of-reflamedotapp.reflame-previews.dev" rel="nofollow">https:&#x2F;&#x2F;some-branch-of-reflamedotapp.reflame-previews.dev</a>). Behind the scenes, this is implemented using session cookies that our CDN will check to determine which version of the app to serve.<p>This is only the tip of the iceberg. We have some really exciting prototypes around testing and typechecking that we&#x27;ve been exploring that could allow us to ship with even more confidence <i>without ever slowing us down</i>.<p>If any of this sounds interesting for the apps you&#x27;re building or planning to build (taking into account this comment (<a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=33134092" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=33134092</a>) below describing what Reflame is not well suited for), please sign up and give it a try!<p>I can&#x27;t wait to see what you’ll build with it! :)

17 comments

solardevover 2 years ago
This sounds really interesting and is a problem we were trying to solve just this week with Vercel!<p>However, I am having a hard time following what it&#x27;s actually doing under the hood. Aside from a single video, might you be willing to share some more details on the product page about how it works? I can&#x27;t tell what it&#x27;s doing, and I&#x27;m not inclined to randomly sign up for something without even having a high-level understanding...<p>Like when I push to Github, I understand that Vercel pulls the repo and does a yarn install and yarn build or whatever -- the same buildchain I use locally, just on their servers. Same with CircleCI.<p>Is that also what Reflame is doing? If so, what&#x27;s it doing differently that makes it faster? If not, how does it deal with node_modules installation and are there are any caveats there, like how does it deal with resolutions, lockfiles, private repos, etc.?<p>Or am I completely misunderstanding...? Is this some sort of content diffing engine &#x2F; hot reloader instead of a faster build pipeline? I&#x27;m not really sure I&#x27;m following, sorry :(<p>Just trying to understand what your product actually is and how it works :)
评论 #33135153 未加载
lewisl9029over 2 years ago
(posting some extras as comments since the original post is already way too long)<p>What&#x27;s the pricing going to be like?<p>Pricing is still very much a work in progress. Feedback from early customers will play a major factor here. Here&#x27;s my current thinking:<p>Reflame should be free to use for individuals deploying apps that live on the default *.reflame.dev subdomains. Deploying apps to custom domains will probably require a monthly fee, which will enable custom domains on all apps of the user (i.e. there won&#x27;t be an additional fee for having more than 1 app with custom domains). For organizations, there will be a simple monthly fee per member, for any number of apps with custom domains in that org.<p>I&#x27;m planning to avoid usage-based pricing for the deployment side of Reflame if at all possible, because I don’t think it leads to a good alignment of incentives. I don&#x27;t want to financially disincentivize customers from deploying as often as they want (within reasonable limits to protect against DoS), and I really don&#x27;t want to be financially disincentivized to make customers&#x27; deploys faster over time. Every usage-based CI platform out there benefits financially from our builds getting slower, so have no financial incentive to build anything to make them faster. I believe usage-based pricing for CI and the diametrically opposed incentives it introduced has been a huge driver of stagnation in the industry.
iLoveOncallover 2 years ago
I&#x27;m sorry but I honestly can&#x27;t think of a single real-life use case.<p>I do NOT want to instantly deploy to preview on a file save, and certainly not to production. And let&#x27;s not even talk about working as a team.<p>The only situation where I can think this is useful is if you write code locally but run your &quot;local&quot; version on a cloud machine. But in that case it&#x27;s already covered by rsync.<p>What am I missing?<p>&gt; Previews in Reflame are accessible at the exact same URL customers will use to access the production deployment, instead of at a different subdomain for each preview (i.e. every preview is accessed through <a href="https:&#x2F;&#x2F;reflame.app" rel="nofollow">https:&#x2F;&#x2F;reflame.app</a> instead of at <a href="https:&#x2F;&#x2F;some-branch-of-reflamedotapp.reflame-previews.dev" rel="nofollow">https:&#x2F;&#x2F;some-branch-of-reflamedotapp.reflame-previews.dev</a>). Behind the scenes, this is implemented using session cookies that our CDN will check to determine which version of the app to serve.<p>Also this sounds like the worst idea of the century for many reasons, including security, convenience, reliability, and much more.
评论 #33138463 未加载
ZephyrBluover 2 years ago
I find the tech really interesting, but I&#x27;m concerned about the business side.<p>I&#x27;ve also rebuilt a foundational level tool before and I think there are some critical problems with doing this.<p>---<p>Low level development becomes a massive bottleneck. Product development becomes really hard because you often have to touch low level stuff to do anything, which is generally not the kind of thing you can quickly iterate on.<p>For example, you mentioned that you only support CRA right now with support for Vite maybe coming soon. This seems really bad for adoption and it&#x27;s not something you can easily change because you have to rebuild this infrastructure <i>just to get people in the door</i>. You might do all this work to support a build system and then realize all those users have no interest in your product.<p>---<p>Even if low level development is isolated from product development, low level development is far more time consuming and harsh since correctness matters more. I found it very difficult to balance product development with low level development.<p>The questions I would be asking are:<p>- Who is actually going to pay for this and what does their build system look like?<p>- Are the people who I think are going to pay beating down my door when I tell them about my product?<p>If there is no clear build system(s) among people who might be paying customers I would be concerned, and if they are not very excited when I tell them about the product I would be doubly concerned because it seems like supporting a build system is high effort.<p>---<p>My point of view for rebuilding something foundational is now that it needs to enable something new that is extremely valuable. You are enabling deployments on file save, but is that extremely valuable to people? I honestly don&#x27;t think so. There might be another use case of this tech which is though.<p>An example of this is <a href="https:&#x2F;&#x2F;bun.sh" rel="nofollow">https:&#x2F;&#x2F;bun.sh</a>. He&#x27;s rebuilding a JS runtime which is a herculean task, but the goal is extremely clear and the outcome (A way faster runtime) is extremely valuable if he succeeds.<p>I feel like you should pick a single build system and validate the value prop with that first before adding multiple build systems, because otherwise you might be doing a lot of work for nothing.<p>PS: I really don&#x27;t like everything on the same domain. Subdomains seem preferable to me.
评论 #33137592 未加载
评论 #33137657 未加载
lewisl9029over 2 years ago
(posting some extras as comments since the original post is already way too long)<p>How does Reflame deploy so quickly?<p>Some major contributors:<p>- Reflame never does more work than absolutely necessary for any change. Every JS&#x2F;TS module deployed through Reflame is transformed and shipped as independent ES modules. Only modules that have never been seen before are transformed and deployed (taking advantage of content-addressing to simplify caching). This means Reflame isn&#x27;t just fast when our projects are small. It will stay just as fast as we scale to hundreds or thousands of modules. Because it will continue to do the minimum amount of work possible for every change.<p>- Reflame always deploys via the most direct possible path. A typical deploy of a trivial hello world project using a traditional CI service consists of: a git commit &amp; push from our laptops, waiting for a webhook from github, spinning up a VM or container, cloning the git repo, installing npm dependencies, transforming and bundling source code, and finally uploading the output. Each of these steps has a latency floor measured in seconds, adding up to 10s of seconds of latency to deploy even the smallest change. Compare that to a deploy with Reflame&#x27;s VSCode extension: we get a file change event, we upload the file, our server transforms it and stores the output for serving. Done.<p>- Reflame is completely region-agnostic. We haven&#x27;t yet figured out how to make light move faster in fiber optics, but we can lower the effective latency floor it imposes by having servers close to our users. Reflame lives in 3 regions today: 1 in western US, 1 in eastern US, 1 in central EU, and we&#x27;ll be adding more based on customer demand. Each region is a first class citizen. Updates in each region are visible immediately to users in that region, and replicated asynchronously to all others. We also have some magic in our CDN to ensure previews get routed to the originating region so customers can collaborate using previews across the world without dealing with replication delays.
deweyover 2 years ago
I just watched the video and I&#x27;m wondering about the fact that you don&#x27;t have preview URLs but instead have a cookie based way to differentiate a preview from the real production version.<p>Is that really something that makes it easier? Debugging which cookies are used, deleting specific cookies or sharing a specific preview version seems to be a lot harder that way? Or am I missing something?
评论 #33135109 未加载
评论 #33135205 未加载
评论 #33136586 未加载
tomgover 2 years ago
Very impressive!<p>I am curious about who your intended user is. I’m just thinking about how most FE build pipelines I’ve used have a bunch of “checks” like linters, running various tests, maybe reaching out to some other services when the build passes or fails.<p>Is the idea with this that the developer would do these steps locally? I also might just be misunderstanding this tool.<p>Thanks for sharing this :)
评论 #33135593 未加载
tylerchurchover 2 years ago
This looks super cool, very impressive!<p>How flexible is this?<p>I get the impression from the video that this will work for a blessed React configuration that you support.<p>But if I have a legacy React app with a complicated build setup - am I screwed?<p>Or if I want to deploy a Vue&#x2F;Vite app, would that require a huge engineering lift on your side since it’s not React?
评论 #33135750 未加载
vaughanover 2 years ago
Great idea. I usually run a dev server on a cloud instance and rsync to it and run pnpm install. In the future I want to do this for an entire monorepo. It’s amazing the waiting tax you pay for modern ci and paas stuff for non-prod stuff.
评论 #33136517 未加载
ianbutlerover 2 years ago
That&#x27;s really great, I could see your smirk when you said the bottleneck was how quickly you could create the PR because the deploy was already finished and you definitely deserve to be smiling :D
评论 #33137003 未加载
morelispover 2 years ago
&gt; Every JS&#x2F;TS module deployed through Reflame is transformed and shipped as independent ES modules<p>This means it&#x27;s impossible to do any cross-module type checking, correct?
评论 #33136621 未加载
aledalgrandeover 2 years ago
I don&#x27;t know if I&#x27;m gonna end up using Reflame for my projects, but that&#x27;s an impressive DX, you&#x27;ve really delivered there!
评论 #33137194 未加载
tuukkahover 2 years ago
Sounds this could be quicker than local development.<p>Something to check: When I click the button <i>&quot;Let&#x27;s create your first app&quot;</i>, I get <i>&quot;Oh no, something went horribly wrong!&quot;</i>
评论 #33136832 未加载
评论 #33136835 未加载
bradhiltonover 2 years ago
Very cool, I may use this for my next React project :)
lewisl9029over 2 years ago
(posting some extras as comments since the original post is already way too long)<p>What kinds of things should I not build with Reflame?<p>Reflame in its current state can only deploy client-rendered React apps. So it comes with the usual caveats with client-rendered React apps around poor SEO, requiring JS to render anything at all, and offering non-ideal first visit performance. Some examples of the kinds of things you probably shouldn&#x27;t use it for: marketing sites, ecommerce stores, social media sites, discussion forums, etc.<p>Reflame is hyper-focused on the use case of iterating as quickly as possible on product dashboard apps (like <a href="https:&#x2F;&#x2F;dashboard.brex.com" rel="nofollow">https:&#x2F;&#x2F;dashboard.brex.com</a>) that are usually locked behind a login that can&#x27;t be crawled by search engines, where most visits are repeat visits from existing users with a primed cache.<p>For this very specific (but still fairly common) use case, it has several rather unique value props that I&#x27;ve never seen offered anywhere else:<p>- Truly instant deploys, measured in milliseconds, regardless of how large your app becomes.<p>- Maximally efficient cache invalidation on updates, i.e. only modules that are updated (and the entry point html) are ever invalidated.<p>- Ability to preview changes as customers would see them exactly, down to the URL.<p>The second point is key to why apps built with Reflame will be fast in practice. Instead of cargo-culting lighthouse scores that emphasize empty-cache first visit performance which are few and far in between for this class of apps, Reflame focuses on what actually matters for this use case: maximizing cache granularity and minimizing cache invalidation in the face of frequent updates.<p>Every JS&#x2F;TS module deployed through Reflame is transformed and shipped as independent ES modules, served using content-addressed url references, with immutable, far-future cache headers, and loaded with maximum parallelism with HTTP&#x2F;2 through modulepreload links to flatten the module loading waterfall.<p>The content-addressed url references are translated using import maps instead of with url rewrites. This further minimizes write-amplification such that only the import map and the specific updated modules need to be updated, instead of having to update the updated modules and every dependent module recursively to the root (due to the content addressing), which would result in a potentially unbounded update latency ceiling and invalidation blast radius. We also create proxy modules for non-js resources such that they can be imported as string URLs, instead of rewriting the import statement, also in service of minimizing write-amplification.<p>All of this means that a user loading an app with built with Reflame a second time will only have to download the new html and specific, independent modules that have been updated since the first time, instead of a gigantic bundle of hundreds of KBs of JS every time any single module is updated.<p>However, the unfortunate reality today is, even with a fully flattened and parallelized module loading waterfall with HTTP&#x2F;2, there is still a tangible overhead to loading 100s of independent modules at once vs a handful of large bundled modules. I&#x27;m hopeful that dynamic server-side bundling with WebBundles might be able to offer the best of both worlds someday in the future, but today this is an unavoidable tradeoff.<p>So, fundamentally, an app built using Reflame trades off some efficiency of the initial empty-cache visit for the best possible efficiency of subsequent primed-cache visits, even in the face of frequent updates. As I mentioned in the first paragraph, this is not a great tradeoff for many common use cases (so you shouldn&#x27;t use Reflame for those use cases), but I do believe it is the ideal tradeoff we have available today for the kinds of apps I&#x27;m hoping to target with Reflame.
gervwykover 2 years ago
This is really impressive stuff! Congrats on the launch! Does this work for next.js apps?
评论 #33135862 未加载
jensneuseover 2 years ago
What about SSR?
评论 #33135823 未加载