Using imports, how does the server com with the client?

Question

I'm confused by how we import [Publish] functions and [Meteor Methods] that reside under /imports/server to the Blaze client (either in /imports/client/ui or even just under app-name/client).

The classic way, is to just use the publish or meteor method, and everything is consumed by the client without imports. But if everything resides under the /imports directory (including the Blaze templates) how does that work? Are there real examples out there?

Illustration:

// imports/server/publishing/test.js

Meteor.publish('publish.test', function() {
  if (this.userId) return TestCollection.find({});
  return self.ready();
});

// imports/client/ui/test.js

import { Template } from "meteor/templating";
import { ReactiveDict } from "meteor/reactive-dict";
import { Mongo } from 'meteor/mongo';
import TestCollection from '../../imports/collections/test.js';

import "./test.html";

Template.Test.onCreated(function() {
  this.state = new ReactiveDict();

  this.autorun(() => {
    const subscription = this.subscribe('publish.test');
     ...
    }
  });
});

How do server side only stuff make its way to the client in the new imports syle of developing?

UPDATE1:

Reponding to Answer1, would something like this work? Also, does the client look okay?

// app-name/imports/server/trades-pubs.js

  // This code only runs on the server
  Meteor.publish('trades', function tradesPublication() {
    return Trades.find({},{sort: {timestamp: -1}, limit: 1000});
  });

// app-name/imports/server/trades-methods.js

Meteor.methods({
  // Only on server
  'trades.importFromFiles'() {
      fs = require('fs');
      const path = "/home/daemmon/trades_data/";      
      var files = fs.readdirSync(path);     
      ...
  }
});

// app-name/server/main.js

import '../imports/server/trades-methods.js';
import '../imports/server/trades-pubs.js';

Is this all that's needed to get a publish methods to the client and server side meteor methods avaialbe to the client?

// imports/client/ui/test.js

import { Template } from "meteor/templating";
import { ReactiveDict } from "meteor/reactive-dict";
import { Mongo } from 'meteor/mongo';
import TestCollection from '../../imports/collections/test.js';

import "./test.html";

Template.Test.onCreated(function() {
  this.state = new ReactiveDict();

  this.autorun(() => {
    const subscription = this.subscribe('trades');
     ...
    }
  });
});

UPDATE2:

you might want to consider importing app-name/imports/server/trades-methods.js somewhere in your client code as well, i.e. in a file like app-name/client/main.js

I thought we could not import server code on the client? If I wanted to import trades-methods.js for example, I'd have to move it to app-name/imports/api or something outside /imports/server.

UPDATE3:

Reading the Meteor Guide, I'm confused by this paragraph:

.

To fully use the module system and ensure that our code only runs when we ask it to, we recommend that all of your application code should be placed inside the imports/ directory. This means that the Meteor build system will only bundle and include that file if it is referenced from another file using an import (also called “lazy evaluation or loading”).

Meteor will load all files outside of any directory named imports/ in the application using the default file load order rules (also called “eager evaluation or loading”). It is recommended that you create exactly two eagerly loaded files, client/main.js and server/main.js, in order to define explicit entry points for both the client and the server. Meteor ensures that any file in any directory named server/ will only be available on the server, and likewise for files in any directory named client/. This also precludes trying to import a file to be used on the server from any directory named client/ even if it is nested in an imports/ directory and vice versa for importing client files from server/.

These main.js files won’t do anything themselves, but they should import some startup modules which will run immediately, on client and server respectively, when the app loads. These modules should do any configuration necessary for the packages you are using in your app, and import the rest of your app’s code.

.

Doesn't this mean for example that if there is a file inside the [/app-name/imports/server] directory, this file can NOT be imported in the client here [/app-name/client/main.js]?

.

For example I could NOT do the following:

Module inside the imports /server directory: /app-name/imports/server/server-test.js

Module inside the imports /client directory: /app-name/imports/client/client-test.js

.

Entry point in Meteor client: /app-name/client/main.js

// => Would NOT work?
import { ServerTest } from "../../imports/server/server-test.js"; 

// => Would work?
import { ClientTest } from "../../imports/client/client-test.js";

UPDATE4:

Your wording here on your Update2:

Within the /imports folder, there are no special folder names - so you can import a file from /imports/server in your client side code.

... is incorrect according to the author of this portion of the Meteor Guide.

Using imports, how does the server com with the client?

Answers (1)

Related Questions