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.

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.

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)

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.

I decided to dive head-first into learning React Native today. Why, you ask, do I not just use Xcode and learn Swift (which I have heard was really great, actually) and then also use Android Studio and code in Java.

That basically answers the question. Cause I'm lazy. I want to develop native mobile apps, but yet I would basically have to rewrite the front-end twice in two different languages. That's quite a pain in the ass.
I know it could possibly make me a better programmer down the road. And my expertise could be more in demand in the future (maybe, but also maybe not).

However, I want to develop and release to multiple platforms with as little 'mode-switching' in my mind as possible right now. For this consistency, I think React Native will take off. Plus, there is the bonus feature of not having to wait 2 hours for compilation every time you make a change, which is quite nice. But, even if React Native hits an iceberg and sinks, React will still be around for web developers. This is also quite nice to fall-back on.

Setup (OSX)

You will need to install Xcode and the Android Studio SDK installed.

You should also have Node.js installed on your system. I suggest using nvm to switch between versions as React Native may require different versions from your other applications.
There are multiple ways to install nvm, and how you do it I'll leave to personal preference.

Next you need to install watchman which is a file watching service built by Facebook:

brew install watchman

Next, you need to install the React Native client:

npm install -g react-native-cli

Generating a Project

Thereis just one simple command to generate a new React Native project:

react-native init <name-of-project>

Testing

By default, React Native builds a running application.
Launch your server by running:

npm start

If you have your Xcode and Android Studio setup correctly you can launch the emulators or run it directly on the device.

iOS

react-native run-ios

This will launch an iOS emulator on your machine, which will you will see the following page on it:

Android

You can run a similar command for Android:

react-native run-android

However, you may get a red error screen if it is not set up on the correct IP address. To fix this you need to get to the dev menu by pressing Cmd+D or shaking the physical device

Then click Dev Settings and under "Debugging", select "Debug server host & port for device"
Enter: <Your_ip_address>:8081

To find out the IP address of your computer (from System Preferences > Network OR you can run $ ifconfig | grep 'inet') and make sure your device is on the same network.

Reload it and you should see the same welcome screen above!

References

https://facebook.github.io/react-native/docs/getting-started.html

I thought it would be fitting to start off my first blog post explaining to those starting out how I actually got Ghost up and running.

There were a few blogs out there that suggested to use the Quick Install method. However, at some quick first attempts I encountered a number of issues (mostly revolving around Buster and its generate command failing after trying to fix links:
fixing links in /Users/<user>/Development/Node/ghost-0.7.8/static/index.html)

So I decided to do what any sane developer would do and to clone the entire repo (which will also come in handy when I have time to contribute to the project anyway).

Getting Started

Make sure you have Node.js installed prior to doing any of the following.
I cloned the repo in a folder of my choosing (renaming it 'Ghost') and then entered it:

git clone https://github.com/TryGhost/Ghost.git "Ghost"
cd ghost

Next, install the Grunt CLI globally if you haven't already:

npm install -g grunt-cli

Time to install Ghost itself:

npm install

And wait...
Since we are going to be deploying for production we want to use the stable branch:

git checkout stable

Next we build and minify for production:

grunt init
grunt prod

Some more waiting while it spins... go read a book or something productive.
When it is done we can finally run a local server to see if everything is running smoothly!

npm start

Navigating to www.alekseev.ca/blog/ in your browser, you should see

Setting up your Blog

When you navigate to www.alekseev.ca/blog/ghost you will be taken through a setup process for your blog.
Make an account and when the process is finished you will see the admin screen:

As you can see it is simple and intuitive to understand, unlike some other blogging platforms that tend to overcomplicate matters.

Feel free to customize it to your liking. Add your logo and a background. You can change themes later (instructions below) or even create your very own.

First Deploy with Buster

Firstly, you want to create a new Github repo named <your-user-name>.github.io

Secondly you want to make sure pip is installed on your system:

easy_install pip 

Use pip to install Buster:

pip install buster

cd into your Ghost repo. We need to link Buster to your github repo and create that static folder:

buster setup
https://github.com/<username>/<username>.github.io.git

Since Buster generates static files from a local server, we need to make sure the server is running:

npm start

and in a separate terminal window (in the same Ghost directory) run:

buster generate --domain=www.alekseev.ca/blog/

This will generate static files from a local running server and places them inside a static folder from where the command was called.

One last step! You need to push it up to github in one of two ways:

buster deploy 

OR (like most sane people would do)

cd static
git add .
git commit -m "first commit"
git push origin master

Check <your-user-name>.github.io to make sure it deployed correctly!

Blog Workflow

1. If it is not already obvious, you need to run your local server with npm start and navigate to www.alekseev.ca/blog/ghost
2. Click new post and add your . When you're finished markdown and click "Publish now" on the top right corner
3. Use the buster generate --domain=www.alekseev.ca/blog/ command above to rebuild your updated static folder
4. Deploy to github:
   
   • buster deploy
   • or cd static/ and push it up to your remote on github normally.

     Remember you need to have your local server running in the background before you use buster generate

5. Pray someone actually reads it. Or you can spam it all over social networks and piss people off with your wise-cracks. Your choice.

Customize

1. Find a theme http://marketplace.ghost.org/themes/free/ and its Github repo
2. cd <path>/Ghost/content/themes
3. git clone <repo-of-theme> "<name-of-theme>"
   
   • Example: git clone https://github.com/oswaldoacauan/ghostium/ "ghostium"
4. cd ../.. (Back to your Ghost root directory)
5. npm start (Run your server)
6. Go to www.alekseev.ca/blog/ghost/settings/general/ and select the newly installed theme from the drop down. Restart the server and you will see it.
7. Dance!

Some themes have more configuration options than others. Such as Google Analytics, Disqus, etc.

Of course even if it doesn't you can add it yourself cause you're a smart cookie. Enjoy!