DEV Community: jdtjenkins

Why I moved from Sveltekit to Astro 👋

jdtjenkins — Thu, 15 Jun 2023 14:44:01 +0000

Hey all,

Trying to make a marketing site in the same project as your app

I've been creating Shiftly using Sveltekit and I've been absolutely loving it. And for my apps going forward I think I'll be using it all the time.

However, where it fell down for me was with creating a super fast, SEO-friendly marketing site.

Yes Sveltekit can do prerendered routes, and can handle no-javascript clients. But it felt like I was forcing it into trying to be a SSG rather than an application framework. I felt it was never quite as performant as I wanted, and there was a weird bug where occasionally it wouldn't load a page going from a prerendered route, to a SSR rendered page. The route would change, but the view wouldn't update! I can't be having that from my homepage!

So I went in search for a way to split out the marketing site and blog out of Sveltekit and move it away into it's own project.

Introducing Astro

I'd heard of Astro in passing but decided to take a closer look. I've used 11ty in the past, and whilst great, was a bit of a learning curve!

I was instantly impressed with how frictionless Astro was to work with. If you've used any modern framework, NextJS, Qwik, Solid or Sveltekit, you'll feel right at home in Astro.

It's writing HTML exactly as you would in a framework, even with components, slots and props but then it renders it all to static HTML and CSS, and no Javascript! More on that in a bit.

I loved how instantly I could get working with Astro, creating layout components and pages exactly how I had them in Sveltekit. There was even a one line installer for Tailwind, which these days I can't live without!

A good excuse to redesign the home page

I got so excited with Astro that I had finally taken the time to improve the Shiftly homepage to something a bit more informative and proper!

Astro let me rewrite the homepage and all the blog pages within a morning. And by lunch I had my whole new marketing site deployed on Vercel.

After I had figured out how to deploy to subdomains on Vercel! 👀

Astro is by far the quickest I've ever picked up a new framework, and it's ability for speed is incredible.

I was also to really see and feel the performance gains from static html and minimal css. And add all the lovely Lighthouse fixes for the homepage which allowed me to get almost all 100s!

Next steps

Now I have a rapid Astro site which I can expand on and add whatever features I want to. I will keep improving that definitely.

Blog Markdown and prefetched routes and getStaticPaths()

Astro can read local .md files and render those as static pages, which is awesome. So I'll be looking at converting my blog to use markdown.

But wait, there's more! Astro also has a function getStaticPaths() which lets you return data to a dynamic route which builds out all the pages you return at build time.

Say you make an api call to get all your blog posts, and return all 5 blogs posts in your getStaticPaths() method. Astro will generate 5 pages each with whatever slug you specify!

Very, very cool stuff. Cannot recommend Astro enough! Another tool in the belt to help me develop faster!

Thank you for reading all!

Thank you,

Good luck!

Jacob
Shiftly

How to deploy a monorepo to different subdomains on Vercel 📔🚀

jdtjenkins — Wed, 14 Jun 2023 12:49:43 +0000

I recently built Shiftly completely inside Sveltekit. I loved using Sveltekit for the app, but it seemed tricky when it came to SSG and making the marketing site as pretty, fast and performant as I needed it to be for SEO and user engagement.

So I decided to wrap it in a monorepo, using Turborepo. But then I wanted to be able to host my apps on different subdomains within Vercel! I got there, but a little guide would've been nice.

If you're just tuning in and don't know what a monorepo, Vercel, Sveltekit or Turborepo or Astro is here's a quick rundown. Feel free to skip if you just want to get to the money!

Monorepo - Stuffing all your projects and apps, reusable components and business logic inside one repo so everything is easier to see.
Turborepo - A monorepo framework.
Vercel - A pretty badass web host. Specializing in zero-config (or low-config) deployments. Also ride-or-die with
Sveltekit - A SSR framework for the Svelte JS framework.
Astro - A modern af framework for building static sites using reusable components with a hint of magic.

Choose your monorepo

Chances are if you're reading this, you have one ready to roll. But I thought I'd throw a shoutout to Turborepo.

I had used Nx before, but only with Angular apps. Trying to get it working for a Sveltekit app was complicated and flaky. Nevermind trying to get Astro running inside Nx.

So I wanted something leaner and easier to learn and maintain. So I tried Turborepo, which I instantly fell in love with.

Turborepo is a monorepo framework built on top of npm, pnpm or yarn workspaces, so it's backed by your package manager. It doesn't rely on confusing and brittle tsconfig paths to reference your packages inside your apps. You install your packages as you would any other dependency!

And finally, it lets you use any framework you want, with it's own install command! With Nx you have to use a generator, which means one has to exist (and work!) for the framework you want to use. I guess you could make your own... 👀

So in no time I had Shiftly running inside Turborepo. So quick in fact that my local dev folder is still called "turbo-test" because I didn't think it would be so easy to get working with it.

So I have my apps in my monorepo ready to deploy, now what?

So this next bit will be exclusive to Vercel. You can do this with any host... Probably. And you can do it with AWS Route53, if you want to have a headache for days as you figure that out. So I'll just be covering Vercel.

Vercel allows you to connect multiple projects to the same Github repo (oh yeah also this probably works with other git hosts... But I'm using Github, so who knows 🤷‍♀️), up to three projects in the free tier. Paid plans allow you to connect more, you can check here.

Create a Vercel project for each app you want to deploy from your Monorepo

Create a new project, and import your repo.

On the next page, you should have the Vercel, Turborepo seal of approval in the top-right corner which says that Vercel knows this is a Turborepo monorepo.

Then choose the framework of your app, Shiftly is using Sveltekit, so I'll choose that.

Next you'll want to hit "Edit" on the root directory, and change it to be your app. Like so:

After that, double check all your deploy commands are correct and make any changes you need to get your app running. I'm using Sveltekit which is best buds with Vercel, so I don't need to change anything.

Then finally, on your Domains page in Settings. You can add your subdomain to point at whichever branch you want live. This branch still maps to your same repo, so double check which branch you want to deploy from.

For example, I added app.getshiftly.com, and pointed it at my master branch.

And now, you can go to https://app.getshiftly.com and it all works!

Congrats, you've routed a subdomain 👏 nicely done.

That's all from me, thank you so much for reading!

Thank you,

Jacob @ Shiftly
getshiftly.com

BONUS EASTER EGG

For anyone who sees it before I remove it - if you didn't believe how fast I actually got this up and running (it took about 4 hours). But I even did it in such a hurry I left the default index page that comes with Sveltekit 😂 on the root of my app https://app.getshiftly.com

what am I like

How I built an MVP and got my first user in a month 🚀

jdtjenkins — Wed, 07 Jun 2023 17:08:17 +0000

Four weeks ago to this day I decided I want to try and start a business on my own and started creating a simply SaaS MVP - Shiftly. It started as an excuse to learn Sveltekit and Vercel, but after I realised how insanely quickly I can work with these tools, I decided to actually give it a real go and start a business.

About Me

Hey 👋, I'm Jacob, a Web Developer from the UK, and I've done it all. I've worked at start-ups, big corporates, local family businesses and everything in-between.

I've been a senior Angular developer for the last 5 years or so and felt I was lagging behind how Web Development is moving these days with SSR frameworks and futuristic zero config tools like Vercel and Supabase. I feel a bit late to the party, but from a long-term dev set in his ways - this new world is amazing.

How I used to work 🐌

So I've been an Angular developer for 5 years, however during that time I have done my fair share of Full-stack development with NodeJS. I'm familiar with AWS, servers and databases. But my passion is front-end.

So every time I've thought about starting an app for reals, I always get to hosting, or the backend or creating an API or authentication and just give up. I hate doing all of that. I can... But it's always felt like such a blocker.

My last project ended after weeks of me trying to perfect a Serverless infrastructure with an API and autoscaling EC2s before I'd even thought of a name for my last idea! Clearly, I was getting nowhere fast like this.

Introducing Sveltekit 💪

On a whim, I decided that I wanted to see what the hype was with Svelte and set about creating a few small projects thinking "Yeah ok it's nice, but maybe only for small projects..."

I saw the appeal immediately of how easy computed properties were.

Just a simple

$: computedVariable = anotherComputedVariable * 2

And I loved how easy Sveltekit made routing and forms. Suddenly I questioned if I'd ever touch Angular again!

Introducing Supabase 🚀

As I was looking at Vercel hosting, which I noticed had a zero-config adapter for Sveltekit applications, I found Supabase and a lightbulb went off in my head.

Suddenly everything clicked into place. Now I could create complex backend systems, using databases which I'm happy to use, but without any of the ridiculous complexity that comes with creating an initial back-end infrastructure!

I started looking at Supabase, which also has complete documentation for Sveltekit, and was able to get a prototype working in an afternoon with full Authentication-support and a few CRUD entities.

This, was, amazing.

Creating the Shiftly MVP

So after I had authentication in place, I set about creating a mechanism for users being able to invite other users to their Organisation. Which thanks to this superpowered stack only took a few hours to implement.

I then decided to implement Stripe into my app if I was ever going to try and get people to use this app.

Stripe with a traditional hosted API server approach that I used to use would have been a nerve wracking series of protected API routes and environment variable mishaps - as it always is!

With Sveltekit I was able to use environment variables on both my local machine and in Vercel with, again, zero config. Sveltekit even stops you from using PRIVATE_ environment variables in your front-end code!

This was the first time I'd used Stripe properly trying to actually create a payment system with it for recurring subscription payments. So it took a few days of tinkering with Stripe to make sure I was properly updating my user's db when a user had signed up. And how do I detect if a user has a card stored in Stripe? But in the end I'm happy with my current integration. It's somewhat rudimentary, but hopefully enough to get this app started!

So then after I'd implemented Stripe I was looking at adding Tailwind into Shiftly. I have used Tailwind for years now, but I thought I'd do this project without it. But every time I try to get out, Tailwind pulls me back in!

Then I discovered yet another tool that would increase my power again:

Introducing SkeletonUI

By this point in development, after a few weeks of creating Shiftly. I thought the game had been changed so many times I wasn't even playing the same sport anymore compared to how I used to develop apps. I thought it wouldn't change again and I was happy with the stack I had.

I watched a video by Huntabyte about SkeletonUI for Svelte. And well. Since I was already using Tailwind I decided to give it a shot.

Oh I'll only use it for the table component

I said. After a few minutes I had the perfect table.

Oh I'll only use it for some form styling

I said. And again, in less than an hour had refactored all my forms to use the Skeleton variant-form-material styling.

Oh ok I'll only use it for a top nav inside my application, but that's it

I mean... Talk about denial much. I instantly fell in love with Skeleton and spent the next two days refactoring my entire app to use Tailwind and Skeleton wherever I could.

Things now that would've not just taken a while, like a response modal component. Were instant.

Or even a menu drawer on mobile devices. Not impossible to create, but time consuming. Now is instant. Boom. Import the Svelte component and right awesome, you now have a complete Drawer for navigation on mobile.

So now I'm feeling pretty invincible, convinced I can implement any feature in only a day or two. Until I decided to implement an AI Shift builder feature. And oh boy was I... Completely correct.

In 3 hours I had a full feature for creating shifts in Shiftly from a text prompt. A feature that would have taken weeks with my old Angular and Nest setups.

Adding ChatGPT

One night, after the son and wife were in bed. I'd been thinking a lot about implemented some ChatGPT into Shiftly and thought "pfft, it can't be that hard!" And it wasn't.

With Sveltekit I can easily add a modal with a form, send the user's message to the backend where I can message the prompt and the response from ChatGPT. Now I can simply say:

Shiftly, can you create a shift for Bob, tomorrow at 12pm-8pm?

And it will go ahead and create a shift without you having to fill out a form.

Releasing Shiftly

So if I wasn't feeling absolutely invincible about how fast Shiftly is to develop, I certainly was now. I am confident I have stumbled into my personal, favourite stack of all time. In my whole life, I now feel as productive as I've always wanted to be thanks to these new technologies.

I decided to take the plunge and buy a domain and get in touch with some people and small business I knew. My dog walker, groomer, barber, things like that. And pleased to say, through some divine intervention they agreed to sign up and try out my app.

To sum up

I'm now super excited about where Shiftly can go. I'm not trying to create the biggest app in the world. I don't care if not everyone uses it. But if it can get any steps closer to leaving my day job, I'm happy!

This has been a whirlwind journey just from being a bit sick of using Angular and Nest and deciding to explore other tech stacks.

If you're wanting to really quickly develop an MVP or rebuild an existing one. I would highly recommend Sveltekit, Skeleton, Supabase and Vercel.

If you read this far, thank you, and good luck!

Jacob @ Shiftly
https://www.getshiftly.com