<?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: Jeroen Boers</title>
    <description>The latest articles on DEV Community by Jeroen Boers (@universetwisters).</description>
    <link>https://dev.to/universetwisters</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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3823066%2F174e1570-edea-4259-9e31-14eb43e5ef7e.jpeg</url>
      <title>DEV Community: Jeroen Boers</title>
      <link>https://dev.to/universetwisters</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/universetwisters"/>
    <language>en</language>
    <item>
      <title>How and why I rebuilt my website from WordPress to EmDash</title>
      <dc:creator>Jeroen Boers</dc:creator>
      <pubDate>Fri, 03 Apr 2026 11:53:10 +0000</pubDate>
      <link>https://dev.to/universetwisters/how-and-why-i-rebuilt-my-website-from-wordpress-to-emdash-4pba</link>
      <guid>https://dev.to/universetwisters/how-and-why-i-rebuilt-my-website-from-wordpress-to-emdash-4pba</guid>
      <description>&lt;p&gt;For a long time, my website lived on WordPress with Elementor. That setup did something important for us: it made the site editable for my cofounder without needing me for every small change. That part genuinely mattered, and I do not want to pretend otherwise. When you are building something together, having a visual editor is useful. It lowers the barrier to making content changes, and it keeps the website from becoming "the developer’s problem" every single time something needs to be updated.&lt;/p&gt;

&lt;p&gt;Still, over time I noticed I was starting to avoid working on the site. Not because I had run out of ideas, but because improving it had become annoying in a very specific way. Every time I wanted to tweak styling, clean up layout, improve structure, or make broader SEO changes, I felt like I had to fight through layers of builder settings, theme behavior, and plugin logic. Nothing was impossible, but very little felt clean.&lt;/p&gt;

&lt;p&gt;That was the real problem for me. Elementor solved the editing problem, but it made the development side feel heavier and more opaque than I wanted. WordPress added to that feeling. Need a feature? Probably a plugin. Need another feature? Probably another plugin. Need to update everything? Hopefully nothing breaks. Even when things were working, the site often felt more fragile than it should have.&lt;/p&gt;

&lt;p&gt;At the same time, I had a pretty clear idea of how I wanted to work on the site going forward. I wanted the frontend to live in code again in a way that made sense to me. I wanted to improve design and SEO more systematically. I wanted to use AI tools and coding agents to help with real improvements, not just random copy suggestions. I wanted the site to feel like software again.&lt;/p&gt;

&lt;p&gt;That is what pushed me toward EmDash.&lt;/p&gt;

&lt;p&gt;What attracted me was not that it was new. I was not looking for novelty. I was looking for a setup that gave me a CMS without making the frontend feel like a black box. Once I decided to migrate, I realized pretty quickly that I did not want to treat it like a literal one-to-one port. I was not interested in dragging all of the old implementation details into a new system. What I wanted was to extract the important parts of the current site and rebuild it properly.&lt;/p&gt;

&lt;p&gt;That turned out to be the right mental model for the whole project.&lt;/p&gt;

&lt;h2&gt;
  
  
  The idea that made the migration manageable
&lt;/h2&gt;

&lt;p&gt;Instead of thinking, "How do I recreate my WordPress site in EmDash?", I started thinking, "How do I turn my current website into a specification?"&lt;/p&gt;

&lt;p&gt;That specification had a few parts:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;the visual style&lt;/li&gt;
&lt;li&gt;the exact routes I wanted to preserve&lt;/li&gt;
&lt;li&gt;the page types behind those routes&lt;/li&gt;
&lt;li&gt;the content itself&lt;/li&gt;
&lt;li&gt;the SEO rules I did not want to accidentally break&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Once I had those written down, the migration stopped feeling like a giant vague project and started feeling like a series of smaller, solvable tasks.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I actually did
&lt;/h2&gt;

&lt;p&gt;The process was more structured than glamorous. I did not open EmDash and start blindly building pages. I first tried to understand what my existing site actually was.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Extract the design language from the current site
&lt;/h3&gt;

&lt;p&gt;I started with a screenshot of my homepage. I sent that to ChatGPT and asked it to extract the site’s design system in a way that would be useful for implementation.&lt;/p&gt;

&lt;p&gt;I did not ask for generic design feedback. I asked for something practical.&lt;/p&gt;

&lt;p&gt;For reference, this is what we started out with:&lt;br&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.amazonaws.com%2Fuploads%2Farticles%2Fp1llw6hdjrmk70ysaf59.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.amazonaws.com%2Fuploads%2Farticles%2Fp1llw6hdjrmk70ysaf59.png" alt="For reference, this is what we started out with" width="800" height="617"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For example, this was the kind of prompt I used:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;I am rebuilding this website in a new stack.

Based only on this screenshot, extract the visual system in a way that an AI coding agent can use.

Please describe:
- primary, secondary, accent, background, surface, border, and muted colors
- typography style and likely heading hierarchy
- spacing rhythm
- button styles
- card styles
- border radius and shadow language
- what feels intentional in the design
- what should stay the same in a rebuild

Output as a markdown design-system document.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The output became a file in my project that looked something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gh"&gt;# Style system&lt;/span&gt;

&lt;span class="gu"&gt;## Colors&lt;/span&gt;
&lt;span class="p"&gt;-&lt;/span&gt; Primary: dark blue
&lt;span class="p"&gt;-&lt;/span&gt; Accent: green
&lt;span class="p"&gt;-&lt;/span&gt; Background: warm off-white
&lt;span class="p"&gt;-&lt;/span&gt; Surface: white
&lt;span class="p"&gt;-&lt;/span&gt; Borders: light gray
&lt;span class="p"&gt;-&lt;/span&gt; Text: near-black

&lt;span class="gu"&gt;## Typography&lt;/span&gt;
&lt;span class="p"&gt;-&lt;/span&gt; Modern sans-serif
&lt;span class="p"&gt;-&lt;/span&gt; Large bold headings
&lt;span class="p"&gt;-&lt;/span&gt; Clean readable body text
&lt;span class="p"&gt;-&lt;/span&gt; Friendly but product-focused tone

&lt;span class="gu"&gt;## UI style&lt;/span&gt;
&lt;span class="p"&gt;-&lt;/span&gt; Rounded buttons
&lt;span class="p"&gt;-&lt;/span&gt; Soft shadows
&lt;span class="p"&gt;-&lt;/span&gt; Generous spacing
&lt;span class="p"&gt;-&lt;/span&gt; Clean cards with subtle separation
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This sounds simple, but it helped a lot. It gave me a reference point that was more useful than "make it feel like the old site."&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Extract every route from the sitemap
&lt;/h3&gt;

&lt;p&gt;This was the SEO-sensitive part, and probably one of the most important steps in the whole migration.&lt;/p&gt;

&lt;p&gt;I took my sitemap or sitemaps from the WordPress site and sent them to ChatGPT with a prompt to extract all public routes and group them by type.&lt;/p&gt;

&lt;p&gt;Something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Here are my sitemap URLs.

Extract every indexable route and preserve the exact pathnames.

Group them by page type:
- homepage
- marketing page
- article
- article index
- category page
- author page
- legal page
- utility page

Also tell me:
- which routes should definitely stay identical for SEO
- which routes share a common template
- which pages are likely generated from the same content model

Output as a markdown route inventory.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That gave me a real inventory instead of a vague idea of what existed.&lt;/p&gt;

&lt;p&gt;A simplified version looked like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gh"&gt;# Route inventory&lt;/span&gt;

&lt;span class="gu"&gt;## Core pages&lt;/span&gt;
&lt;span class="p"&gt;-&lt;/span&gt; /
&lt;span class="p"&gt;-&lt;/span&gt; /about
&lt;span class="p"&gt;-&lt;/span&gt; /pricing
&lt;span class="p"&gt;-&lt;/span&gt; /contact

&lt;span class="gu"&gt;## Blog&lt;/span&gt;
&lt;span class="p"&gt;-&lt;/span&gt; /blog
&lt;span class="p"&gt;-&lt;/span&gt; /blog/my-first-post
&lt;span class="p"&gt;-&lt;/span&gt; /blog/another-post

&lt;span class="gu"&gt;## Categories&lt;/span&gt;
&lt;span class="p"&gt;-&lt;/span&gt; /category/shopify
&lt;span class="p"&gt;-&lt;/span&gt; /category/seo

&lt;span class="gu"&gt;## Legal&lt;/span&gt;
&lt;span class="p"&gt;-&lt;/span&gt; /privacy-policy
&lt;span class="p"&gt;-&lt;/span&gt; /terms-of-service
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This became one of my most important migration documents. It meant I had a clear list of what needed to survive the rebuild exactly as-is.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Reduce the site to page types
&lt;/h3&gt;

&lt;p&gt;Once I had the routes, I grouped them into templates. This step made the project feel much smaller.&lt;/p&gt;

&lt;p&gt;A site with 40 pages sounds like a lot. A site with 5 page types sounds very doable.&lt;/p&gt;

&lt;p&gt;My page types looked roughly like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gh"&gt;# Page types&lt;/span&gt;

&lt;span class="gu"&gt;## Homepage&lt;/span&gt;
Hero, supporting sections, trust, CTA, footer

&lt;span class="gu"&gt;## Standard page&lt;/span&gt;
Intro, flexible content blocks, CTA

&lt;span class="gu"&gt;## Article page&lt;/span&gt;
Title, metadata, article body, related content

&lt;span class="gu"&gt;## Article index&lt;/span&gt;
List/grid of articles with pagination or categories

&lt;span class="gu"&gt;## Simple content page&lt;/span&gt;
Minimal layout for legal or basic informational content
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This helped a lot when working with both Stitch and coding agents, because I was no longer asking for "all my pages." I was asking for a homepage template, an article template, a standard page template, and so on.&lt;/p&gt;

&lt;h2&gt;
  
  
  Using Stitch without letting it take over
&lt;/h2&gt;

&lt;p&gt;After I had a style document and route/page-type docs, I used them to create prompts for Google Stitch.&lt;/p&gt;

&lt;p&gt;The main thing that helped here was not using Stitch like a magical website generator. I treated it more like a design assistant for the major page types.&lt;/p&gt;

&lt;p&gt;So instead of asking it to rebuild the entire site, I would ask it for a strong homepage direction, or a clean article page layout, based on the style system I had already extracted.&lt;/p&gt;

&lt;p&gt;For example, for the homepage I would use a prompt like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Create a homepage for a modern software website.

Use the attached style-system document as the source of truth.
The tone should feel friendly, premium, and clear, not flashy.

Structure:
- hero
- proof or trust section
- problem/solution section
- feature grid
- how it works
- FAQ
- final CTA
- footer

This will later be implemented in Astro/EmDash, so keep it realistic and reusable.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For the article page, something more like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Create a long-form article page for a technical/product-focused site.

Requirements:
- strong readability
- generous whitespace
- good room for code examples
- metadata near the top
- optional table of contents
- related content section
- visually clean, not overdesigned

This will later be implemented in Astro/EmDash.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That gave me a nice starting point without making me feel locked into the generated result.&lt;/p&gt;

&lt;h2&gt;
  
  
  Setting up EmDash locally
&lt;/h2&gt;

&lt;p&gt;Once the planning was solid enough, I set up the new project locally.&lt;/p&gt;

&lt;p&gt;This was honestly one of the nicest parts of the migration. After spending enough time in WordPress and Elementor, being back in a normal project with files, structure, and code felt great.&lt;/p&gt;

&lt;p&gt;At a high level, the setup looked like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm create emdash@latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Or if you are working from the repo directly:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/emdash-cms/emdash.git
&lt;span class="nb"&gt;cd &lt;/span&gt;emdash
pnpm &lt;span class="nb"&gt;install
&lt;/span&gt;pnpm build
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After that, I chose a starting point, ran the site locally, and began shaping the frontend properly.&lt;/p&gt;

&lt;p&gt;The important thing here is that I did not start by rebuilding random pages. I started with the shared system.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I built first
&lt;/h2&gt;

&lt;p&gt;This is one of the parts where being a bit methodical saves a lot of time later.&lt;/p&gt;

&lt;p&gt;I started with the things that everything else depends on:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;layout shell&lt;/li&gt;
&lt;li&gt;header&lt;/li&gt;
&lt;li&gt;footer&lt;/li&gt;
&lt;li&gt;max-width containers&lt;/li&gt;
&lt;li&gt;typography rules&lt;/li&gt;
&lt;li&gt;button styles&lt;/li&gt;
&lt;li&gt;card styles&lt;/li&gt;
&lt;li&gt;spacing rules&lt;/li&gt;
&lt;li&gt;shared content sections&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That gave me a real visual foundation.&lt;/p&gt;

&lt;p&gt;Only after that did I start building actual page templates:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;homepage&lt;/li&gt;
&lt;li&gt;standard page&lt;/li&gt;
&lt;li&gt;article page&lt;/li&gt;
&lt;li&gt;article index&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Then I mapped real routes onto those templates.&lt;/p&gt;

&lt;p&gt;This order matters more than it sounds. If you start by generating pages one by one, especially with AI involved, you can end up with a weird pile of near-duplicate components. Starting with the shared design system keeps things much more sane.&lt;/p&gt;

&lt;h2&gt;
  
  
  Connecting Stitch MCP to Codex or Claude
&lt;/h2&gt;

&lt;p&gt;This was one of the parts I was most curious about going in, because it is where the workflow starts to become much more agent-friendly than a typical WordPress setup.&lt;/p&gt;

&lt;p&gt;In my case, I connected the Stitch MCP flow to Codex. The goal was not to let AI "take over the website." The goal was to give the coding agent enough structured context that it could actually be helpful.&lt;/p&gt;

&lt;p&gt;That context included:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the design-system file&lt;/li&gt;
&lt;li&gt;the route inventory&lt;/li&gt;
&lt;li&gt;the page-types document&lt;/li&gt;
&lt;li&gt;the project files themselves&lt;/li&gt;
&lt;li&gt;the Stitch output for the relevant page types&lt;/li&gt;
&lt;li&gt;the EmDash project conventions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The result was that I could ask the agent for very concrete work, like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Read:
- docs/migration/style-system.md
- docs/migration/routes.md
- docs/migration/page-types.md

Then:
- implement the homepage using reusable components
- preserve the exact homepage route
- keep spacing and typography aligned with the style document
- use the Stitch design only as inspiration, not as literal final code
- document anything unclear
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That worked much better than the kind of AI workflow I could have used in WordPress, because the system was much easier to reason about. The agent was operating on actual project files, not trying to untangle page-builder markup and plugin settings.&lt;/p&gt;

&lt;h2&gt;
  
  
  Put the migration docs inside the repo
&lt;/h2&gt;

&lt;p&gt;This was such a small thing, but it made the whole process better.&lt;/p&gt;

&lt;p&gt;I created a structure like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docs/
  migration/
    style-system.md
    routes.md
    page-types.md
    content-notes.md
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That meant the project itself contained the context for the migration.&lt;/p&gt;

&lt;p&gt;It also meant I was not constantly re-explaining everything to the agent. I could point it to files and say, "work from these." That makes a bigger difference than I expected.&lt;/p&gt;

&lt;h2&gt;
  
  
  Content migration: let the platform do the boring part
&lt;/h2&gt;

&lt;p&gt;For content itself, I tried to be practical.&lt;/p&gt;

&lt;p&gt;I did not want to manually recreate every article or page using AI. That sounded slow, error-prone, and generally miserable. The much better approach was to let EmDash handle the WordPress content migration path where possible, then use AI for the work around it.&lt;/p&gt;

&lt;p&gt;That meant AI was helping with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;structure&lt;/li&gt;
&lt;li&gt;prompts&lt;/li&gt;
&lt;li&gt;route mapping&lt;/li&gt;
&lt;li&gt;template recreation&lt;/li&gt;
&lt;li&gt;cleanup&lt;/li&gt;
&lt;li&gt;implementation&lt;/li&gt;
&lt;li&gt;content QA&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Instead of helping with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;manually copying article number 37 into a new file at 1 AM&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That split felt right to me.&lt;/p&gt;

&lt;h2&gt;
  
  
  The actual guide part: how I would recommend doing this
&lt;/h2&gt;

&lt;p&gt;If you want the short version of the process, this is the order I would recommend.&lt;/p&gt;

&lt;h3&gt;
  
  
  Migration checklist
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;export or document the current site&lt;/li&gt;
&lt;li&gt;capture the visual style from screenshots&lt;/li&gt;
&lt;li&gt;extract all routes from the sitemap&lt;/li&gt;
&lt;li&gt;group routes into page types&lt;/li&gt;
&lt;li&gt;generate page-type directions in Stitch&lt;/li&gt;
&lt;li&gt;set up EmDash locally&lt;/li&gt;
&lt;li&gt;add migration docs into the repo&lt;/li&gt;
&lt;li&gt;build shared layout and components first&lt;/li&gt;
&lt;li&gt;build templates second&lt;/li&gt;
&lt;li&gt;migrate content&lt;/li&gt;
&lt;li&gt;map every old route to a real page&lt;/li&gt;
&lt;li&gt;QA the result before launch&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Minimal file structure that worked well for me
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my-site/
  docs/
    migration/
      style-system.md
      routes.md
      page-types.md
      content-notes.md
  src/
    components/
    layouts/
    pages/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Example of a practical migration prompt for an agent
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Read these files first:
- docs/migration/style-system.md
- docs/migration/routes.md
- docs/migration/page-types.md

Goal:
Rebuild the current WordPress site in EmDash while preserving existing public routes.

Rules:
- preserve route paths exactly unless documented otherwise
- build reusable components instead of one-off page sections
- keep the visual style aligned with style-system.md
- recreate templates first, then wire up routes
- document any route or content mismatch
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Example of a good sanity-check list before launch
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="p"&gt;-&lt;/span&gt; [ ] homepage rebuilt
&lt;span class="p"&gt;-&lt;/span&gt; [ ] standard page template rebuilt
&lt;span class="p"&gt;-&lt;/span&gt; [ ] article template rebuilt
&lt;span class="p"&gt;-&lt;/span&gt; [ ] blog index rebuilt
&lt;span class="p"&gt;-&lt;/span&gt; [ ] important routes preserved exactly
&lt;span class="p"&gt;-&lt;/span&gt; [ ] metadata checked
&lt;span class="p"&gt;-&lt;/span&gt; [ ] internal links checked
&lt;span class="p"&gt;-&lt;/span&gt; [ ] redirects added if needed
&lt;span class="p"&gt;-&lt;/span&gt; [ ] content imported
&lt;span class="p"&gt;-&lt;/span&gt; [ ] mobile layout checked
&lt;span class="p"&gt;-&lt;/span&gt; [ ] forms and CTAs tested
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  What changed for me after the rebuild
&lt;/h2&gt;

&lt;p&gt;The biggest difference is that the website now feels like something I can actually work on properly again.&lt;/p&gt;

&lt;p&gt;That might sound obvious, but it is hard to overstate how much better that feels. If I want to improve the design system, I can do that in code. If I want to improve internal linking, metadata handling, or article layout, I can do that in code too. If I want AI to help me identify weak pages, improve templates, or suggest structural changes, I can point it at a system that actually makes sense.&lt;/p&gt;

&lt;p&gt;That was really the whole point of the migration.&lt;/p&gt;

&lt;p&gt;I was not trying to make the site dramatically different for the sake of it. I was trying to make it easier to own, easier to improve, and less annoying to work on.&lt;/p&gt;

&lt;h2&gt;
  
  
  A few things I would do the same way again
&lt;/h2&gt;

&lt;p&gt;A few parts of this process were much more helpful than I expected:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;extracting the style system before touching code&lt;/li&gt;
&lt;li&gt;extracting all routes before touching code&lt;/li&gt;
&lt;li&gt;thinking in page types instead of individual pages&lt;/li&gt;
&lt;li&gt;keeping migration docs inside the repo&lt;/li&gt;
&lt;li&gt;building the shared system before the templates&lt;/li&gt;
&lt;li&gt;using AI for structure and implementation help, not for blind content recreation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Those were the parts that made the migration feel controlled instead of chaotic.&lt;/p&gt;

&lt;h2&gt;
  
  
  A few things I would avoid
&lt;/h2&gt;

&lt;p&gt;There are also a few traps I would try to avoid if I had to do it again.&lt;/p&gt;

&lt;p&gt;I would not start by trying to recreate every page exactly, one by one. That is a good way to turn the project into a slog.&lt;/p&gt;

&lt;p&gt;I would not let design tools generate production structure without checking whether the result is actually reusable.&lt;/p&gt;

&lt;p&gt;I would not casually change routes during the migration just because a different URL pattern looks nicer.&lt;/p&gt;

&lt;p&gt;And I definitely would not keep all the important migration context in my head or in random chat tabs. Writing it down inside the project is worth the small effort.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final thoughts
&lt;/h2&gt;

&lt;p&gt;I do not think WordPress and Elementor are bad tools. They solved real problems for us at a certain stage. My cofounder could edit the site visually, and that was useful. But eventually I wanted something that gave me more control, less black-box behavior, and a better foundation for improving the website over time.&lt;/p&gt;

&lt;p&gt;That is what made this migration worth it for me.&lt;/p&gt;

&lt;p&gt;The interesting part was not just moving to a new CMS. The interesting part was changing the shape of the work. Instead of treating the old website as something I had to keep patching, I treated it as something I could analyze, document, and rebuild properly.&lt;/p&gt;

&lt;p&gt;That made the whole process much less intimidating than I expected.&lt;/p&gt;

&lt;p&gt;And maybe that is the nicest surprise in projects like this. Once you stop thinking of a migration as one giant leap and start treating it like a series of very boring, very clear steps, it becomes a lot more doable.&lt;/p&gt;

&lt;p&gt;If you want to check out what we're building (the old site) go to &lt;a href="https://addora.app" rel="noopener noreferrer"&gt;https://addora.app&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I'll be rolling out the new app this afternoon, and I'm super excited about it!&lt;/p&gt;

</description>
      <category>devjournal</category>
      <category>showdev</category>
      <category>webdev</category>
      <category>wordpress</category>
    </item>
    <item>
      <title>Next.js 16.2 Shows What an AI-Native Framework Actually Looks Like</title>
      <dc:creator>Jeroen Boers</dc:creator>
      <pubDate>Tue, 24 Mar 2026 09:41:36 +0000</pubDate>
      <link>https://dev.to/universetwisters/nextjs-162-shows-what-an-ai-native-framework-actually-looks-like-1gkj</link>
      <guid>https://dev.to/universetwisters/nextjs-162-shows-what-an-ai-native-framework-actually-looks-like-1gkj</guid>
      <description>&lt;h2&gt;
  
  
  Are people moving away from Next.js, or just getting less patient with it?
&lt;/h2&gt;

&lt;p&gt;Over the past year, the mood around Next.js has shifted. It is still widely used, but the excitement is more mixed than it used to be. A lot of developers have become frustrated with the size of the framework’s mental model, especially around the App Router, caching, rendering boundaries, and the growing number of rules you need to keep in your head to understand why something behaves the way it does. Some teams have moved away from it entirely, usually for reasons that have less to do with ideology and more to do with local development performance or the feeling that too much of the framework has become implicit.&lt;/p&gt;

&lt;p&gt;I understand that reaction. Next.js is not a lightweight layer over React anymore. It is a full application runtime with strong opinions about rendering, data fetching, caching, bundling, and deployment. That makes it more capable, but it also makes it easier to feel like you are working inside a large system rather than a simple library.&lt;/p&gt;

&lt;p&gt;Even so, I still enjoy working with it. When Next.js is moving in the right direction, it solves a real problem: how to build React applications with strong full-stack defaults without spending half your time assembling the stack yourself. That is why Next.js 16.2 stands out to me. Not because it makes the framework simple again, but because it shows a more coherent direction.&lt;/p&gt;

&lt;h2&gt;
  
  
  The performance side still matters
&lt;/h2&gt;

&lt;p&gt;The obvious part of the release is performance. Next.js 16.2 puts real emphasis on making the development loop faster, especially through Turbopack. That matters more than many framework discussions admit. A complicated framework becomes much harder to tolerate when every change takes too long to rebuild, reload, or stabilize.&lt;/p&gt;

&lt;p&gt;If local startup is slow and feedback is delayed, the cost is not just inconvenience. It changes how willing developers are to experiment, refactor, or investigate problems properly. A framework that wants to own more of the application stack has to earn that by keeping the loop tight.&lt;/p&gt;

&lt;h2&gt;
  
  
  The more important shift is legibility
&lt;/h2&gt;

&lt;p&gt;That is only half of what makes 16.2 interesting, though. The more important change is that Next.js is starting to expose the project in a way that makes it easier for an AI agent to operate on it without guessing. That is a more meaningful shift than simply adding some assistant tooling.&lt;/p&gt;

&lt;p&gt;It changes the assumptions behind the framework. Instead of treating the codebase as something only a human developer will inspect directly, Next.js now assumes that another system may enter the repository, read local instructions, inspect runtime signals, and make changes based on structured context rather than intuition.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;AGENTS.md&lt;/code&gt; is a small file with a big implication
&lt;/h2&gt;

&lt;p&gt;The clearest example is &lt;code&gt;AGENTS.md&lt;/code&gt;. New projects now include this file by default, and the default rule is deliberately direct: before doing any Next.js work, read the relevant docs from &lt;code&gt;node_modules/next/dist/docs/&lt;/code&gt;, because the installed docs are the source of truth and training data may be outdated.&lt;/p&gt;

&lt;p&gt;That is a small detail, but it says something important about the design. The framework is no longer assuming that broad prior knowledge is good enough. It is pushing both humans and agents toward local, version-matched documentation instead of relying on memory or stale examples.&lt;/p&gt;

&lt;h2&gt;
  
  
  Local docs beat vague prior knowledge
&lt;/h2&gt;

&lt;p&gt;That is a technically sensible move. One of the main failure modes in AI-assisted development is version drift. A model may understand a framework well in the abstract while still being wrong about the exact behavior of the version that is installed.&lt;/p&gt;

&lt;p&gt;In a framework like Next.js, where small differences in caching, routing, or rendering semantics can matter a lot, that kind of mistake is expensive. Shipping the docs with the package and explicitly telling the agent to read them first is a practical way of reducing that risk. It turns framework knowledge from something probabilistic into something grounded in the actual dependency tree.&lt;/p&gt;

&lt;h2&gt;
  
  
  Shared debugging surfaces matter
&lt;/h2&gt;

&lt;p&gt;The same pattern shows up in the new logging and debugging changes. Browser logs can now be forwarded to the terminal during development, which matters because an agent operating mostly through the shell does not have natural access to the browser console.&lt;/p&gt;

&lt;p&gt;That sounds minor until you think about how much frontend debugging depends on signals that exist only in the browser. If those signals remain trapped in a context the agent cannot see, then the agent is forced to work from indirect descriptions. Moving that information into the terminal makes it part of a shared debugging surface for both people and tools.&lt;/p&gt;

&lt;h2&gt;
  
  
  The dev server state is becoming explicit
&lt;/h2&gt;

&lt;p&gt;The new dev server lock file is another good example. When a development server is already running, Next.js now records structured information about that process, including things like PID and port, and uses it to avoid the familiar mess of duplicate dev servers started in the same project.&lt;/p&gt;

&lt;p&gt;For a human developer, that is a nice quality-of-life improvement. For an agent, it is more important than that. Agents are much more likely to blindly start processes unless the environment tells them clearly what already exists. A file like that is not flashy, but it is exactly the kind of operational detail an AI-native workflow needs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Browser-aware tooling changes the shape of debugging
&lt;/h2&gt;

&lt;p&gt;The experimental browser-aware tooling pushes the same idea further. Instead of forcing an agent to reason about the state of the application from code alone, Next.js is beginning to expose browser context, diagnostics, and framework-level information in a structured way.&lt;/p&gt;

&lt;p&gt;That matters because many of the hardest frontend problems are not purely static code problems. They involve the relationship between server-rendered output, hydration, client state, network behavior, and framework internals. If the framework can make that state inspectable in a machine-usable form, then automated assistance becomes much more reliable.&lt;/p&gt;

&lt;h2&gt;
  
  
  What “AI-native” should mean
&lt;/h2&gt;

&lt;p&gt;This is why I think “AI-native framework” is the right description here. A framework with AI features could just mean some code generation layered on top of the existing product. That is not very interesting.&lt;/p&gt;

&lt;p&gt;An AI-native framework is different. It changes the environment so that a machine actor has access to the same kinds of grounding mechanisms that serious human workflows depend on: local documentation, explicit repository instructions, shared diagnostics, and machine-readable operational state. The point is not to make the framework generate more code. The point is to make it possible for automated systems to act with fewer blind spots.&lt;/p&gt;

&lt;h2&gt;
  
  
  Performance and legibility are the same story
&lt;/h2&gt;

&lt;p&gt;I also think this fits naturally with the performance work in 16.2. Faster rebuilds and faster refreshes reduce mechanical latency. Files like &lt;code&gt;AGENTS.md&lt;/code&gt;, bundled docs, terminal-forwarded logs, and structured dev server state reduce interpretive latency.&lt;/p&gt;

&lt;p&gt;One makes it faster to test a change. The other makes it easier to understand what should be changed in the first place. Those are different problems, but they reinforce each other. If a framework is going to be used in workflows where humans and agents collaborate, both kinds of latency matter.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I still like working with Next.js
&lt;/h2&gt;

&lt;p&gt;None of this means the criticism of Next.js goes away. The framework is still complex, and many of the frustrations people have with it are reasonable. It still asks developers to understand a lot of framework behavior that is not obvious at first glance.&lt;/p&gt;

&lt;p&gt;But 16.2 is interesting because it does not respond to that situation with more abstraction or more marketing language. It responds by making the system more observable, more explicit, and faster to work with. That is a much better direction.&lt;/p&gt;

&lt;p&gt;That is also why I still like working with Next.js even while understanding why some people are leaving it. The framework is at its best when it reduces accidental complexity without hiding too much of the real model. For a while, it felt like Next.js risked becoming both more powerful and less legible at the same time.&lt;/p&gt;

&lt;p&gt;What is notable about 16.2 is that it pushes back against that. It suggests that framework design is no longer only about rendering strategy or bundler speed. It is also about whether the project can explain itself clearly enough for both a developer and an agent to work on it without constantly guessing.&lt;/p&gt;

&lt;h2&gt;
  
  
  What do you think?
&lt;/h2&gt;

&lt;p&gt;Are we looking at a genuinely better direction for frontend frameworks here, or just a more sophisticated way of managing growing complexity? And if you are still using Next.js, does 16.2 make you more confident in where it is going, or not really?&lt;/p&gt;

</description>
      <category>nextjs</category>
      <category>ai</category>
      <category>programming</category>
      <category>webdev</category>
    </item>
    <item>
      <title>A beginner’s guide to setting up your first Shopify app using Ruby on Rails</title>
      <dc:creator>Jeroen Boers</dc:creator>
      <pubDate>Sat, 21 Mar 2026 15:48:46 +0000</pubDate>
      <link>https://dev.to/universetwisters/a-beginners-guide-to-setting-up-your-first-shopify-app-using-ruby-on-rails-707</link>
      <guid>https://dev.to/universetwisters/a-beginners-guide-to-setting-up-your-first-shopify-app-using-ruby-on-rails-707</guid>
      <description>&lt;p&gt;Hi there, my name is Jeroen, and this is my first article on dev.to.&lt;/p&gt;

&lt;p&gt;I am a Senior Ruby on Rails developer, and over time I have ended up building quite a few Shopify apps. If you are curious about Shopify app development and have at least touched Ruby on Rails before, this article should be a nice starting point.&lt;/p&gt;

&lt;p&gt;We are not going to discuss every possible concept around Shopify apps yet. That would just make this article much longer and more confusing than it needs to be.&lt;/p&gt;

&lt;p&gt;Instead, we are going to do the most important thing first:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;set up a brand new Shopify app using Ruby on Rails and get it running locally.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This article can serve as a reference if you just want to get your first app up and running and have a look around.&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;For this guide, I am assuming a few things:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;you already have Ruby on Rails installed&lt;/li&gt;
&lt;li&gt;you already have Node.js installed&lt;/li&gt;
&lt;li&gt;you already have Git installed&lt;/li&gt;
&lt;li&gt;you are comfortable using your terminal&lt;/li&gt;
&lt;li&gt;you have a Shopify Partner account and a development store&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You do &lt;strong&gt;not&lt;/strong&gt; need to be deeply experienced with Rails yet. It is enough if you roughly know what Rails is and how to run commands in a project.&lt;/p&gt;

&lt;p&gt;If you do not have the Shopify side set up yet, you will need a Partner account and a development store before you can properly install and test your app.&lt;/p&gt;

&lt;p&gt;For this guide, we are going to use Shopify’s maintained Ruby app template. This is currently one of the nicest ways to get started quickly, because it already includes a Rails backend, Shopify authentication, session storage, Admin API access, and webhook support. The template does also include a React frontend, but that is fine. We can mostly treat that as already wired up for us while we focus on the Rails side first.&lt;/p&gt;

&lt;h2&gt;
  
  
  Part 1: Installing Shopify CLI
&lt;/h2&gt;

&lt;p&gt;Before we create the app, we need Shopify CLI.&lt;/p&gt;

&lt;p&gt;Shopify CLI is the command line tool that helps create Shopify apps, manage app extensions, create tunnels for local development, and connect your local project to Shopify.&lt;/p&gt;

&lt;p&gt;You can install it globally by running:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; @shopify/cli@latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Once that is done, it is a good idea to check if it worked:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;shopify version
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If that gives you a version number, you are good to go.&lt;/p&gt;

&lt;h2&gt;
  
  
  Part 2: Creating the app
&lt;/h2&gt;

&lt;p&gt;Now that we have Shopify CLI installed, we can use Shopify’s Ruby template to create our app.&lt;/p&gt;

&lt;p&gt;Run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;shopify app init &lt;span class="nt"&gt;--template&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;https://github.com/Shopify/shopify-app-template-ruby
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The template is specifically for building a Shopify app using Ruby on Rails and React.&lt;/p&gt;

&lt;p&gt;The CLI will ask you a few questions while setting everything up. Just follow along and choose a name for your app.&lt;/p&gt;

&lt;p&gt;Once it is done, navigate into the folder it created:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;your-app-name
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You now have a Shopify app on your machine.&lt;/p&gt;

&lt;h2&gt;
  
  
  Part 3: Starting the app locally
&lt;/h2&gt;

&lt;p&gt;This is the nice part.&lt;/p&gt;

&lt;p&gt;From the root of your new app, run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;shopify app dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When you run this for the first time, Shopify CLI will guide you through connecting the project to an app and development store.&lt;/p&gt;

&lt;p&gt;After a bit of setup, it will print a URL in the terminal.&lt;/p&gt;

&lt;p&gt;Open that URL in your browser and install the app on your development store.&lt;/p&gt;

&lt;p&gt;At that point, your app should be running.&lt;/p&gt;

&lt;p&gt;That is already a big step. A lot of the mystery disappears once you have a real app running and can click around in it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Part 4: What we just created
&lt;/h2&gt;

&lt;p&gt;It helps to understand what this template already gave us.&lt;/p&gt;

&lt;p&gt;Shopify’s Ruby template comes with these things out of the box:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;OAuth for app installation and permissions&lt;/li&gt;
&lt;li&gt;GraphQL Admin API access&lt;/li&gt;
&lt;li&gt;REST Admin API access&lt;/li&gt;
&lt;li&gt;webhooks&lt;/li&gt;
&lt;li&gt;the &lt;code&gt;shopify_app&lt;/code&gt; Rails engine&lt;/li&gt;
&lt;li&gt;the &lt;code&gt;shopify_api&lt;/code&gt; gem&lt;/li&gt;
&lt;li&gt;session storage through Rails / ActiveRecord&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That sounds like a lot, but really it just means a bunch of the annoying setup work has already been done for us.&lt;/p&gt;

&lt;p&gt;This is exactly why I like starting from the template instead of wiring everything by hand in a first guide.&lt;/p&gt;

&lt;h2&gt;
  
  
  Part 5: Having a look around the project
&lt;/h2&gt;

&lt;p&gt;Now that the app is running, let’s have a quick look at some of the files and folders you will actually care about in the beginning.&lt;/p&gt;

&lt;p&gt;We are not going to discuss every file. That would be a bit much for now.&lt;/p&gt;

&lt;h3&gt;
  
  
  The &lt;code&gt;shopify.app.toml&lt;/code&gt; file
&lt;/h3&gt;

&lt;p&gt;This file is very important.&lt;/p&gt;

&lt;p&gt;Shopify CLI uses it as part of the conventional app structure for Shopify apps. It holds app configuration that Shopify CLI uses when running and managing the app.&lt;/p&gt;

&lt;p&gt;You do not need to fully understand it yet, but it is good to know that this file is one of the central pieces that connects your local app to Shopify CLI.&lt;/p&gt;

&lt;h3&gt;
  
  
  The &lt;code&gt;web&lt;/code&gt; folder
&lt;/h3&gt;

&lt;p&gt;This is where the actual web app lives.&lt;/p&gt;

&lt;p&gt;In the Ruby template, Rails builds the backend, and the frontend lives inside this same project structure.&lt;/p&gt;

&lt;p&gt;This means that when you want to look at the application code, this is where you will spend most of your time.&lt;/p&gt;

&lt;h3&gt;
  
  
  The &lt;code&gt;web/app/controllers&lt;/code&gt; folder
&lt;/h3&gt;

&lt;p&gt;This folder contains controllers.&lt;/p&gt;

&lt;p&gt;If you are new to Rails, a controller is basically the part that receives a request and decides what should happen next.&lt;/p&gt;

&lt;p&gt;In a Shopify app, this might mean:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;returning data to the frontend&lt;/li&gt;
&lt;li&gt;handling an action from the merchant&lt;/li&gt;
&lt;li&gt;talking to Shopify through the API&lt;/li&gt;
&lt;li&gt;calling a service object&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You do not need to master controllers yet. Just know that they often act as the entry point for requests.&lt;/p&gt;

&lt;h3&gt;
  
  
  The &lt;code&gt;web/app/services&lt;/code&gt; folder
&lt;/h3&gt;

&lt;p&gt;This is often where you put code that does the actual work.&lt;/p&gt;

&lt;p&gt;For example, instead of putting a lot of logic directly inside a controller, you might move that logic into a service object.&lt;/p&gt;

&lt;p&gt;That can make the app easier to read, because the controller stays smaller and the heavier logic lives somewhere more focused.&lt;/p&gt;

&lt;p&gt;So a simple way to think about it is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;controllers receive the request&lt;/li&gt;
&lt;li&gt;services do the work&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That is not a perfect description of every Rails app, but it is a very helpful starting point.&lt;/p&gt;

&lt;h3&gt;
  
  
  The &lt;code&gt;web/config&lt;/code&gt; folder
&lt;/h3&gt;

&lt;p&gt;This is where your routes and general configuration live.&lt;/p&gt;

&lt;p&gt;The routes file is especially useful early on, because it helps you understand what URLs in your app go where.&lt;/p&gt;

&lt;p&gt;If you are still new to Rails, &lt;code&gt;routes.rb&lt;/code&gt; is a very nice file to open because it gives you a map of the app.&lt;/p&gt;

&lt;h2&gt;
  
  
  Part 6: Making your first small change
&lt;/h2&gt;

&lt;p&gt;At this point, I like making one tiny change just to get comfortable.&lt;/p&gt;

&lt;p&gt;You can, for example, open the project in your editor and start by looking at:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;web/config/routes.rb&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;web/app/controllers&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;web/app/services&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You do not need to fully understand the whole app yet.&lt;/p&gt;

&lt;p&gt;Just get used to the fact that underneath the Shopify-specific tooling, there is still a Rails app in there.&lt;/p&gt;

&lt;p&gt;That is one of the most helpful mindset shifts in the beginning.&lt;/p&gt;

&lt;p&gt;A Shopify app is not some completely magical thing.&lt;/p&gt;

&lt;p&gt;It is a web application with Shopify-specific authentication, API access, and extension points.&lt;/p&gt;

&lt;h2&gt;
  
  
  Part 7: Making your first Shopify API call
&lt;/h2&gt;

&lt;p&gt;Once your app is running, the next fun step is making a Shopify API call.&lt;/p&gt;

&lt;p&gt;The Ruby template points to built-in examples for this, including Admin GraphQL and Admin REST API requests.&lt;/p&gt;

&lt;p&gt;The current basic shape of an Admin GraphQL client looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="n"&gt;client&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;ShopifyAPI&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Clients&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Graphql&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Admin&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;new&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="ss"&gt;session: &lt;/span&gt;&lt;span class="n"&gt;session&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;query&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="ss"&gt;query: &lt;/span&gt;&lt;span class="n"&gt;query&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That is the core shape you will keep seeing when you make authenticated Admin API requests from Ruby.&lt;/p&gt;

&lt;p&gt;You do not need to understand every part of this line right away.&lt;/p&gt;

&lt;p&gt;For now, the main thing to notice is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;a client is created&lt;/li&gt;
&lt;li&gt;that client uses the current Shopify session&lt;/li&gt;
&lt;li&gt;a query is sent to Shopify&lt;/li&gt;
&lt;li&gt;a response comes back&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That is the basic loop.&lt;/p&gt;

&lt;p&gt;For a first day, I would not try to build a giant feature yet.&lt;/p&gt;

&lt;p&gt;I would simply:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;get the app running&lt;/li&gt;
&lt;li&gt;find one example API call&lt;/li&gt;
&lt;li&gt;follow how the request flows through the Rails app&lt;/li&gt;
&lt;li&gt;make one small change and see what happens&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That is enough to start building intuition.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;We now have a Shopify app running locally using Ruby on Rails.&lt;/p&gt;

&lt;p&gt;That is already a really nice place to start.&lt;/p&gt;

&lt;p&gt;We installed Shopify CLI, created a new app from Shopify’s Ruby template, ran it locally, installed it on a development store, and had a quick look at the parts of the project that matter most in the beginning.&lt;/p&gt;

&lt;p&gt;At this point, the best thing you can do is just spend a bit of time clicking around, opening files, and getting comfortable with the shape of the app. Once you see that it is still just a Rails application with some Shopify-specific pieces around it, things start feeling much more approachable.&lt;/p&gt;

&lt;p&gt;I write more about Ruby on Rails, Shopify, and building practical things for merchants on &lt;strong&gt;Instasupport&lt;/strong&gt;, so if you want more guides like this, you can find them for free with no ads and no paywall here: &lt;a href="https://instasupport.io/guides" rel="noopener noreferrer"&gt;Instasupport.io Guides&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>rails</category>
      <category>ruby</category>
      <category>ecommerce</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
