October 14, 2016Marcellin Nshimiyimana Reading time ~1 minute

App Deployment - Serve Emberjs app on s3

Description

We want to serve an Emberjs application using s3 static site serving capability, and have it(s3) handle internal routing properly.

End Goal

Product

Step by step

Create an s3 bucket
Add entry documents

Index Document: index.html
Error Document: index.html

Fix Redirection Rules for “no file found error”

<RoutingRules>
    <!-- no file found error -->
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

Provide public access to your bucket

{
  "Statement": [
    {
      "Sid": "AllowPublicRead",
      "Effect": "Allow",
      "Principal": {
        "AWS": "*"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::<bucket-name>/*"
    }
  ]
}

Fix the CORS Configuration information

<!-- 
  required if you serve your assets using the secure s3 protocol 
  https://s3.amazonaws.com/<bucket-name>/assets/...
-->
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
      <AllowedOrigin>*.amazonaws.com</AllowedOrigin>
      <AllowedMethod>GET</AllowedMethod>
      <MaxAgeSeconds>3000</MaxAgeSeconds>
      <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Set your locationType to auto

// config/environment.js

locationType: 'auto'

Build your application

ember build --environment=production

Upload content of the distribution folder to your s3 bucket.

# distribution folder = dist/

Now if you open the url provided to you in your s3 bucket properties, you will see your app running. Moreover, reloading the browser after visiting a new page, will bring you back to that currently visited page!

GitHub resources:

October 11, 2016Marcellin Nshimiyimana Reading time ~1 minute

App Deployment - deploy different index files

Description

We want to deploy an Ember app that uses google analytics tracking script.

Enable it for production deployments
Disable it during development

End Goal

Step by step

Create a production deployment folder

mkdir -p .deployment/production

Add the custom index file that contains Google analytics script

<!-- .deployment/production/index.html -->
<script type="text/javascript">
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>

Make sure Google analytics tracks all pages

// .deployment/production/router.js
Router.reopen({
  notifyGoogleAnalytics: function() {
    return ga('send', 'pageview', {
        'page': this.get('url'),
        'title': this.get('url')
      });
  }.on('didTransition')
});

Add deployment commands in travis configuration file
- copy index file
- add google analytics code to the Router

before_deploy:
  - cp -rf .deployment/production/index.html app/
  # append content of ".deployment/production/router.js" to "app/router.js"
  - cat app/router.js > app/router.tmp.js
  - cat app/router.tmp.js .deployment/production/router.js > app/router.js

Now if you deploy your app using travis, it will have google analytics enabled, but when you run it locally, you won’t have to worry about messing up your analytics data!

GitHub resources:

September 29, 2016Marcellin Nshimiyimana Reading time ~1 minute

Travis-ci - Send notification with custom message

Description

We need to send email (with custom email) from travis to specified users when the build fails.

NOTE: As of now, Travis-ci does not allow custom messages for email notification.

End Goal

notifications:
  email:
    on_success: never
    on_failure: always
    recipients:
      - email1@domain.com
      - email2@domain.com

Step by step

Specify when to send email - only when build/test failed

on_success: never # do not send anything if build succeeds
on_failure: always # if there is a fail
# other options are [always|never|change]

Specify email addresses

recipients:
  - email1@domain.com
  - email2@domain.com

Complete travis config file

---
language: node_js
node_js:
  - "4.5.0"

sudo: false

notifications:
  email:
    on_success: change # only if status change from fail to success
    on_failure: always # if there is a fail
    recipients:
      - email1@domain.com
      - email2@domain.com

cache:
  directories:
    - node_modules

before_install:
  - export PATH=/usr/local/phantomjs-2.0.0/bin:$PATH
  - "npm config set spin false"
  - "npm install -g npm@^2"

install:
  - npm install -g bower
  - npm install
  - bower install

script:
  - ember test

before_deploy:
  - ember test -f 'Acceptance |'
deploy:
  skip_cleanup: true
  provider: script
  script: ember deploy testing --verbose
  on:
    branch: deployment

Now you can do this!

GitHub resources:

Travis documentation

September 27, 2016Marcellin Nshimiyimana Reading time ~1 minute

Travis-ci - deployment triggers

Description

We need to deploy our Emberjs application when:

code is pushed/merged into deployment branch.
all acceptance tests succeed.

End Goal

before_deploy:
  - ember test -f 'Acceptance |'
deploy:
  skip_cleanup: true
  provider: script
  script: ember deploy testing --verbose
  on:
    branch: deployment

Step by step

Setup deployment trigger

deploy:
  on:
    branch: deployment

Run the acceptance tests

before_deploy:
  - ember test -s -f 'Acceptance |'

Add the deployment command

deploy:
  provider: script
  script: ember deploy testing --verbose

Complete travis config file

---
language: node_js
node_js:
  - "4.5.0"

sudo: false

cache:
  directories:
    - node_modules

before_install:
  - export PATH=/usr/local/phantomjs-2.0.0/bin:$PATH
  - "npm config set spin false"
  - "npm install -g npm@^2"

install:
  - npm install -g bower
  - npm install
  - bower install

script:
  - npm test

before_deploy:
  - ember test -s -f 'Acceptance |'
deploy:
  skip_cleanup: true
  provider: script
  script: ember deploy testing --verbose
  on:
    branch: deployment

Now you can do this!

GitHub resources:

Travis config file

September 27, 2016Marcellin Nshimiyimana Reading time ~1 minute

JavaScript - Camelize

Description

We want to join the word tokens of a phrase together, by capitalized each term’s first word.

End Goal

function camelize(str) {
    return str
        .replace(/\s(.)/g, function($1) { return $1.toUpperCase(); })
        .replace(/\s/g, '')
        .replace(/\-(.)/g, function($1) { return $1.toUpperCase(); })
        .replace(/\-/g, '')
        .replace(/^(.)/, function($1) { return $1.toLowerCase(); });
}

Step by step

Capitalize each first letter of the word that follows a space

.replace(/s(.)/g, function($1) { return $1.toUpperCase(); })

Remove all spaces

.replace(/\s/g, '')

Capitalize each first letter of the word that follows a dash

.replace(/\-(.)/g, function($1) { return $1.toUpperCase(); })

Remove all dashes

.replace(/\-/g, '')

Make sure the first is lowercased

.replace(/^(.)/, function($1) { return $1.toLowerCase(); });

Now you can do this!

Resources:

camelize

use cases

Turn user input into bot commands: camelize(userInput) === systemCommand

My Way

Latest Posts

App Deployment - Serve Emberjs app on s3

Description

End Goal

Step by step

GitHub resources:

App Deployment - deploy different index files

Description

End Goal

Step by step

GitHub resources:

Travis-ci - Send notification with custom message

Description

End Goal

Step by step

GitHub resources:

Travis-ci - deployment triggers

Description

End Goal

Step by step

GitHub resources:

JavaScript - Camelize

Description

End Goal

Step by step

Resources:

use cases