Meteor 1.3, Typescript, and React — Keep It Simple

Let’s talk about how Meteor enables an incredibly simple setup for using Meteor + Typescript + React.

Why version 1.3+ of Meteor is important is it has brought full support for Ecmascript modules, and first-class NPM package support. This is a huge development, and I now affectionately refer to this as the holy triumvirate of JS web app development. I really didn’t want to fall back to the terrible buzzphrase of “Javascript Fatigue”, but this is really is one of the things Meteor excels at solving.


The Old Way — Boilerplate

First, let’s look at a baseline setup for Typescript + React when you aren’t using Meteor. The example I’m going to show uses Webpack to do the Typescript compilation and bundling. Note that it mostly follows the Typescript doc’s example setup.

Here’s our directory structure:

webpack.config.json is almost exactly as shown in the following setup from Typescript’s own documentation.

Here’s what all that moderately complicate configuration does: compiles all files which are loaded by src/index.tsx and bundles them into dist/bundle.js. The .tsx extension is the Typescript equivalent to the .jsx extension from React. It allows you to write JSX inside your Typescript.

Another step of boilerplate we need is to configure Typescript by defining a special config file

This tells the compiler where our files are and how to compile them.

Now to actual run this build step, we need to set up some scripts in package.json:

To build the scripts once, we run

npm run webpack

and if we want to run the webpack dev server (which will auto recompile our sources and provide a simple index-traversing http server) we run

npm run webpack-dev-server

Lastly, since we’ve decided to not bundle React / ReactRouter (in order to speed up Typescript recompilation time) by specifying the “externals” configuration in the Webpack config file, we need to have an index.html which resembles the following

Now we can finally render a simple Typescript + React component


Did you catch all of that?

The New Way — Meteor 1.3 + Typescript

Now let’s convert this to Meteor 1.3.

Our new directory structure is going to look like the following

Also, our package.json file can be greatly simplified

Much simpler already. No webpack, webpack loaders, source map generators, and no build commands.

Let’s start the Meteor magic up. We’re going to create a new Meteor project in this folder

cd project/folder/
meteor create .

By default Meteor creates projects which support Blaze, a Handlebars-like reactive templating system. Since we’re not going to use Blaze, let’s drop the packages which support it

meteor remove blaze-html-templates tracker 

And add the (soon to be official, I think) Typescript compiler package

meteor add barbatus:typescript static-html

The additional static-html package replaces the blaze-html-templates package mentioned above. You can read more about that here.

Also, since Meteor handles the loading of our JS and now bundles NPM packages, we can reduce our index.html file to just the following

That’s it. No need to reference bundle files, or external dependencies, or even write the entire <html> and <head> tags!

Meteor does this all for us.

Now to run the app, do the following

$ npm install
$ meteor

This will install react / react-dom from NPM and Meteor (since 1.3) will bundle them up for use on the client just like Webpack! Typescript is also compiled by the Meteor package we installed, and all with zero Typescript configuration!


Wrapping up

I hope this post has shown you just how much simpler it is to get React + Typescript working with Meteor than it is hand-rolling or worse yet copying some ungodly, over-complicated boilerplate Webpack setup. This isn’t to say Webpack isn’t powerful and right for the job. It is incredibly powerful (I use it everyday), but it’s also complicated to learn all of this setup at once.

Meteor alleviates all of this complication and let’s you focus on building better software, faster.

If you have any questions or comments about this feel free to hit me up here or on Twitter. I’m still getting this Typescript setup with Meteor perfected, and would love to learn more!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.