A Simple User Avatar: Meteor, React, S3

sylar avatar by: http://robhough.deviantart.com/

This is just a basic tutorial to get you up and running with Meteor and React using Edgee Slingshot. This tutorial won’t go in the process to setup a bucket on Amazon S3, I assume already have that setup, with knowledge of React v0.14 and Meteor. Today, I’ll be using Meteor 1.3 beta 4.

In our meteor folder, we’ll install slingshot:

meteor add edgee:slingshot

We’ll create a rule in our meteor app on the server called “avatar_rules.jsx”. You can call that whatever you like. See file:

Now to to whip up our react component (views):

We are almost done. We need a basic routing setup. For this tutorial, it will be very minimal just to show how we use FlowRouter. See this blog post for the setup!

Assuming we have our routes, we’ll have it like this:

So far I assume you have setup a pub for your userData and we subscribe to it in the router and making sure the data is ready. You can get fancy by using a dummy image until the user uploads a profile image.

If any errors, modifications or improvements do let me know. As noted, this is just a very basic tutorial without any progress bar etc.

I forgot our AWS keys!

In the root of our meteor app:

touch settings.json settings-development.json

In the settings.json we’ll add our keys:

You may need to restart your server with:

meteor --settings settings-development.json

PS: I’m a noob so I post things that are helpful with my startup project. Peace!