Meteor-Svelte Starter Application

We have put together a Meteor-Svelte Starter Package that is built on the most current technologies as of 2020 using the latest releases of Meteor, MongoDb, Svelte and Bulma.

This starter package is the outcome of work done to build an application system for both a software-as-a-service and for real time control (IoT if you prefer). This package provides a scaffolding structure to quickly build pages and includes a variety of components to add page specific functionality. This package is a partial port from a Meteor-Vue application in an attempt to reduce the bundle size and improve Time To First Byte (TTFB).

It is also an opinionated view of the work that needs to get done. This package is clearly not for everyone nor does it try to accommodate the latest new ideas. This package is meant for business people / product managers that need to get outcomes quickly and can scale during the initial growth phase of a company.

There is also a demo site is located at a DigitalOcean data centre. Sign-in with email: ‘test-user@example.com’ password: ‘test-user-kanen’. There is also a github repository.

We hope you find this package useful to jump start your exploration of Svelte running on Meteor.

6 Likes

Not sure it this will help, but I get an error visiting the demo site (renders empty)

Uncaught TypeError: e[1] is undefined
    k http://159.203.26.214/1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146
    M http://159.203.26.214/1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146
    Qe http://159.203.26.214/1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:11
    w http://159.203.26.214/1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146
    U http://159.203.26.214/1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146
    Qe http://159.203.26.214/1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:11
    V http://159.203.26.214/1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146
    z http://159.203.26.214/1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146
    Qe http://159.203.26.214/1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:11
    W http://159.203.26.214/1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146
    e http://159.203.26.214/1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146
    g http://159.203.26.214/1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:9
    n http://159.203.26.214/1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:9
    e http://159.203.26.214/1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:9
    <anonymous> http://159.203.26.214/1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146
1 Like

Wow! I developed on Chrome browser and tested on Safari browser. Both work on my side.

What browser are you using? Is there a network latency issue?

Firefox 78.0.1 (64-bit) ubuntu

But i don’t think it’s a browser thing, I can’t open it with chrome either. the error in chrome is

Uncaught TypeError: Cannot read property 'credits' of undefined
    at k (1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146)
    at M (1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146)
    at Qe (1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:11)
    at new w (1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146)
    at U (1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146)
    at Qe (1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:11)
    at new V (1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146)
    at z (1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146)
    at Qe (1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:11)
    at new W (1b85de987728b5790460453d28e6231b138294c1.js?meteor_js_resource=true:146)

I also get this warning

[Deprecation] getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

site works for me.

pretty. impressive, I browsed the source a bit and it looks so clean!

1 Like

Work for me too, and it is really fast!

You can configure the PWA manifest so we can add it as an app.

Thank you for taking time to help. I can’t simulate this error, but it feels like there is a timing condition. The user credits are retrieved via a method call and then a Svelte store variable is updated. A Svelte user credit widget reacts to any change in the store variable. I have added some extra checks to ignore any falsey values.

The user position deprecation warning is a specific Chrome thing. It needs a secure connection to the server before it delivers a valid user lat / long position. I have overridden this as this site is in demo mode and so does not need a real position at this time.

Android tablet: demo site don’t works

This is so cool. Thank you so much for sharing this!

I’m impressed with this as well. As a Meteor newbie but also a Svelte fan, it aids my learning and gives me a base to work from, so thanks.

@zaphodbb-pm as SaaS and IoT applications were mentioned explicitly in the blurb, are you going to be adding boilerplate subscription plans, teams, billing etc? If not, do you have any advice on how best to proceed with that?

Thanks for the note. Glad to see that this is useful for you.

Our approach was that we wanted to see how Svelte compares to Vue. Most introductory commentary focuses on the basic use cases. As we all know, the “devil” is in the details. Until we push the tool really hard, we don’t get to see the limitations. By going deep enough, we also get to see a number of idiosyncrasies as well. That is what we wanted to test here and to share our experience. So far we are impressed with Svelte and it is no more gnarly than any other framework. In many cases, Svelte is simpler and has less boilerplate. We have also concluded that virtual DOM is over-rated. As always, good code practices, documentation and proper componentization are much more important than the plumbing.

We will be adding some more functionality in the future. Currently we are subjected to the real world pressures of getting our core Vue application launched and settled (ie debugged).

For your boilerplate question, you will need three things: 1) user roles, 2) a subscription page and 3) a payment processor.

  1. User Roles and Groups are already baked in. See the user schema user schema. We built our own simplified role mechanism and attached it to the user object. The server side code does all of the checking and filtering. This gives us more flexibility, less bloat and better control over the business logic.

  2. Subscription page: in past we have used a Bulma add-on pricing table built into a component to display the table and respond to a button event.

  3. Payment processor: we like using Stripe for payments. Client side, the pricing table button event is used to query Stripe and get back a single use token. This token and the user action is sent server side via a method. The server communicates with Stripe to actually complete the transaction. On success, this method will then change the user role to whatever was purchased.

Hope that helps.

2 Likes