Creating a Todo app with Svelte and Meteor

Intro

For my next project, I decided to create a todo list app using Svelte and Meteor. I initially got the motivation to do this through Meteor's documentation site. On their site, they have a tutorial on how to create a svelte app with a meteor back end (and lots of other great tutorials). Which is exactly what I was looking for! In this article, I'll take you through my experience of the tutorial and a couple of extra things that I added.

Before I start, I want to share a great quote I heard about Meteor from Scott Tolinski on the Syntax podcast:

Meteor is a back end tool that allows you to "Bring your own front end".

I couldn't agree more, and Meteor shows this off with all of the different front end frameworks you can use with their platform. This is comparable to how Next.js operates. Next allows you to bring in whatever back end platform you want to hook up to your Next front end.

Setup

The setup for Meteor was weird to me. First, I had to install some software called Chocolatey. I'm not sure if this a popular software among the dev community, but I had definitely never heard of it.

Once I had that installed, I was able to run the command choco install meteor to actually get Meteor on my machine. After that, it was a pretty straightforward setup process. Running the meteor create <name of project> was all I needed to do to get going.

There were a couple of odd/cool things during this setup process that I want to note. Meteor forces you to run their commands in Powershell. Which is another practice that I had never experienced before. I'd be curious to know why that is. Also, while in a Meteor project, Meteor replaces npm in a lot of ways. For example, instead of using npm install <package> you would use meteor add <package>. Lastly, I was super stoked to find out that Meteor automatically hooks up your project to a MongoDB back end! Right out of the box!

Cool things I learned

Here are a couple of things that I learned or thought were cool about Svelte and Meteor.

Meteor

Meteor offers a lot of really cool features (on top of the automatic MongoDB hook up) that I haven't really encountered with other projects I've done. I'm still very new to development so these might not be too special but they stood out to me.

Running your app with Meteor makes it extremely easy to develop for mobile environments. In this tutorial, they actually go over how to run your app on iOS and Android emulators. They explain the steps very well, and it's a nice added functionality bonus.

Meteor has built-in account login. No need for additional setup. I thought that was really handy. Other cloud-based platforms have made hooking up logins from other accounts pretty easy nowadays, but what made Meteor stand out to me was their default username and password login functionality. It was very straightforward and easy to understand. Other login accounts you could hook up in your Meteor project included: Google, GitHub, and Facebook.

Because Meteor is such a focused back end solution they include a great security section in their tutorial. In this section, Meteor goes over how to set up your data calls correctly. This covers how you submit, update, and delete data. Really beneficial especially in times like these where hacking is a huge problem in the tech world.

Last but certainly not least, testing. Every developer loves writing tests! (subtle sarcasm) In this Meteor tutorial, they walk you through writing some tests. It was actually pretty easy and helped me understand writing tests better overall. Side note: One of my tests didn't work but that's not the point! The point is, I wrote my own tests.

Svelte

The main reason I did this tutorial was to get more exposure to Svelte so I thought I should share something I learned about that framework as well.

The way Svelte uses reactivity was very confusing for me at first, but this tutorial helped me understand it a little better. I also looked at some Svelte documentation to help guide me as well. Long story short, the $ is awesome!

This doesn't really have to do with Svelte, but I'm going to add it in here anyway. I had never used the double bang syntax !! until this tutorial. What does the double bang syntax do? It casts a javascript variable to a boolean. Pretty cool, huh? If you're still confused here's a great article that helped me grasp the concept. Running the author's example in the web console dev tools helped me visualize it even better.

Not so great things

There were a couple of hiccups during this tutorial. Luckily only one code hiccup which is always nice.

Code Error

When I finished the project my to-do list wasn't functioning correctly. The checkboxes weren't checking and the delete button wasn't deleting. Here is what I had to change in my code. This change occurred in the api/tasks.js file:

// Lines 35-53 in my tasks.js file
    'tasks.remove'(taskId) {
        check(taskId, String);

        const task = Tasks.findOne(taskId);
        if (task.private && task.owner === this.userId) {
            // If the task is private, make sure only the owner can delete it
            Tasks.remove(taskId);
        } 
    },
    'tasks.setChecked'(taskId, setChecked) {
        check(taskId, String);
        check(setChecked, Boolean);

        const task = Tasks.findOne(taskId);
        if (task.owner === this.userId) {
            // If the task is private, make sure only the owner can delete it
            Tasks.update(taskId, { $set: { checked: setChecked } });
        } 
    },

Deployment

The last downside for me was deploying this Meteor app. Meteor provides a wonderful service called Galaxy. It looks like it handles all of your Meteor deployment needs. What's the downside? There isn't a free tier. The cheapest you can get is 7 dollars a month. Which, for me, is too expensive to host a tutorial project.

So naturally, I looked into other ways of deploying this out to the public. The next best resource seemed to be Heroku. There are a couple of GitHub repos and articles that explain how to get this deployed onto the web. The major hurdle that I ran into was the recent discontinuation of the mongoLab Heroku add-on. Since Meteor uses a mongo database under the hood a lot of the ways to deploy this via Heroku involved using this recently non-existent Heroku add-on. So that was a bummer. I'm sure there's still a way to deploy this thing, but there was no easy way. The easy way was what I was looking for.

Conclusion

Meteor seems like a really great platform. I like how structured it is, and how it does all the complicated back end work for you while allowing you to use whatever front end framework you want. I can definitely see why many companies rely on Meteor for their web needs. However, the lack of easy deployment puts a wrench in the possibility of casual devs latching onto this. Unless I'm really dedicated to a project I'm working on, I'm not shelling out 7 bucks a month to host my fun web project. Especially when there are so many awesome free tools out there. I rate this dev experience a 3.4 out of 5.

That's all folks! Happy coding!