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/
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
- create a new file called
manifest-pwa.json
based on the providedmanifest-pwa.sample.json
(see/public
folder). - 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;
- copy your sender id to your manifest-pwa.json and your server key to your settings.json ("firebase": { "privateKey": ...);
- open a terminal and install 'web-push' globally:
npm i -g web-push
; - generate VAPID keys:
web-push generate-vapid-keys --json
; - 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:
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
styled components
React
- Render props: https://www.youtube.com/watch?v=BcVAq3YFiuc
Testing on real devices
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