Share and Enjoy !

Aurelia is a next gen JavaScript client framework for mobile, desktop and web that leverages simple conventions to empower your creativity (http://aurelio.io).

From my view, I see it as serving a similar purpose as AngularJS, with several key benefits:

  • No more IIFE‘s!
  • ECMAScript 2016
  • jspm package manager
  • Configuration by convention means less setup code

In all fairness, three of the four benefits I’ve listed above are provided by Javascript libraries and code that is outside of Aurelia. But, I’m lumping all of these benefits together under the Aurelia umbrella because they work well together, and I’m working with them because of Aurelia.

I recently got my feet wet with Aurelia thanks to Building Applications with Aurelia from Scott Allen on pluralsight. As usual, Scott does an awesome job of making this topic easy to learn and understand. Though Scott’s examples are created in Visual Studio, he explains that they could be accomplished in any web browser.

Naturally, I wanted to bring Aurelia to Salesforce! However, there are a few twists and turns, and I’ve listed the steps below. You can skip to the bottom and download the source code, if you’re looking to dive into this.

Setup the Developer Environment

Create and configure the project

Create a simple project which includes a Visualforce page and a single static resource. I named my Visualforce page AureliaAppPage and my static resource is named AppJS. Also, create a folder in the project titled “assets.” When finished, your project should appear as shown below.

Before going any further, confirm that you can edit and render your new Visualforce page and that the static resource can be edited and saved to Salesforce, without any errors.

Configure packages

Open a command prompt and navigate to the assets folder that you created as part of the project above and execute the following commands:

  • npm install jspm –g
  • npm install –global gulp
  • npm install –save-dev gulp
    • You can ignore any warning which appear about the Description, README and repository being empty.
  • jspm init
    • Accept the defaults, except for those listed below
    • Which ES6 transpiler would you to like to use, Traceur or Babel? Babel
  • jspm install aurelia-framework
  • jspm install aurelia-bootstrapper
  • jspm install aurelia-http-client
  • jspm install bootstrap

Project Configuration and Source files

Retrieve the following files from the attached zip and place these into the assets folder:

  • config.js
  • gulpfiles.js
  • The “js” folder

Your project should now look like the screen snap below

Visualforce

You can copy the code for the Visualforce page from the attached zip, and I’ve included it below so that I can highlight a few elements.

Notice the following:

  • The baseUrl is set dynamically to the URL of the static resource which will hold our javascript files.
  • We must pass the Salesforce session Id to the our application since it will be necessary when making API calls back into Salesforce.
<apex:page docType="html-5.0" showHeader="false" sidebar="false" applyBodyTag="false" standardStylesheets="false">

<head>

<title>Aurelia</title>

<link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.AppJS, 'jspm_packages/github/twbs/[email protected]/css/bootstrap.css')}"></link>

<link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.AppJS, 'styles/styles.css')}"></link>

<style>

.container {

margin-left: 10px;

margin-right: auto;

}

</style>

</head>

<body aurelia-app="js/app/main" >

<script src="{!URLFOR($Resource.AppJS, 'jspm_packages/system.js')}" ></script>

<script src="{!URLFOR($Resource.AppJS,'config.js')}" ></script>

<script>

System.config({

"baseURL": "{!URLFOR($Resource.AppJS)}",

"apiSessionId": "{!$Api.Session_Id}"

});

&nbsp;

System.import("aurelia-bootstrapper");

</script>

</body>

</apex:page>

Save to Salesforce

Run the following command from command prompt: gulp build

The gulp build command will zip all of the assets into APPJS.resource. The Force.com IDE will automatically upload assets to Salesforce, but it needs a kick in order to upload the static resource file which is created as a result of the gulp build. To get it going, simply right click on APPJS.resource. After doing so, you should notice that the file is uploaded to Salesforce.

Run the app

You should now be able to navigate to login to Salesforce and navigate to https://yourserver/apex/aureliaapppage to view a listing of Opportunities, using Aurelia.

Download the attached zip file to see the full source code and compare it with your results.

Are you building with Aurelia and Salesforce?

I’d love to hear about it. Leave me a comment below.

Share and Enjoy !

Related Content: