TRAM: Create-react-app (webpack2/postcss) + typescript + meteor (w/ diagram)

announce
1

TRAM: Typescript-React-Asteroid-Meteor
Check it out: GitHub - Falieson/TRAM: Typescript+React+Asteroid+Meteor project starter (example) (26 commits now)

what I have proven is:
create-react-app (typescript version and then ejected)
logging in from the client via asteroid (a ddp client)
meteor 1.6-beta.18 on the server
typescript on the client

How? Not even that hard…

  1. I started with GitHub - juliancwirko/react-redux-webpack-meteor: React demo app with Webpack, Redux and Meteor as a backend only
  2. Upgraded server/meteor to 1.6-beta.18
  3. moved client/ to .trash/client
  4. create-react-app client --scripts-version=react-scripts-ts
  5. a little code tweaking to reproduce logging in functionality from @juliancwirko 's app in the new CRA client/

Track my repo as I migrate GitHub - Falieson/react-typescript-meteor into it.

Final product:
– frontend: react (community standard)
---- webpack 2
---- PostCSS
---- typescript (meteor community is lacking in typings)
---- local npm module development
---- independence from Meteor
– testing
---- jest testing on client/
---- chimp testing on server/ (meteor pub/sub/methods/logic etc)
---- single command to run all testing
---- more testing as I figure it out

I’ve used @jedwards Crater for a couple months, and before that reactivestack’s webpack integration, and the concept is similar but I think this is a more stream lined way of attacking the same issue.

Here’s a diagram explaining it:

13 AM
13 AM2610×2274 753 KB

3 Likes
2

this looks interesting and promising! what is your goal with the server? ie. why use meteor on the server instead of just throwing up an express app (for example).

are you planning to leverage the meteor accounts system or the ease of apollo integration? i’m curious because i’ve been wrestling with the same problems for some time now.

3

It would be more interesting/powerful to use this combination:

  • Next.js
  • Meteor
  • Meteor Client Bundler (MCB)
4

what would be the upside of next.js here?

5

I’m going to be taking over all the frontend work for an existing team. They used Meteor (familiarity) and the overall project architecture relies heavily on MongoDB. So I’m basically just using Meteor as a reactive websocket/ddp connection to mongodb. My vision is to replace this with graphql client/server setup but that decision won’t probably be made for many months.

To: all
I’ll be updating the diagram by the end of the week

6

Whats the point of MCB? What it brings to table?

7

MCB allow you tu effortlessly use Meteor with any client side framework.
Read this

8

I tried MCB and I couldn’t get the react-create-app todo repo to work, or following the blog instructions. Neat idea that would keep the frontend from looking too different than a meteor-app and I would probably shift that direction if it worked.