Updating a 1.2 Tutorial to 1.3


#1

#Situation
I’ve implemented a solution for pdf generation from dynamic data by following this excellent Tutorial by @ryanswapp

#Question
This works great (thx Ryan), but I since the tutorial was written before 1.3 is relies on packages like…

dfischer:phantomjs
meteorhacks:ssr
meteorhacks:npm
(and Webshot via meteorhacks:npm)

…and makes use of them with require like so:

var webshot = Meteor.npmRequire('webshot');
var fs = Npm.require('fs');
var Future = Npm.require('fibers/future');

With the native npm-support in 1.3 this is probably an outdated approach, right?

Does this mean I can just do the following:

  1. get rid of dfischer:phantomjs and meteorhacks:npm (and probably meteorhacks:ssr?) and install the same via npm install (package) --save-dev .

  2. use imports instead of require to use those packages. Is this neccessary/recommended?

  3. Is there anything else I would need to change to make such a transition?

Thanks for any kind of help!


#2

That sounds about right!


#3

Great, Thanks @sashko. I’ll go this route then.

@ryanswapp
While I’m implementing this, I’ll see if I can update the source code you added to the tutorial.
This was extremely helpful to me and I guess and updated version would be useful for others :slight_smile:


#4

About the meteorhacks:ssr package:
Should I replace it with something from npm?
Or is this still the correct solution in meteor 1.3?

(I’m stumbling about the word “meteorhacks” here)


#5

The SSR package should still be fine. Just swap out import for require and you should be fine.


#6

@nilsdannemann One thing to note here is that the import keyword won’t work within a Meteor.isServer block. You will have to use a regular node require in that circumstance. If you’ve structured your code in such a way that you don’t have Meteor.isServer blocks then you don’t need to worry about it. Thought I should mention it just in case your app is breaking and you can’t figure out why :smiley:


#7

Wow, thanks @ryanswapp. I would have totally stumbled over that. :smiley:

Just to clarify:
Putting something in the ‘server’-folder is the same as wrapping it in an Meteor.isServer block in this case?
(Meaning: A regular require is necessary here?)

And since we’re defining a method for the pdf-generation it has to be there I guess?

In general:
To be honest I’m not sure when to use import vs. require.
I thought import was the fancy new meteor-1.3-way. But for some reason only the old way is working on the server?


#8

babel translates import statements to require statements when transpiling ES2015 to ES5. So, require is still … errm … required. So for example

import { _ as lodash } from 'lodash';

is translated to

var _lodash = require('lodash');

The ecmascript specification for import is that it must be at the top of a source file (before any executable statements), whereas require can appear anywhere.


#9

Oh, wow, thanks @robfallows for clearing that up! :slight_smile:

So I guess import doesn’t work on the server, because babel doesn’t run there?

It there a reason for that?
Why doesn’t Meteor/MDG make imports available on both client & server?


#10

@nilsdannemann No you can totally put import in the server folder. I’m referring to code that lives in the lib folder (where many people put Meteor methods and other universal code). Because code in the lib folder runs on both the client and server it is sometimes necessary to specify that a particular bit of code runs only on the server with Meteor.isServer. Here are some examples of what will and will not work:

Won’t work

if (Meteor.isServer) {
  import moment from 'moment';
// Use moment
}

Will work

import moment from 'moment';
if (Meteor.isServer) {
  // Use moment
}

Will work

if (Meteor.isServer) {
  let moment = require('moment')
  // Use moment
}

These examples just illustrate that if you want to pull in a library within a Meteor.isServer block you need to use the require statement. Otherwise you can use import at the top of the file.


#11

Awesome, thanks @ryanswapp !

Everything worked (although the newest webshot version seems to have problems with bootstrap css).
I’ve cloned your repo, made a new branch, added an updated version in a final_updated folder and tried to send a pull request. Unfortunately I got an error:

Since I haven’t sent pull requests via github before:
Do I need special permissions to do that? Or is this the wrong way to send you my changes?

Edit: I’m definitely logged in :smiley:


#12

@nilsdannemann It looks like you may be trying to push code rather than pull. Did you fork the repo to your own personal github account before trying to make changes?


#13

Ah, no. I just cloned yours to my local machine.
So the correct way would be fork -> branch -> commit changes -> pull request ?


#14

Yup! Thats the way to do it. :thumbsup: