UPDATE

You can now use my CLI to get the client part of your Meteor app!

---

If you’re impatient go here: https://github.com/frozeman/MeteorFrontend

Meteor is awesome, i loved it immediately as i saw the video. The way you can build one page apps is absolutely intuitive. I struggled with Ember.js, Backbone.js and AngularJS (which clutter the HTML too much), but Meteor really got it, in my opinion.

The problem with Meteor is that it forces you to use the full-stack. Natively there is currently no easy way to separate the frontend from the server in Meteor.

As i’m using Meteor to build the awesome TunedIn WebApp and we have already an existing API, i was in the need to split Meteor. Out of any need comes a solution so i wrote a grunt script which takes care of this automatically.

Automated Meteor decoupling

The script runs the $ meteor bundle ... command, extracts the bundle and copies the frontend part to the dist/ folder. It even takes care of adding the required __meteor_runtime_config__ variable to the resulting index.html.

In detail the process will do the following tasks:

// empties the "bundle/" folder
'clean:bundle',
// bundles your meteor app
'shell:bundleMeteor',
// extract the bundle.tar to the "bundle/" folder
'shell:extractMeteorBundle',
// cleans the "dist/" folder and deletes the bundle.tar
'clean:dist',
// copies all the client files to the "dist/" folder
'copy',
// renames the app.html -> index.html
'rename',
// replaces the placeholders in the index.html with the __meteor_runtime_config__ variable
'string-replace',
// starts the server to test your distribution at http://localhost:9000
'connect:dist'

Download the repo and try it yourself: https://github.com/frozeman/MeteorFrontend

Hints

When only using meteors frontend you have to keep a few things in mind.

Add your js files to the app/client/ folder, as meteor then for sure knows where they belong, and you don’t have to deal with the Meteor.isClient variable.

You need to change the ROOT_URL variable in the Gruntfile.js and set it to the URL of your server, where you want it to deploy.

Additional you need to disconnect from the Meteor server, as he otherwise constantly tries to reconnect. Just add these lines to your code:

Meteor.connection._stream._retryTimeout = function(){ return 365 * 24 * 60 * 60 * 1000};
Meteor.connection._stream._lostConnection();

Those make sure he won’t try to reconnect for the next 1000 years 🙂

Note: this package uses meteor 0.6.5, if you want to use a previous version, change the lines above to Meteor.default_connection._stream...

Collections

When you want to use a local collection for storing data and create some nice reactivity you need to create unmanaged collections like this:

var myCollection = new Meteor.Collection('myCollection', {connection: null});

if you’re using a version of Meteor previous 0.6.5 you only can create one unnamed unmanaged collection like this:

var myCollection = new Meteor.Collection(null);

Images

All files inside the app/public/ folder will be copied to the root of your web server (or the dist/ folder) and you won’t need to change any paths.

Meteor packages

To slim down meteor you can also remove the standard-app-packages package and add the following packages back to your app/.meteor/packages file (or manually with $ meteor add ...)

I’m not quite sure, if they are all really needed, as there is no real description for the core packages. I just removed the ones, which i guess contact the server, any suggestions are welcome.

meteor
session
deps
templating
spark
handlebars
universal-events
startup
preserve-inputs
service-configuration
audit-argument-checks
check
underscore
json
jsparse
liverange
localstorage
logging
minimongo
ordered-dict
reactive-dict
reload
amplify
http
webapp
minifiers

Conclusion

Using this grunt script makes it fairly easy, so go ahead and download it here: https://github.com/frozeman/MeteorFrontend

Please comment, i’m happy to hear any suggestions!