Express, React on Elastic Beanstalk - Tutorial

In this tutorial I am going to show you how to build a secure website using:

• AWS Elastic Beanstalk 
  With Elastic Beanstalk, you can quickly deploy and manage applications in the AWS Cloud without worrying about the infrastructure that runs those applications.
   
• React 
  A JavaScript library for building user interfaces.
• Express 
  Fast, un-opinionated, minimalist web framework for Node.js.

AWS Elastic Beanstalk uses an AWS EC2 service which is not free. A very basic EC2 instance type t1.micro that includes 600MB disk space and 1 core CPU will cost you around ~16 AUD a month. A domain name from Amazon will cost you  ~16 AUD a year. We are looking at spending a little over 200 AUD a year just to keep this very basic website up and running.

The minimum strength instance type is t2.nano which costs 0.008 $

In return you will have a highly available secure website. Amazon will autoscale your application using a nginx load balancer, so your app will always be available regardless of load. The load balancer will also funnel through https requests into your web server.

AWS elastic beanstalk, Node.js, Aurelia and ESNext

Long story short, I decided to write a web based password management app using the AWS elastic beanstalk stack. The motivation came from:

• I  withdrew MiniBluebox, a simple password manager app I wrote, from the Apple App Store in 2016. Since then it became increasingly difficult to keep up with changes Apple introduced on their iCloud/IOS/OSX ecosystem. On some new iPhone models, iCloud synchronisation started to play up and fail. There are also rumours that in late 2017 Apple will drop support for 32-bit apps. Hence MiniBluebox app will simply disappear from all IOS devices with its data. I need a more reliable infrastructure to serve my apps. 
• I would like to move away from Apple ecosystem and develop cloud based, service oriented web apps using Open Source technologies. This has many advantages:
• Open source is cheaper
• Open source is incredibly dynamic and fertile
• Brand agnostic (web apps work on all platforms, desktop or mobile
• Service oriented apps are extensible
• Leverage my existing AWS knowledge I have been acquiring for over a year.
• Learn about new technologies such as AWS elastic beanstalk, React.JS, and ESNext.

In this blog I will be writing more about my findings as I go along. Stay tuned.

git notes

Create a project directory, initialise git repository and copy some files:

mkdir gitter
git init
ls -a
. .. .git
git add -n /Users/ergun/gitter/         // -n: dry-run

git add /Users/ergun/gitter/            // actual add (stage)
git commit -m 'initial project version' /Users/ergun/gitter/


You may use add command to add new files or stage modified files.

Only staged files can be committed.

This is how you exclude DerivedData folder under your project folder:

Edit .git/info/exclude and add this line:

DerivedData/

x

IOS Provisioning

Creating a Developer Certificate

When developer certificate is close to expire or you have provisioning conflicts you may need to have a fresh start. Start with creating a new certificate:

1. Revoke the old certificate from IOS portal/Certificates
2. Create a new certificate from Keychain Access on Mac using KeyChainAccess/Certificate Assistant/Request a Certificate From a Certificate Authority menu option and Save to Disk.
3. From IOS portal/Certificates upload new certificate then Submit. Refresh browser.
4. Download IOS Development Certificate (ios_development.cer) and run.

Remove the duplicate development certificate

This step is required to fix an error when you build your project in XCode, after installing new certificate:

CodeSign error: Certificate identity 'iPhone Developer: XXXX (12345678)' appears more than once in the keychain. The codesign tool requires there only be one.

Somehow the old developer certificate is cached in XCode and added to KeyChain. To fix this it needs to be removed from KeyChain. The old developer certificate has an earlier expiration date and it is labelled as "iPhone developer..".

1. Exit XCode
2. In KeyChain Access under Login KeyChain/My Certificates category remove the old developer certificate starting with "iPhone developer..".
3. In KeyChain Access under System KeyChain/Certificates category remove the old developer certificate starting with "iPhone developer..".
4. Start XCode. This may recreate the old certificate again. Repeat steps 2 and 3.

App IDs

On the Provisioning Portal App IDs section enable required entitlements (such as iCloud) for both wildcard XXXXXXXXXX.* and XXXXXXXXXX.com.company.product.* App IDs. Enable all entitlements for simplicity.

Create Provisoning Profiles

On IOS Provisioning Portal delete all provisioning profiles under Provisioning section.

You need to create:

1. A Development Provisioning Profile for wildcard App ID
2. An AppStore Distribution Profile for product App ID
3. An Adhoc Distribution Profile for product App ID

On XCode:

1. Remove all provisioning profiles under Organizer/Library and Organizer/Device sections.
2. Under Library/provisioning Profiles click Refresh on the bottom right.
3. Check that under Organizer/Device required profiles were created. If not drag them from Organizer/Library section.

Setup XCode

On XCode

1. Create two Schemes "Adhoc" and "App Store" from Product/Edit(New) Scheme.
2. Set Archive/Build configuration of Adhoc scheme to "Adhoc distribution"
3. Set Archive/Build Configuration  of App Store scheme to "Release".
4. On Build Settings/Targets pick Ad Hoc Distribution Profile for  Ad Hoc Distribution Code Signing Identity.
5. On Build Settings/Targets pick Team Provisioning Profile (generated by XCode) for  Debug Code Signing Identity.
6. On Build Settings/Targets pick App Store Distribution Profile for  Release Code Signing Identity.
7. Delete Product.entitlements file.
8. On Targets/Summary check Entitlements box and fill relevant entitlements. For example if your app uses iCloud, check Enable iCloud checkbox and add your product App ID to Ubiquity Containers section.
9. Some sections will be filled and created by XCode.

If you complete all above successfully you should be able to Debug your app on a connected device, upload your app in Ad Hoc distribution mode to your device, upload your app to App Store, or run your app on a simulator. 

When you are ready to submit to App Store make sure to pick up the App Store Scheme, then Archive.

References:

Video on certificate creation:

CodeSign error: Certificate identity 'iPhone Developer: XXXX (12345678)' appears more than once in the keychain

Syntax highlighter from Google Code

I enabled my blog with an awesome syntax highlighter from Google Code.

    private void LoadLayout()
    {
        LayoutSaver aLayoutSaver = new LayoutSaver();
        aLayoutSaver.LoadLayout(this);
        diagramView1.Diagram.RouteAllLinks();
        diagramView1.Update();
        UpdateLinksBetweenShapes();
    }

For details see:

• Heisencoder
• Brush Aliases
• Syntax Highlighter Home Page

Photo Streams across iCloud

In Apple Ecosystem iCloud can be used as a transient repository to transfer photos between your IOS devices and your Mac computers.

To a Mac or to an IOS device a Photo Stream is a stream of photos synchronised with photos stored on iCloud.

When you enable Photo Stream on your IOS device the photos you take with your device goes to your Camera Roll Album as well as to Photo Stream Album on your device. Then when your IOS device is connected to Wi-Fi and your Photos application is open (running) the photos will be uploaded from your Photo Stream to iCloud.

You may toggle Photo Stream ON or OFF on your IOS device from Settings/iCloud/Photo Stream or from Settings/Photos. These settings are the same, changing them in one is picked up by the other.

When you enable Photo Stream on your MAC the photos stored on iCloud will be downloaded to iPhoto Stream. The Photo Stream on your Mac is represented like a virtual folder in iPhoto as the following image shows:

This corresponds to Photo Stream Album on your IOS device.

You may toggle Photo Streams ON and OFF on your Mac from System Preferences/iCloud/Photo Stream or from iPhoto Preferences/Photo Stream panel. These settings are the same, changing them in one is picked up by the other.

In time photos will build up on your iCloud taking up space. You may think it is a good way to back up your photos.

Otherwise if you prefer to backup your photos on your Mac (and Time Machine) you may delete photos from iCloud to prevent clutter. But doing so will not delete Photo Stream on your IOS device or on your Mac.

You need to switch Photo Stream option on your IOS device to OFF to delete contents of Photo Stream on your IOS device. With this action the Photo Stream Album in your IOS devices's Photos application is removed. However the photos will still remain under Camera Roll Album.

Similarly you need to switch Photo Stream option to OFF to delete contents of Photo Stream on your Mac. With this action the contents of iPhoto Photo Stream are removed. However the photos will still remain under Library/Photos.

Resolving code signing issues

/Developer/Applications/Utilities/Application Loader does not work.

You need to sign and deploy your app from within XCode 4.

1. Under Project/Code Signing options set Code Signing Identity to your "3rd Party Mac Developer Application:.." certificate.
2. If you link to static libraries they will be installed into the archive by default and they will cause code verification to fail since they don't have code signing option. To prevent this error open the xcodeproj file of static library and set Build Settings/Deployment/Skip Install to Yes.
3. Select Product/Archive then Validate and Submit.