Tutorial 1: Download and Run the App

Clay provides a powerful Platform as a Service for building web & mobile applications in a Javascript. In this tutorial, you create a Web application using pure Javascript we don't need any special frameworks.

Familiarity with Javascript is helpful, but not required for this exercise. The tutorial starts with an application template to get you up and running. You then walk through the steps to securely run the application within the Force.com platform.

Step 1: Download the App with Clay

You start with a pre-existing Clay MVC-based application stored on Clay App Store. Then, as you make changes, all you need to do is refresh the browser, not waiting!

  1. Open a command line terminal. For Mac OS X users, this can be done by going to the Terminal program, under Applications/Utilities. For PC users, this can be done by going to the Start Menu, and typing cmd into the Run dialog.
  2. Once in the command line terminal, change to a directory where you want to download the example app. For example, if your directory is “development,” type cd development.
  3. In the command line type: clay download

Step 2: Install Javascript Dependencies

Now that you have the project locally, you need download the javascript dependencies, this is done automatically using NPM, a tool from NODEJS.

  1. In the command line terminal, change directory to the clay-page-demo folder you created in the last step: cd page
  2. Execute the following command to download project dependencies: npm install .
  3. Clay uses NPM to download dependencies, this technology is used in NodeJS. It had over100,000 libraries, all versioned. It's the profesional way to manage javascript dependencies. http://npmjs.org 3
  4. 
    
    	

    NPM downloads all libraries specified in a file called package.json, check the dependencies section to better understand how it works. It's really simple.

Step 3: Run the Application

This step shows how to develop HTML5 and Javascript Apps in Salesforce. Clay ships with a JavaScript development server that automates over 10 integration tasks, sit back and relax.

  1. Go to the command line, make sure the current folder is clay-page-demo and run:
  2. clay server
  3. Clay will prompt you to enter the Salesforce Organization, select the one you registered before
  4. The browser will launch automatically and open the Visualforce Page but first:
  5. To develop in Salesforce our local server must run in HTTPS, clay ships with unsigned SSL Certificates for localhost, your browser will alert your the first time. You must accept the Certificate, on Google Chrome click on advances and accept.

  6. Load the project in you favorite text editor, and open the file css/style.css.
  7. Change the display in .startup from "block" to "none" and refresh your browser to see the changes.
  8.   .startup{
        display: block;
      }
    
      .startup {
         display: none;
      }
    	

Tell me more

Clay Toolbelt's development server automatically created a VisualForce and transformed all files to point to the ones in you computer, then uploaded the VisualForce page. The uses Salesforce Front door to Log In and open the VisualForce Page. Since the VF Page is using assets in your computer, all it takes is a screen refresh after a change.

You can have several Salesforce Orgs and Clay Accounts registered at the same time. Control accounts with:

      clay users --add 
      clay users --remove