How to separate Meteor client and server with the help of mondora/asteroid?

Currently, I am exploring the integration of Meteor with my Angular project structure and templates. In this quest, I came across a library called Asteroid which is described as "A javascript client (browser and node) for a Meteor backend, Asteroid gives the possibility to connect to a Meteor backend with any JS app." You can find more information about it here.

The documentation for Asteroid seems sufficient, but one thing that I find lacking is guidance on how to organize files and set up a proper project structure. I have successfully integrated the asteroid files using require on my client side, but when it comes to creating an Asteroid instance with the Meteor server as the host, I am unsure of how to do it - especially setting the "host" parameter and running it on my local machine.

var a = new Asteroid(host, ssl, interceptor)

If anyone has experience using Asteroid and can provide some direction or tips on this matter, I would greatly appreciate it.

javascriptangularjsmeteor

Answer №1

When facing the challenge of integrating a meteor backend with a Polymer frontend, we encountered a similar issue. Our solution involved utilizing the meteor-build-client tool to separate the client and server components of our meteor application. This tool generates a .js file containing all the necessary client-side code, which must be included in the front-end application.

In our meteor project, most of the files were located in the server and packages folder, with just a reference to the main Polymer element in the client folder to initiate the frontend application. It is important to note that any client-side code within the meteor application will automatically run when the client-side script is called.

To establish a connection with the server, it is essential to provide meteor runtime configuration, similar to the following example:

    var ip = window.location.hostname.toString();
var port = 3000;
__meteor_runtime_config__ = {
    "meteorRelease":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d00090202081c0c330c330d030f08">[email protected]</a>",
    "ROOT_URL":"http://"+ip+":"+port,
    "ROOT_URL_PATH_PREFIX":"",
    "DDP_DEFAULT_CONNECTION_URL":"http://"+ip+":"+port
};

We hope this explanation proves helpful. Best of luck!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Establish the editor's starting state

Currently, I am utilizing lexical and aiming to establish initial text for the editor. At the moment, my approach involves hardcoding the initial text, but it seems I cannot simply pass a String as anticipated. Instead, the format required is JSON. Hence ...

javascriptnext.jslexicaljs

The postMessage function in my Javascript SlackBot seems to be flooding the channel with messages

I am currently setting up a Slack bot using JavaScript combined with several useful libraries. The main function of this bot is to execute a postMessageToChannel method whenever a user in the channel mentions the specific keyword "help." However, I am fa ...

javascriptslackslack-api

What are the steps to switch multiple CSS styles for creating a dark mode?

I'm currently using a combination of HTML, CSS, and JavaScript to construct my website. One feature I'd like to implement is a Darkmode switch button that toggles between Dark and Light mode when clicked. However, the issue I'm facing is tha ...

javascripthtmlcssdarkmode

Warning: Potential Infinite Loop when using Vue JS Category Filter

I developed a program that filters events based on their program and type. The program is working correctly, however, an error message stating "You may have an infinite update loop in a component render function" keeps popping up. I suspect that the issue ...

javascripthtmlvue.jsinfinite-loop

Personalized HTML characteristics

Within the realm of AngularJS (and possibly jQuery UI), I've come across tags such as ui:some_random_name and ng:some_random_name. It seems that according to the HTML specification, non-standard attributes are not allowed. So how do these libraries m ...

htmlangularjsattributes

Passing a callback function through a prop in Vue.js

Currently, I have a component structured in the following way: <template> <div> <pagination class="center" :pagination="pagination" :callback="loadData" :options="paginationOptions"></pagination> </div> </t ...

javascriptvue.js

Preventing jQuery from removing child elements while inserting data through ajax

When I try to insert data into an HTML structure using the code below, only one of the elements displays at a time. It seems like when I use Ajax to insert data, the child elements are being removed. How can I prevent this without having to change the stru ...

javascriptjqueryajaxparent-child

Listing items in a table using ng-repeat

I'm currently working on constructing a table using ng-repeat, but I also need to incorporate a toolbar. The table design I have in mind is similar to the one shown in the image below, however, I require additional rows to be inserted under the sectio ...

htmlcssangularjsangularjs-ng-repeattabular

Using jQuery to iterate through rendered HTML with the ForEach function

I am utilizing JS/jQuery code to extract the cell value of an ASP DetailsView control (rendered HTML), validate it against a condition, and hide a specific div based on the result. Specifically, the code is examining whether the cell value is formatted lik ...

javascriptjqueryasp.netforeachinnerhtml

Is it possible to use setState after a setTimeout to unmount a component?

Can anyone help me find the issue with my code? I am attempting to clear an error message after a specific duration, but it's not working as expected. I'm puzzled about what might be causing this problem. export default class MyError extends Com ...

javascriptreactjs

Serve different files using Node.js socket.io webserver, not just index.html

I recently started delving into socket.io and decided to use this chat example as a reference. As I navigate to ip:8080/public/index.html, I realize the need to access other files, such as additional JS scripts that will be used on the client side in the ...

javascriptnode.jssocketssocket.io

Adding a Bearer Token to a GET request using location.href: A step-by-step guide

At the moment, I have all my ajax requests sending an Authentication token. However, I have created a service for exporting to excel and since ajax doesn't support that, I am using location.href for the get request. Is there a way to include the token ...

javascriptangularjsajaxasp.net-mvc

Having difficulty with loading images lazily in a jQuery Mobile app with LazyLoadXT feature

Struggling to incorporate lazy loading in my jQM app with Lazy Load XT v1.0.6. Oddly, images only appear when switching browser tabs, not while scrolling down. This happens on Firefox and Chrome. <img src="/img/default-img.jpg" data-src="/img/product/ ...

javascriptjqueryjquery-mobilelazy-loading

Browser displaying a CSS error: "Invalid property name" while applying pseudo-element :after

I encountered an issue in Chrome and Explorer while attempting to set a CSS property for a pseudo element :after. (I'm trying to create a styled burger nav icon) The error message I received was: 'Unknown property name' This happened wh ...

javascripthtmlcss

What could be causing this jQuery to malfunction?

Having trouble with the functionality of hasclass and this.addclass. if ($('.sidebar-menu-container li').hasClass('current-menu-item')) { $(this).addClass('expanded'); } Check out this CodePen for reference. ...

javascriptjqueryhtmlcss

Obtaining the category value within a slot of the Vuetify calendar

I am struggling to implement hover functionality in the categories view of Vuetify calendar within the body section (slot day-body). When I try to add hover functionality, the entire row ends up being affected by the hover effect, even though I only want i ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Issue with fading out in Ajax.BeginForm not resolving

I currently have: @using (Ajax.BeginForm("actionToDo", new AjaxOptions { HttpMethod = "post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "updatediv", OnBegin = "$('#updatediv').fadeOut()", OnComplete = "$(&apo ...

javascriptjqueryajaxasp.net-mvc-4

Preventing Duplicate Random Numbers in Vue 3 and JavaScript: A Guide

I've been working on creating a function that can iterate through an array of objects with names and IDs, randomize the array, and then return one filtered item to slots.value. The current spin function successfully loops through the randomized object ...

javascriptarraysvue.jsfor-loopvuejs3

Retrieve and search for the URL of the link being hovered over exclusively

As indicated by the title 「 Obtain and search for the URL of the hovered link "only" 」 What corrections should be made to accomplish this? // Fix1⃣ Issue // ① Opens all URLs that contain the specified word, regardless of mouseover target. // ② ...

javascriptjquerymouseeventmouseovermouselistener

Struggling to retrieve JSON information from the database using AJAX

I am facing a challenge when it comes to fetching data from my database using these technologies. Here is the current scenario: var username = $('#username').val(); var password = $('#password').val(); // This IP is just an example fo ...

javascriptjqueryajaxjsondatabase