Getting Started with Ruby on Rails

This quickstart demonstrates how to add our PhotoEditor SDK for HTML to a Ruby on Rails application in no time. Just follow the steps and you’ll get a fully fledged photo editor in your rails app.

WARNING: The repository is not meant as a fully fledged Rails application, but as a base for further development instead.

Integration

Init Rails

 rails new pesdk-rails-demo
 cd pesdk-rails-demo 

Get PhotoEditor HTML5

 export VERSION=3.6.5
 wget "https://github.com/imgly/pesdk-html5-build/archive/v$VERSION.zip"
 unzip -x "v$VERSION.zip"

Copy files to vendor directory

 mkdir -p vendor/assets/javascripts
 cp "pesdk-html5-build-$VERSION/js/PhotoEditor"* vendor/assets/javascripts
 cp "pesdk-html5-build-$VERSION/js/vendor/"* vendor/assets/javascripts

 mkdir -p vendor/assets/stylesheets
 cp "pesdk-html5-build-$VERSION/css/PhotoEditor"* vendor/assets/stylesheets

 mkdir -p vendor/assets/images
 cp -R "pesdk-html5-build-$VERSION/assets/"* vendor/assets/images

Create new home controller with index page
```
 rails generate controller home index
```

Open app/views/home/index.html.erb

 <!-- PESDK Demo Integration -->
 <div id="pesdk" style="width: 100vmin; height: 75vmin; padding: 0px; margin: 0px">

Update app/assets/javascripts/application.js

 ...
 //= require react
 //= require react-dom
 //= require PhotoEditorSDK.min
 //= require PhotoEditorReactUI.min
 ...

Update app/assets/stylesheets/application.css

 ...
 *= require PhotoEditorReactUI
 ...

Edit app/assets/javascripts/home.coffee and insert

 window.onload = ->
   apiKey = 'your-api-key'
   # <-- Please replace this with your API key
   container = document.getElementById('pesdk')
   editor = new (PhotoEditorSDK.UI.ReactUI)(
     container: container
     apiKey: apiKey
     assets:
       baseUrl: '/assets'
       resolver: (path) ->
         path
 )
   return

or create app/assets/javascripts/home.js and insert

 window.onload = function () {
   var apiKey = 'your-api-key' // <-- Please replace this with your API key

   var container = document.getElementById('pesdk')

   var editor = new PhotoEditorSDK.UI.ReactUI({
     container: container,
     apiKey: apiKey,
     assets: {
         baseUrl: '/assets', // => Matches default asset url for rails
         resolver: function (path) { return path }
     }
   })
 }

Start rails
```
 bundle exec rails server -p 3000 
```
Open Webbrowser and go to http://localhost:3000/home/index