New Force.com Project

This is a practical checklist for bootstrapping a new Force.com project with MavensMate on the Salesforce side and a Yeoman/Gulp-based SPA build on the front end.

Prerequisites

Make sure these are installed and working before you start:

• Sublime Text
• MavensMate
• Node.js
• Gulp
• Yeoman generator: generator-gulp-angular
  • If you’re developing against a local generator, you may need npm link

Create the Salesforce project (MavensMate)

1. Open Sublime Text.
2. Create a new MavensMate project (name it something like app-name).
   • You generally only need to fill out the first tab.
   • Double-check your MavensMate settings point to the correct workspace folder.
3. Shortcut to open MavensMate:

ctrl+shift+m

Create the SPA structure

Create a two-layer folder structure so that when Gulp builds your static resources, they land in the right place.

1. Create the spa/appName directory inside your project.
2. cd into spa/appName.
3. Run the generator to scaffold the front-end app.

yo

When prompted:

• Name the static resource appNameStatic
• Choose the packages you want (this was written targeting the Angular 1.x era; examples: Angular 1.3, jQuery 2, Restangular, ui-router, Bootstrap, Angular UI, Less, etc.)

Let it run—scaffolding and installs can take a few minutes.

Build the static resource bundle

1. Go to the generated appName folder and run a Gulp build.
2. If the build fails due to gulp-ng-annotate, fix it like this:
   • Remove the gulp-ng-annotate line from package.json
   • Reinstall it explicitly:

npm install gulp-ng-annotate --save-dev

Verify the folder structure

Your project should look roughly like this (names will vary):

.../[app-name]/
  config/
  resource-bundles/                 # generated by Gulp build
    appNameStatic.resource/
      assets/
        images/
      fonts/
      scripts/
      styles/
  spa/
    [appName]/
      bower_components/
      db/
      dist/
      e2e/
      gulp/
      node_modules/
      src/
        app/
          [main]/
          [view]/
        assets/
          images/
          less/
        components/
          [data]/
          [navbar]/
          [component]/
  src/
    classes/
    components/
    pages/
    staticresources/
      appName.xml                   # bundled with the resource-bundles zip
    triggers/

Develop locally

Do your day-to-day front-end work in:

• spa/appName/src

When you’re ready to test the app

1. Run json-server against a stub to simulate a REST endpoint.
2. Run gulp serve to start the dev server.