<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: tarun</title>
    <description>The latest articles on DEV Community by tarun (@tarun-singh).</description>
    <link>https://dev.to/tarun-singh</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4006398%2F6c0c495c-6be6-470a-ae41-15e06bcc3af5.jpg</url>
      <title>DEV Community: tarun</title>
      <link>https://dev.to/tarun-singh</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/tarun-singh"/>
    <language>en</language>
    <item>
      <title>Shipping one codebase to web, Android, and Windows with Next.js and Capacitor</title>
      <dc:creator>tarun</dc:creator>
      <pubDate>Sun, 28 Jun 2026 11:48:04 +0000</pubDate>
      <link>https://dev.to/tarun-singh/shipping-one-codebase-to-web-android-and-windows-with-nextjs-and-capacitor-387k</link>
      <guid>https://dev.to/tarun-singh/shipping-one-codebase-to-web-android-and-windows-with-nextjs-and-capacitor-387k</guid>
      <description>&lt;p&gt;GumStory runs the same Next.js web app on the web, on Android, and on Windows. One early decision made that possible: keep a single codebase and wrap it instead of building three separate apps. Here's roughly how it works, and the parts that were tricky.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8xxxvyq06ohry7cfvi0p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8xxxvyq06ohry7cfvi0p.png" alt=" " width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The setup
&lt;/h2&gt;

&lt;p&gt;The product is a normal Next.js app. For the mobile and desktop builds, Capacitor wraps it, loading the web app inside a native shell and exposing native APIs where needed.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fayo15tseotvqwjonpphj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fayo15tseotvqwjonpphj.png" alt=" " width="800" height="500"&gt;&lt;/a&gt;&lt;br&gt;
The model that makes this manageable: the web app is the source of truth, and the native builds are thin shells pointing at it. So most features just work everywhere, and platform-specific code is only needed at the edges.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fm1w5axj8pcy8newk3gew.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fm1w5axj8pcy8newk3gew.png" alt=" " width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Where it gets interesting
&lt;/h2&gt;

&lt;p&gt;A few areas needed real platform handling:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fq830pmfvyxzwj2hxpkyx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fq830pmfvyxzwj2hxpkyx.png" alt=" " width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Knowing where the app is running. Checking the Capacitor user agent lets the app behave a little differently inside the native shell versus a normal browser tab, for example on the launch screen.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;OAuth on mobile. This was the hardest part. A login flow that opens an external browser does not automatically return to the app. It needs a custom URL scheme and deep links so the native app actually receives the callback, instead of stranding the user in Chrome.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fk3sboyqnt8shb0zie36o.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fk3sboyqnt8shb0zie36o.png" alt=" " width="800" height="297"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Builds. Web deploys normally, Android ships through the Play Store, Windows through the Microsoft Store, all on the same web bundle.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Worth it?
&lt;/h2&gt;

&lt;p&gt;For a small team, yes. A feature written once shows up on three platforms. The cost is the occasional sharp edge like the OAuth flow, but that beats maintaining three apps forever.&lt;/p&gt;

&lt;p&gt;GumStory itself is a workspace for planning sprints, running tests, and auto-generating daily status reports. It's at &lt;a href="https://gumstory.com" rel="noopener noreferrer"&gt;https://gumstory.com&lt;/a&gt; if it's useful to anyone. Questions about the Capacitor side are welcome in the comments.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>productivity</category>
      <category>showdev</category>
      <category>nextjs</category>
    </item>
  </channel>
</rss>
