Skip to content

Latest commit

 

History

History
227 lines (181 loc) · 9.63 KB

README.md

File metadata and controls

227 lines (181 loc) · 9.63 KB
Raw

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: lighthouse

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;
  1. copy your sender id to your manifest-pwa.json and your server key to your settings.json ("firebase": { "privateKey": ...);
  2. open a terminal and install 'web-push' globally: npm i -g web-push;
  3. generate VAPID keys: web-push generate-vapid-keys --json;
  4. 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:

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

Progressive Web Apps / Service Workers

PWA off-line support

Service Workers Scripts

Dynamic imports

styled components

React

Testing on real devices

TODO LIST