Meteor, Apollo, React, PWA, Styled-Components boilerplate

A simple kit to start experimenting with Apollo, Meteor, React, PWA and Styled Components.

Short video showing the app's capabilities: https://youtu.be/4eMNUycIbN8

Code is deployed here: https://meteor-apollo-starter.herokuapp.com/

Lighthouse audit:

This project includes the following libraries/functionality

• GraphQL server running with Express bound to the Meteor (1.6.1) app
• Apollo 2
• React 16
• Redux
• Authentication: password & facebook (via meteor accounts)
• ES6 syntax
• styled components
• Storybook
• sanitize.css
• basscss
• basic admin functionality via alanning:roles
• code splitting on startup and router level
• Progressive Web App features:
  • service-worker;
  • caching;
  • add to home screen;
  • push notifications;
  • app shell architecture;

Other flavors

Checkout 'material' branch for a material-ui version (https://material-ui-next.com) of this boilerplate.

Checkout 'auth-overlay' branch for a passwordless + facebook authentication options. It also uses material-ui component's library and has jest-enzyme test libraries setup. (THIS BRANCH IS THE MOST UP TO DATE!)

Step by step guide to get started with this boilerplate

1. Clone the project and install NPM dependecies:

git clone https://github.com/fede-rodes/meteor-apollo-starter-kit.git
cd meteor-apollo-starter-kit/
meteor npm install

2. Create your settings.json file:

Create a new file called settings.json based on the provided settings.sample.json.

3. Register the app on Mailgun:

Mailgun will allow you to use password authentication service and send emails from your app.

In order to get started, first access your Mailgun account. Then, grab your sandbox domain smtp username and password and copy said values into your settings.json file. Finally, add your email address to the list of Auhtorized Recipients.

4. Register the app on Facebook:

Follow this tutorial to register the app on Facebook; this will allow you to use Facebook authentication service. Once you get your appId and secret key, copy said values back into your settings.json file.

5. Setup Push Notifications Service

1. create a new file called manifest-pwa.json based on the provided manifest-pwa.sample.json (see /public folder).
2. get your Google Cloud Message (GCM) server key and sender id from Firebase as follows:

• first, got to your Firebase account: https://console.firebase.google.com/;
• click on 'Add project';
• click on 'settings' ('gear' icon, top left);
• move to the 'CLOUD MESSAGING' tab at the top;
• you should be able to see both server key and sender id;

3. copy your sender id to your manifest-pwa.json and your server key to your settings.json ("firebase": { "privateKey": ...);
4. open a terminal and install 'web-push' globally: npm i -g web-push;
5. generate VAPID keys: web-push generate-vapid-keys --json;
6. copy-paste your VAPID keys into your settings.json file;

6. Run the app

That's enough config for today, you should now be able to run the app locally:

meteor --settings settings.json

GraphiQL should be available at http://localhost:3000/graphiql.

7. Deploy to Heroku

In case you want to deploy the app to Heroku, follow these steps:

1. open a new terminal
2. type: 'heroku login' (enter your credentials)
3. heroku create <YOUR_APP_NAME>
4. heroku buildpacks:set https://github.com/AdmitHub/meteor-buildpack-horse.git
5. heroku addons:create mongolab
OR
5. heroku config:set MONGO_URL=mongodb://<dbuser>:<dbpassword>@<something>.mlab.com:<port>/<dbname>
6. heroku config:set ROOT_URL=https://<YOUR_APP_NAME>.herokuapp.com
7. heroku config:add METEOR_SETTINGS="$(cat settings.json)"
8. git push heroku master
OR (if you are working on a different branch than master)
8. git push heroku <BRANCH-NAME>:master
9. heroku open

More resources

Running storybook

Open a new terminal (the meteor app doesn't need to be running) and type:

npm i -g @storybook/cli
npm run storybook

Storybook will be available at http://localhost:6006/.

Favicon / manifest generator

In order to generate the favicons for your project, you can use the following generator: https://realfavicongenerator.net/

Bundle-visualizer

cd meteor-apollo-starter-kit/
meteor --extra-packages bundle-visualizer --production --settings settings.json

Then go to: http://localhost:3000/

Finding dependencies:

npm ls <lib-name>

Before deploying to production, if you used --extra-packages, simply remove bundle-visualizer from the list of included packages and run meteor as normal.

Learn more at:

• https://blog.meteor.com/announcing-meteor-1-5-b82be66571bb
• https://blog.meteor.com/putting-your-app-on-a-diet-with-meteor-1-5s-bundle-visualizer-6845b685a119

Look for meteor package dependencies

The following command is handy when trying to reduce your client bundle size and need to identify where the dependencies are coming from.

meteor list --tree

OR

for p in `meteor list | grep '^[a-z]' | awk '{sub(/[+*]$/, "", $2);
print $1"@"$2 }'`;
do echo "$p";
meteor show "$p" | grep -E '^  [a-z]';
echo;
done

Learn more:

• meteor/meteor#2853 (comment)

Lighthouse

npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse

Then, open a new terminal and run meteor in production mode so that assets get bundle and the app's performance gets to a real deployment meteor run --production --settings settings.json

After that, open a new terminal and run: lighthouse http://localhost:3000

In case you run lighthouse inside the /meteor-apollo-starter-kit app's folder, you'll need to delete the report generated by the audit to avoid a static-html error. See issue #60 for more info.

Further reading: articles, docs and (video) tutorials

Meteor Apollo

• Meteor apollo package docs
• Apollo docs
• https://blog.meteor.com/create-a-simple-hello-world-app-with-meteor-and-apollo-64bab66a456f

Progressive Web Apps / Service Workers

• https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-i-introduction-50679aef2b12
• https://dzone.com/articles/introduction-to-progressive-web-apps-offline-first
• https://dzone.com/articles/introduction-to-progressive-web-apps-instant-loadi
• https://dzone.com/articles/introduction-to-progressive-web-apps-push-notifica
• https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0
• https://www.made-on-mars.com/blog/how-to-pwa-an-introduction-on-progressive-web-app-and-a-tutorial-to-create-one-with-full-features-push-notification-service-worker-offline-mode/
• https://jakearchibald.com/2014/offline-cookbook/
• https://youtu.be/cmGr0RszHc8
• https://classroom.udacity.com/courses/ud899
• https://developers.google.com/web/fundamentals/codelabs/push-notifications/
• https://dzone.com/articles/web-push-notifications-1
• https://medium.com/@firt/pwas-are-coming-to-ios-11-3-cupertino-we-have-a-problem-2ff49fd7d6ea
• https://serviceworke.rs
• https://ada.is/progressive-web-apps-talk/
• https://web-push-book.gauntface.com
• https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications
• https://developers.google.com/web/fundamentals/app-install-banners/?hl=en#deferring_or_cancelling_the_prompt
• https://developers.google.com/web/tools/workbox/

PWA off-line support

• https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-3-offline-support-and-network-resilience-c84db889162c
• https://codelabs.developers.google.com/codelabs/your-first-pwapp/#1
• https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html

Service Workers Scripts

• https://github.com/mozilla/serviceworker-cookbook
• https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker
• https://github.com/jakearchibald/isserviceworkerready/tree/gh-pages/demos
• https://github.com/NitroBAY/meteor-service-worker
• https://github.com/saurshaz/pwa-meteor/blob/master/client/serviceWorker.js

Dynamic imports

• https://youtu.be/j-WcyAjVceM

styled components

• https://youtu.be/qu4U7lwZTRI

React

• Render props: https://www.youtube.com/watch?v=BcVAq3YFiuc

Testing on real devices

• https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=en

TODO LIST

• keep track of visited routes in order to send the user back to the last (not auth) visited page. Additionally, add last visited page to the account verification link in order to take the user back to the initial page after email account is verified.

• setup apollo subscriptions

• Preact branch

• replace sw scripts with sw-precache + sw-toolbox or workbox

• tests for sw https://github.com/meteor/meteor/blob/devel/packages/server-render/README.md#usage

• tests

• ssr to speed-up first load and SEO

• https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab

• https://www.webpagetest.org

• https://stackify.com/what-is-real-user-monitoring/