Meteor Build Client

Builder and bundler for the client part of a Meteor application. As a result it would generate simple index.html, so it can be hosted on any server or even loaded via the file:// protocol.

Installation

npm install -g meteor-build-client

Important notes:

The Meteor/Atmosphere package frozeman:build-client is just a placeholder package, there's no need to install it;
Warning: the content of the output folder will be deleted before building the new output! So don't do things like meteor-build-client /home!
Do not use dynamic imports! e.g. import('/eager/file');;
By default this package link legacy ES5 bundle build.

Output

The content of the output folder could look as follows:

index.html
a28817fe16898311635fa73b959979157e830a31.css
aeca2a21c383327235a08d55994243a9f478ed57.js
... (other files from project's /public directory)

Usage

List all available options and show docs:

meteor-build-client --help

Usage examples:

# cd to meteor app
cd /my/app

# run meteor-build-client
meteor-build-client ../output/directory

# build meteor app as usual
meteor build ../build-directory --directory
# bundle client-only assets with meteor-build-client
meteor-build-client ../build-directory-client --url https://example.com --usebuild ../build-directory

Passing a settings.json

Pass Meteor's settings.json settings file via --settings or -s option:

meteor-build-client ../output/directory -s ../settings.json

Note: Only the public property of that JSON file will be add to the Meteor.settings property.

App URL

Set the ROOT_URL of the application via --url or -u option:

meteor-build-client ../output/directory -u https://myserver.com

By passing "default", application will try to connect to the server from where the application was served. If this option was not set, it will set the server to "" (empty string) and will add a Meteor.disconnect() after Meteor was loaded.

Absolute or relative paths

To serve application via file:// protocol (by opening the index.html) set --path or -p option to "" (empty string). This would generate relative paths for assets across the application:

meteor-build-client ../output/directory -p ""

The default path value is "/".

Note: "path" value will replace paths in generated CSS file. Use it to link fonts and other assets correctly.

Using your own build folder

To use pre-build Meteor application, built using meteor build command manually, specify the --usebuild <path-to-build> flag and meteor-build-client will not run the meteor build command.

Best practices

Tips'n tricks using client bundle

Recommended packages for client-only build

When building server-less standalone web application we recommend to replace meteor-base with meteor and webapp packages.

@@ .meteor/packages
- meteor-base
+ meteor
+ webapp

Template

Following Meteor's recommended usage of <meteor-bundled-css /> and <meteor-bundled-js/> this tags will be replaced with links to generated CSS and JS files respectively. Optionally, use {{url-to-meteor-bundled-css}} as a placeholder for URL to generated CSS file. We encourage to use static-html (for non-Blaze projects) or blaze-html-templates (for Blaze projects) package for creating bare HTML template in your app, minimal example:

<!-- client/head.html -->
<head>
  <meta charset="UTF-8">
  <!-- recommended "fragment" to mark as JS-powered website for search engines -->
  <meta name="fragment" content="!">

  <title>My Meteor App</title>

  <!-- [optional] recommended "preload" for CSS bundle file -->
  <link rel="preload" href="{{url-to-meteor-bundled-css}}" as="style">
  <meteor-bundled-css />
</head>

Where <meteor-bundled-css /> will be replaced with <link /> element to generated CSS file(s) and {{url-to-meteor-bundled-css}} will be replaced with URL to generated CSS file.

<!-- client/body.html -->
<body>
  <meteor-bundled-js />
</body>

Where <meteor-bundled-js /> will be replaced with <script /> element(s) to generated JS file(s).

Connecting to a Meteor server

In order to connect to a Meteor servers, create DDP connection by using DDP.connect(), as seen in the following example:

// This Should be in both server and client in a lib folder
DDPConnection = (Meteor.isClient) ? DDP.connect('http://localhost:3000/') : {};

// When creating a new collection on the client use:
if(Meteor.isClient) {
  posts = new Mongo.Collection('posts', DDPConnection);

  // set the new DDP connection to all internal packages, which require one
  Meteor.connection = DDPConnection;
  Accounts.connection = Meteor.connection;
  Meteor.users = new Mongo.Collection('users');
  Meteor.connection.subscribe('users');

  // Subscribe like this:
  DDPConnection.subscribe('mySubscription');
}

Making routing work on a non Meteor server

To enforce JavaScript routing, all requests should point to index.html. See below "rewrite" instructions for various http/proxy servers.

Apache

Create .htaccess for Apache with mod_rewrite rules:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # Always pass through requests for files that exist
  # Per http://stackoverflow.com/a/7090026/223225
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule . - [L]

  # Send all other requests to index.html where the JavaScript router can take over
  # and render the requested route
  RewriteRule ^.*$ index.html [L]
</IfModule>

Nginx

Use try_files and error_page to redirect all requests to non-existent files to index.html. Static files will be served by nginx itself.

server {
  listen 80;
  listen [::]:80;
  server_name myapp.com;

  index index.html;
  root /var/www/myapp;

  error_page 404 =200 /index.html;
  
  location / {
    try_files $uri $uri/ /index.html;
  }
}

keopasit/meteor-build-client