Fixes #919 : Deploy Backend API to heroku and frontend fix for prod (#…

…920)

<!-- Add the issue number that is fixed by this PR (In the form Fixes #123) -->
Fixes #919

#### Checklist

- [x] I have read the [Contribution & Best practices Guide](https://blog.fossasia.org/open-source-developer-guide-and-best-practices-at-fossasia) and my PR follows them.
- [x] My branch is up-to-date with the Upstream `development` branch.
- [ ] I have added necessary documentation (if appropriate)

### Preview Link 

- **Replace XXX with your PR no**
- Link to live demo: http://pr-920-fossasia-badgeyay.surge.sh  

#### Changes proposed in this pull request:

- Deployed new backend to heroku
- Fixes asset path for production

api/controllers/assetHelper.py

@@ -21,7 +21,7 @@ def getDefaultBackgrounds():
             obj['id'] = idx
             obj['type'] = 'def-image'
             obj['attributes'] = {
-                'name': file_,
+                'name': file_.split('.')[0],
             }
             resp.append(obj)
     resp_ = {'data': resp}

api/controllers/generateBadges.py

@@ -40,7 +40,10 @@ def generateBadges():
     text_color = data.get('font_color', '#ffffff')
     badge_size = data.get('badge_size', 'A3')
     svg2png = SVG2PNG()
-    svg2png.do_text_fill('static/badges/8BadgesOnA3.svg', text_color)
+    if config.ENV == 'PROD':
+        svg2png.do_text_fill(os.getcwd()+ '/api/static/badges/8BadgesOnA3.svg', text_color)
+    else:
+        svg2png.do_text_fill('static/badges/8BadgesOnA3.svg', text_color)
     merge_badges = MergeBadges(image_name, csv_name, badge_size)
     merge_badges.merge_pdfs()
 

frontend/app/components/background-component/def-image-component.js

@@ -3,7 +3,7 @@ import Component from '@ember/component';
 export default Component.extend({
   init() {
     // To be inflated from the backend data
-    this.host = 'http://localhost:5000/';
+    this.fingerPrint = window.ASSET_FINGERPRINT_HASH;
     return this._super(...arguments);
   },
   click() {

frontend/app/index.html

@@ -34,6 +34,7 @@
 
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/badgeyay.js"></script>
+    <script src="{{rootURL}}assets/assets-fingerprint.js"></script>
 
     {{content-for "body-footer"}}
 

frontend/app/templates/components/background-component/def-image-component.hbs

@@ -6,7 +6,7 @@
         <div class="menu">
             {{#each defImages as |image|}}
                 <div data-value="{{image.id}}" class="item">
-                    <img class="ui mini image" src="/images/badge_backgrounds/{{image.name}}">
+                    <img class="ui mini image" src="/assets/images/badge_backgrounds/{{image.name}}{{fingerPrint}}.png">
                     {{image.name}}
                 </div>
             {{/each}}

frontend/ember-cli-build.js

@@ -1,12 +1,20 @@
 'use strict';
 
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
+const writeFile = require('broccoli-file-creator');
+const md5 = require('md5');
 
 module.exports = function(defaults) {
+  const fingerprintHash = md5(Date.now());
+
   let app = new EmberApp(defaults, {
     // Add options here
     'ember-cli-babel': {
       includePolyfill: true
+    },
+    fingerprint: {
+      extensions : ['js', 'css', 'png'], // list of extensions to fingerprint
+      customHash : fingerprintHash // use a single fingeprint/hash for all assets
     }
   });
 
@@ -23,5 +31,6 @@ module.exports = function(defaults) {
   // please specify an object with the list of modules as keys
   // along with the exports of each module as its value.
 
-  return app.toTree();
+  var assetFingerprintTree = writeFile('./assets/assets-fingerprint.js', `(function(_window){ _window.ASSET_FINGERPRINT_HASH = "${(app.env === 'production' ? `-${fingerprintHash}` : '')}"; })(window);`);
+  return app.toTree(assetFingerprintTree);
 };