Meteor-Svelte Starter Application

zaphodbb-pm · July 13, 2020, 2:46pm

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.

tcastelli · July 13, 2020, 4:24pm

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

zaphodbb-pm · July 13, 2020, 5:16pm

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?

tcastelli · July 13, 2020, 5:41pm

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.

thomastraum · July 13, 2020, 6:11pm

site works for me.

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

alawi · July 13, 2020, 6:12pm

Work for me too, and it is really fast!

alawi · July 13, 2020, 6:15pm

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

zaphodbb-pm · July 13, 2020, 7:44pm

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.

orloff · July 17, 2020, 2:45pm

Android tablet: demo site don’t works

timheckel · September 1, 2020, 10:15pm

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

intejax · September 1, 2020, 10:24pm

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?

zaphodbb-pm · September 2, 2020, 3:22pm

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.

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.
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.
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.

umitdogan · December 26, 2020, 10:48pm

Great! Thank you for sharing.

umitdogan · December 27, 2020, 6:41pm

Hi,
I was trying to run the site on my local computer. I faced with the following error.

Here is my Meteor versions file;

accounts-base@1.7.1
accounts-google@1.3.3
accounts-oauth@1.2.0
accounts-password@1.6.3
allow-deny@1.1.0
autoupdate@1.6.0
babel-compiler@7.5.4
babel-runtime@1.5.0
base64@1.0.12
binary-heap@1.0.11
blaze-tools@1.0.10
boilerplate-generator@1.7.1
caching-compiler@1.2.2
caching-html-compiler@1.1.3
callback-hook@1.3.0
check@1.3.1
ddp@1.4.0
ddp-client@2.3.3
ddp-common@1.4.0
ddp-rate-limiter@1.0.9
ddp-server@2.3.2
deps@1.0.12
diff-sequence@1.1.1
dynamic-import@0.5.4
ecmascript@0.14.4
ecmascript-runtime@0.7.0
ecmascript-runtime-client@0.11.0
ecmascript-runtime-server@0.10.0
ejson@1.1.1
email@2.0.0
es5-shim@4.8.0
fetch@0.1.1
fourseven:scss@4.12.0
geojson-utils@1.0.10
google-oauth@1.3.0
hot-code-push@1.0.4
html-tools@1.0.11
htmljs@1.0.11
http@1.4.2
id-map@1.1.0
inter-process-messaging@0.1.1
kschingiz:publish-aggregations@0.0.1
launch-screen@1.2.0
livedata@1.0.18
localstorage@1.2.0
logging@1.1.20
meteor@1.9.3
meteor-base@1.4.0
minifier-css@1.5.3
minifier-js@2.6.0
minimongo@1.6.1
mobile-experience@1.1.0
mobile-status-bar@1.1.0
modern-browsers@0.1.5
modules@0.15.0
modules-runtime@0.12.0
mongo@1.10.1
mongo-decimal@0.1.2
mongo-dev-server@1.1.0
mongo-id@1.0.7
npm-bcrypt@0.9.3
npm-mongo@3.8.1
oauth@1.3.2
oauth2@1.3.0
ordered-dict@1.1.0
promise@0.11.2
random@1.2.0
rate-limit@1.0.9
reactive-var@1.0.11
reload@1.3.1
retry@1.1.0
routepolicy@1.1.0
service-configuration@1.0.11
sha@1.0.9
shell-server@0.5.0
socket-stream-client@0.3.1
spacebars-compiler@1.1.3
srp@1.1.0
standard-minifier-css@1.7.1
standard-minifier-js@2.6.0
static-html@1.2.2
templating-tools@1.1.2
tracker@1.2.0
typescript@4.1.2
underscore@1.0.10
url@1.3.1
webapp@1.9.1
webapp-hashing@1.0.9

And package.json

{
  "name": "svelte-basic",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "debug": "meteor run --inspect",
    "debug-brk": "meteor run --inspect-brk"
  },
  "dependencies": {
    "@babel/runtime": "^7.8.3",
    "@fortawesome/free-regular-svg-icons": "^5.13.1",
    "add-to-homescreen": "github:docluv/add-to-homescreen",
    "bcrypt": "^4.0.1",
    "bulma-scss": "^0.9.0-1",
    "coffeescript": "^2.5.1",
    "croppie": "^2.6.5",
    "date-fns": "^2.14.0",
    "flatpickr": "^4.6.3",
    "jsdoc": "^3.6.4",
    "line-awesome": "^1.3.0",
    "meteor-node-stubs": "^1.0.0",
    "mup": "^1.5.1",
    "quill": "^1.3.7",
    "quill-2.0-dev": "^2.0.0-dev.3",
    "svelte": "^3.31.0",
    "svelte-loadable": "^1.5.1",
    "svelte-router-spa": "^5.8.3",
    "sveltedoc-parser": "^3.0.5",
    "tiny-cookie": "^2.3.2",
    "underscore": "^1.10.2"
  }
}

zaphodbb-pm · December 27, 2020, 7:23pm

Hmmm! Interesting.

We use Webstorm as the IDE. It starts and runs the application without issues.

From your error message, it seems that Meteor cannot resolve the relative path to the Svelte application head. Try to edit /client/main.js file and use the absolute path “/imports/both/pageStructure/App.svelte”.

umitdogan · December 27, 2020, 7:44pm

Actually digging into the problem it seems that it is about the version of Svelte:compiler package. I run meteor update and it’s version is upgraded from 3.21 to 3.29 and i run into problems immediately. After downgrading to 3.21 it is running without problem.

zaphodbb-pm · December 27, 2020, 7:48pm

Ah yes!

This app is dependent on the package at atmosphere: svelte compiler. It is at Svelte 3.27. You can follow the instructions to update the compiler to at least close to the current release.

zaphodbb-pm · January 3, 2021, 1:39am

++Update++

We finally had some time to get back to this starter application. This package has been upgraded to Meteor 1.12 and Svelte 3.27. Breaking changes were fixed. PWA support has also been added.

The demo site has also been moved to Galaxy/Atlas. This better simulates our preferred staging / production environment. The GitHub repository has been renamed.