Starter Kit with Meteor 1.8, Apollo 2, React 16, Multilingual support, PWA, SSR, Authentication & Styled-Components


#1

For those interested, I’ve just released a starter kit which features a number of desirable features when creating a new Meteor project:

  • Apollo 2 GraphQL server running with Express bound to the Meteor (1.8) app
  • React 16
  • Multilingual support (using react-intl) with dynamic loading of required locale messages
  • Authentication: password & facebook (via meteor accounts)
  • SSR with support for an app-shell specific route
  • App-Shell based architecture with dynamic loading of required components
  • Styled components
  • Recompose
  • Jest & Enzyme for testing
  • Storybook
  • sanitize.css
  • basscss
  • basic admin functionality via alanning:roles
  • Code splitting on startup and router level
  • Progressive Web App features

The kit is based on the excellent work done by excellent work done by Federico Rodes, however it’s since been heavily modified to provide a more recent base as well as server-side rendering.

I’m happy to have other people propose changes and improvements to try to keep this starter kit up-to-date with updates to Apollo and Meteor.

UPDATE:

I’ve just released a huge update in order to add Multilingual support. It’s best to think about internationalisation from the start of project, so it’s now included in the kit. I’ve updated this pose to reflect that.

Tim


Thingking about Meteor 2.0 :thinking:
#2

Great work! Would also be great if one could submit an issue to that repo.

With regards to service worker and saving to homescreen, I’m looking to pull just that bit out of the repo for an existing app that doesn’t use SSR.

I see this in the code regarding the route:

  // /app-shell is a special route that does no server-side rendering
  // It's used by the service worker for all navigation routes, so after the first visit
  // the initial server response is very quick to display the app shell, and the client
  // adds in the data.

  // In the case of a first visit or a robot, we render everything on the server.

  if (sink.request.url.path === '/app-shell') {
    sink.appendToBody(`<script>window.__APOLLO_STATE__=${JSON.stringify(ssrClient.extract())};</script>`);
    sink.appendToBody(MeteorLoadable.getLoadedModulesScriptTag());
    return;
  }

How should this be handled for non-SSR apps?


#3

Hi,

I’ve enabled issues.

The ssr.js (and the corresponding import) can just be removed if you don’t need SSR. You should also remove these lines from the service worker:

// Cache the App Shell route. We try to get latest from the network, fall back to cache for offline.
workbox.precaching.precache([APP_SHELL]);
workbox.routing.registerRoute(APP_SHELL, new workbox.strategies.StaleWhileRevalidate());

// Our App Shell, used by all navigation routes.
workbox.routing.registerNavigationRoute(APP_SHELL);

#4

This looks great :100:. I look forward to trying it out!


#5

Sorry, I won’t use it. Already out of date. Need to update to Meteor 1.8…

(just kidding!! nice work!)


#6

Damn, that looks very good.

I’ve come to dislike redux + meteor for state and data management. It works fine, but lots of overhead. Apollo seemed good in that regard.
Styled component was the last library I tried for CSS, and I love it.
App-Shell based architecture fits perfectly my use case, I was intending to add the dynamic loading soon.
PWA, SSR, all good stuff.

How easy would it be to remove some of the features/packages, like alanning:roles and authentication ? I’ll check for myself in a few days - I might use your starter kit for my project - but I know these 2 will have to go.


#7

It’s always dead easy to remove stuff.

The idea is to take the starter kit, remove what you don’t like and go from there. It just gives you a working basepoint.


#8

This is absolutely incredible. Learning a lot of new tricks and techniques simply by looking through it. Thank you for your efforts!


#9

The kit is now updated to Meteor 1.8 :slight_smile:


#10

I’ve cloned the app, followed the instructions and started the meteor app. It opens and I can login, but the “new version” alert shows up every time until I click “cancel”. If I refresh, it shows up again.


#11

Hi.

This sounds like a problem between the service worker and Meteor’s auto-refresh. If you can track it down that’d be great. If not, try removing the service worker registration for the time being, by removing this line:

import('/app/ui/register-sw').then(() => {});

#12

UPDATE:

I’ve just released a huge update in order to add Multilingual support. It’s best to think about internationalisation from the start of project, so it’s now included in the kit.

Tim