Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/frozeman/meteor-build-client

A tool to bundle the client part of a Meteor app.
https://github.com/frozeman/meteor-build-client

Last synced: about 2 months ago
JSON representation

A tool to bundle the client part of a Meteor app.

Lists

README 

        
# 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.



## ToC:



- [Installation](https://github.com/frozeman/meteor-build-client#installation)

- [Important notes](https://github.com/frozeman/meteor-build-client#important-notes)

- [Bundler output](https://github.com/frozeman/meteor-build-client#output)

- [Usage and examples](https://github.com/frozeman/meteor-build-client#usage)

  - [Pass `settings.json`](https://github.com/frozeman/meteor-build-client#passing-a-settingsjson)

  - [Pass `ROOT_URL`](https://github.com/frozeman/meteor-build-client#app-url)

  - [Use absolute or relative URLs](https://github.com/frozeman/meteor-build-client#absolute-or-relative-paths)

  - [Use pre-build bundle](https://github.com/frozeman/meteor-build-client#using-your-own-build-folder)

- [Tips'n tricks](https://github.com/frozeman/meteor-build-client#best-practices)

  - [Recommended `.meteor/packages`](https://github.com/frozeman/meteor-build-client#recommended-packages-for-client-only-build)

  - [Templating](https://github.com/frozeman/meteor-build-client#template)

  - [Connect to server](https://github.com/frozeman/meteor-build-client#connecting-to-a-meteor-server)

- [HTTP Server/Proxy usage](https://github.com/frozeman/meteor-build-client#making-routing-work-on-a-non-meteor-server)

  - [Apache](https://github.com/frozeman/meteor-build-client#apache)

  - [Nginx](https://github.com/frozeman/meteor-build-client#nginx)

- Get help:

  - [GitHub issues](https://github.com/frozeman/meteor-build-client/issues)

  - [Gitter Chat](https://gitter.im/frozeman/meteor-build-client)



## Installation



```shell

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; For ES6/Modern scripts build an app with `meteor build  --exclude-archs web.browser.legacy --directory` flag and pass it to `--usebuild `, [see docs](https://github.com/frozeman/meteor-build-client#using-your-own-build-folder)



## 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



Things you need to know before exporting your project



### Define where stylesheet links & script links will land

`meteor-build-client` looks for the `` tag in your `` section and the `` tag in the `` section.



Example:

```html



  

  

  



  

  

  



```



**Note**: this does not work for blaze projects. For blaze projects you can only set `` in your header.  It is invalid to set `` in your body, simply leave it out and the right thing will happen.



### Command line usage

List all available options and show docs:



```shell

meteor-build-client --help

```



Usage examples:



```shell

# 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:



```shell

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:



```shell

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:



```shell

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 ` 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.



```diff

@@ .meteor/packages

- meteor-base

+ meteor

+ webapp

```



## 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:



```js

// 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:



```apacheconf



  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]



```



### 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.



```nginxconf

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;

  }

}

```