How I ended up making a JAMstack app on Rails & Vue

"I WON!" I felt like a lottery winner when I finally made an API-first app. One that works not just in local but in production, out in the real world. It’s a todo list app, with Ruby on Rails REST API as backend, and a Vue.js app as frontend to fetch data from the API.

But amongst tech stacks, this has got to be one of the weirder combinations. Pairing Vue with Node, yeah more normal. Or any of the more recent and modern frameworks to handle the backend server. Rails is usually thought of as a monolith, not quite for JAMstack. So how did I come to this combo?

From Rails to JAMstack to Vue

When I discovered JAMstack, I knew it in my gut (even though I’m a coding noob at that time) that I want to explore this tech stack for making web apps, and eventually my SaaS. But I didn’t know how to get there. I dabbled with Stackbit then and it was such a great way to slowly orientate myself to JAMstack, since you can literally spin up a JAMstack website in minutes using Stackbit. I made tiny customizations to the template, slowly begin to read a little JSX/React/Gatsby, how everything connected together.

But how do I make an API, and which frontend framework should I use to fetch data from it? I knew a bit of Ruby on Rails by then (from my learning to code journey the year before), and I always felt that creating a backend on Rails felt within my reach. It wasn’t as scary as using other frameworks. And I’d done it with Rails before already. So I decided to go for Rails as my backend framework of choice.

Then I (re-)started my journey of learning how to code, this time with Vue.js. AN hour of code everyday. Just start. I got inspired by what @dannypostmaa was doing with his product Headlime. He also didn’t know how to code eight months ago! When asked, he said he picked up Vue.js because it looks easiest to start. So I researched a bit, and discovered it suited my programming taste. It can be adopted progressively, and all that’s needed was to add a script to the html file, just like the good old jQuery days. That was familiar because all the HTML, CSS and JS were all used the same way I was used to in web development 101. It was not so scary unlike React, Next.js and Gatsby where everything was JS, even in a HTML file.

Learning Vue and the first taste of the joy of coding

Learning Vue had been such a joy. I could never have known that I would enjoy coding this fun, all because of a framework that was suited to me. But more importantly, I also found incremental ways to learn coding and to stay motivated, by browsing mini Vue projects on Codepen, and learning from them.

And now, after almost two months of feeling my way through coding on Vue and then Rails, I have a production-level kind of app (albeit a very basic one) using that Rails-Vue stack. It felt like I’d come so far from only knowing how to make informational websites using HTML, CSS and JS. Or to go even further back, from making sites using Wordpress.

And the best part?

That sense of excitement and possibility, from what was a tiny little spark, to what’s a blazing fire today.

Now that is precious beyond measure.

---

Follow my daily writings on Lifelog, where I write about learning to code, goals, productivity, indie hacking and tech for good.