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 on how to create a svelte app with a meteor back end (and ). 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. tutorial lots of other great tutorials 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 . I'm not sure if this a popular software among the dev community, but I had definitely never heard of it. Chocolatey Once I had that installed, I was able to run the command to actually get Meteor on my machine. After that, it was a pretty straightforward setup process. Running was all I needed to do to get going. choco install meteor meteor create <name of project> 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 you would use . 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! npm install <package> meteor add <package> 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 to help guide me as well. Long story short, the is awesome! Svelte documentation $ 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 that helped me grasp the concept. Running the author's example in the web console dev tools helped me visualize it even better. !! great article 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 file: api/tasks.js (taskId) {
        check(taskId, ); task = Tasks.findOne(taskId); (task.private && task.owner === .userId) { Tasks.remove(taskId);
        } 
    }, (taskId, setChecked) {
        check(taskId, );
        check(setChecked, ); task = Tasks.findOne(taskId); (task.owner === .userId) { Tasks.update(taskId, { : { : setChecked } });
        } 
    }, // Lines 35-53 in my tasks.js file 'tasks.remove' String const if this // If the task is private, make sure only the owner can delete it 'tasks.setChecked' String Boolean const if this // If the task is private, make sure only the owner can delete it $set checked Deployment The last downside for me was deploying this Meteor app. Meteor provides a wonderful service called . 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. Galaxy 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! Also published at https://dev.to/tyry327/creating-a-todo-app-with-svelte-and-meteor-5f09

Facebook

Google

Heroku

Super

2022 - HackerNoon Contributor of the Year - Amazon

Nominated for 2022 - HackerNoon Contributor of the Year - Amazon

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How To Build a Todo List App by Using Svelte and Meteor

Too Long; Didn't Read

Companies Mentioned

Tyler Joseph

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Build a Todo List App by Using Svelte and Meteor

Too Long; Didn't Read

Companies Mentioned

Tyler Joseph

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES