Using a Parse-server with React Native

Lately I've been learning React Native using Stephen Grider's course (on Udemy) called Build Apps with React Native. I highly recommend it for anyone that has experience in Javascript (though not required) and wants to learn how to develop mobile apps.

His tutorials are nearly flawless, and explains all the material intuitively in great detail. However, Parse recently decided to retire it's services and a lot of people have been forced to either switch to another BaaS, or deploy there own Parse-server.

I ran into a problem in his authentication section that I could not continue learning from his tutorials as I could not use Parse.com. So instead, I decided to deploy my own Parse-server on Heroku so that I could still closely follow along.

Parse Server is an open source version of the Parse backend that can be deployed to any infrastructure that can run Node.js.

The following tutorial is to help out the others that want to also finish his authentication tutorial due to the Parse shutdown.

Set up Parse Server on Heroku

Firstly, you have to get your own Parse-server up and running. I suggest using this tutorial from Heroku as it is the easiest to understand. *Note that 'MongoLab' has recently changed their name to 'mLab'.*
It's a very simple process that you should not encounter much trouble with. For testing, you can keep your appId as 'myAppId' and your masterKey as '' for now as you're just learning.

Once you have a successfully deployed server on Heroku you can test it by opening your terminal and running:

curl -X POST \
   -H "X-Parse-Application-Id: myAppId" \
   -H "Content-Type: application/json" \
   -d '{}' \
   https://<YOUR-APP-NAME>.herokuapp.com/parse/functions/hello

You should receive a response back:

{"result":"Hi"}

Changes to 'Lecture #59. Parse Integration'

You can now continue with Stephen's tutorial and use parse in your application with some minor changes. In his tutorial you simply copy the Parse.initialize() with the keys from Parse.com.
However now you have a server with your own keys, and you also need to specify the URL since you are not using Parse.com. Hence, your componentWillMount React function should look like this:

componentWillMount: function() {
  Parse.initialize('myAppId','unused');
  Parse.serverURL = 'https://<YOUR-APP-NAME>.herokuapp.com/parse';
},

If you haven't changed any keys before deploying to Heroku you can simply copy the above function. Otherwise, just replace with your keys.

Following to Stephen's '#60 Parse Installation' tutorial you should be able to receive a similar error message that reads Invalid username/password.

ParseError - Invalid username/password

If not, then either you have not configured your server properly. Make sure that you have not forgotten '/parse' at the end of the URL. You should be able to display the error message in your application.

ParseError - Display error message

Changes to 'Lecture #61 - User Sign In'

The next time you will have an issue, is using the Parse.com Dashboard which you will not be able to access, obviously. The workaround is simply using your Parse server to create a new user:

curl -X POST \
  -H "X-Parse-Application-Id: myAppId" \
  -H "Content-Type: application/json" \
  -d '{"username":"TEST","password":"PASSWORD"}' \
  http://<YOUR-APP-NAME>.herokuapp.com/parse/classes/_User

This should return a _User object on creation:

{"objectId":"FZWXZCNnjk","createdAt":"2016-03-31T04:12:45.137Z","sessionToken":"r:f728e2a4314bd1f5d830f7aaa29b0bb8"}

Make sure it has a sessionToken in the object, otherwise you have mistyped something (most likely the class name _User)

ParseError - Display error message

That's it!

From here you should be able to finish up the tutorial without any more problems! Thanks again to Stephen for this fantastic tutorial.