What is the entry point/file/function of Meteor AP

Question

I am recently studying Meteor which is absolutely convenient and powerful. But so far it is still not clear what is the entry point of a Meteor APP, in other words, which file/function will be executed first?

A simple example:

client/hello.jsx:

import React from 'react';

export const Welcome = ({name}) => (
    <div>
        Hello, {name}.
    </div>
);

client/routes.jsx:

import React from 'react';
import {mount} from 'react-mounter';
import {Layout, Welcome} from './hello.jsx';

FlowRouter.route("/", {
  action() {
    mount(Layout,
      {content: (<Welcome name="My Shining Name" />)}
     );
  }
});

then I use command:

meteor -p 12345

Then a webpage is launched! It looks pretty magic: where is the server running? how the webpage is generated? Most importantly, which piece of code will be executed first?

Thanks

Derek

Answer 1

Meteor bundles source client files and ships the bundle to the client. JS may be transpiled, and style sheets may be auto-prefixed during the process. At the end, the client executes the bundle.

A source client file refers to a file in a folder named 'client'. Those source files are executed in an order described in this document, quoted as below.

1. HTML template files are always loaded before everything else
2. Files beginning with main. are loaded last
3. Files inside any lib/ directory are loaded next
4. Files with deeper paths are loaded next
5. Files are then loaded in alphabetical order of the entire path

Given the list, it's critical to build yourself some preliminary knowledge about the file structure of a Meteor application in that understanding, say, which file goes to where (client/serer) and which files are eagerly loaded is crucial to deciding how to structure an application.

Getting back to your application. The webpage you are presented is essentially the React component Layout containing another React component Welcome. They are mounted by react-mounter onto a DOM node in a HTML template, which I believe in your example application is a file named 'client/index.html' or 'client/hello.html'. The aforementioned node is usually a div with a specified id attribute, or a DOM node created by react-mount at run time.

Speaking of the server side, Meteor runs a value-added HTTP web server for when you start a Meteor application, and you program the features you like to have with Meteor APIs.

I hope the information above help you proceed with building applications with Meteor. Enjoy!