Integrating Meteor into a static site

help
1

I used Gatsby on a recently launched static page using React and D3 (available in German: http://www.kinderbetreuungsatlas.at/). Due to the positive experience I want to use Gatsby for the homepage of my coding workshops for kids. I currently use a Meteor app to manage the registrations for these workshops (and for other projects as well).

Is there a way to use something simple like Meteor.call from the static page for submitting the information from the contact form?

AFAIK I need a DDP client library, there are plenty of them on NPM, but no official one. The best would be a React HOC, that could be used for subscriptions as well – for later extensions.

Do you have any recommendation? Could be Fusion the solution for this problem?

I know, I could expose a REST API, but – as said before – I really like the simplicity of Meteor.call.

2

If you’re a redux user, then I would recommend having a look at:

:wink:

1 Like
3

Thanks for the answer!

Your library seems to be too complex for this particular problem (at the first sight). I don’t plan to use redux.

What I liked in the concept of Fusion was the fact to use it conditionally. I’d like to start the DDP connection only for one call, not for every visit on the homepage.

4

I also use a static site generator (react-static) for Websites, at the moment I am working on a headless cms based on meteor.

To get content and user accounts i use https://github.com/stubailo/meteor-rest

I think its the easiest way at the moment, or you could use GraphQL.

1 Like
5

Actually, starting a connection conditionally is also possible with ddp-redux, but if you’re not interested in redux at all then it’s not an option anyway.

If it’s just for one call, then I would use a basic HTTP request instead. Keep in mind that whatever DDP client you will be using it will come with a lot of overhead, e.g. because of EJSON dependency. So if you care about your js bundle size go for the simplest possible solution.

6

Thanks for pointing out this dependency on EJSON. So, a REST service as mentioned by @kations might be the easiest solution.

7

The titles says you want to integrate Meteor with a static site. Is that what you really want to do?

Is there a way to use something simple like Meteor.call from the static page for submitting the information from the contact form?

Using meteor to submit a forum seems like using an 18 wheeler to deliver a pizza. You don’t need all that.

Where do you host your site? Netlify makes form submission very easy

8

I’ll host the site on the webspace of my local provider. It doesn’t provide such a form handler (but I could implement one using PHP :roll_eyes:).

Of course, using Meteor for form handling only would be disproportionate. But over the time, there’ll surely be additional integrations, e. g. a live display of the free seats in the workshops.

Meteor is function-wise an 18-wheeler, but the developer experience makes it easy to treat it like a go-kart :slight_smile:

9

There are many benefits to using Netlify. And it’s free.

Netlify is an ultra performant platform for static sites.

Features include

  • Global CDN
  • Ultra Fast DNS
  • High Availability
  • Atomic Deploys
  • Instant Cache Invalidation
  • Security
  • Scalability
  • Automation

Oh did I mention free one-click SSL, form submission hooks without running a huge, performance killing framework like Meteor; and GitHub integration.

And it’s free.

If you add Meteor (SPA framework) you’re going in the polar opposite direction of a static site. Something like Vue might be a better tech choice. As a progressive framework, it might be a more naturally fit for this kind of evolution from static site to SSR or SPA application. You can develop a Gatsby-like static site with Vue/NUXT.

10

He wasn’t saying he wanted to put Meteor on the static site. He already has a Meteor app, and now he wants the static site to communicate with it. Meteor-rest seems perfect for this.

11

ah you’re right. I misread it. Sorry, my bad.
Maybe use Graphcool for the backend?

12

Thanks for all the answers!

Maybe, I’ll try netlify, as it provides SSL (this was the killer argument for me, as my provider doesn’t provide SSL for free).

As I already run a Meteor application (on a dedicated server), I will put this method there instead of setting up an additional application. Furthermore, GraphQL seems to need more overhead than REST, even it seems to fit well into the Gatsby architecture, as it used during build-time to collect all the data.

13

@qnipp I would say https://github.com/mondora/ddp.js is one of the most reliable out there. It’s made by the creator of asteroid and by the look of it has a very straightforward API:

const myLoginParams = {
    user: {
        email: "user@example.com"
    },
    password: "hunter2"
};
const methodId = ddp.method("login", [myLoginParams]);
ddp.on("result", message => {
    if (message.id === methodId && !message.error) {
        console.log("Logged in!");
    }
});

That said, I have no experience with said library myself.

I know you like the simplicity of Meteor.call, but if somehow you have to fallback on REST, here is something solid that I used in the past: https://atmospherejs.com/simple/rest. Works for methods and publications. This example uses jQuery, but you can easily implement your own simple method call using promises: https://atmospherejs.com/simple/rest#example-code-with-jquery

14

but why use meteor for static website… it’s like driving your kids to school using a TIR. anyway, you mentioned there is no official package. Try searching urigo’s repo on github. specifically meteor client bundler.

15

You’re right, using Meteor would not be reasonable for a static site, but as I’ve written above, I just want to do something like Meteor.call from a static page – like I am used to do it from React Native or Unity.

16

then again, meteor client bundler is way to go. or plan node package https://github.com/oortcloud/node-ddp-client