vforcejs-angular

A working template for building a Visualforce+Angular SPA on a Salesforce public site. Attempts to follow the Angular 1.x Style Guide as closely as possible.

Demo

Features

ES2015 (Babel)
Webpack (with code-splitting examples)
AngularJS 1.x
Configurable CDN resources
Promisified Apex Javascript Remoting
Hot reloading during development (via ngrok proxy)
HTML5 URL routing (angular-ui-router)
Jasmine test framework and Karma runner
Twitter Bootstrap
FontAwesome
Sass stylesheets
PostCSS runners (cssnext, focus)
ESLint syntax and code style checks

Install

Clone this repository, then run install to retrieve dependencies:

npm install

Configure

Configure your Salesforce connections file by running npm run configure. This will create a .jsforce.config.json that stores your credentials. You probably don't want to commit this file. Re-run to switch the active connection or create new ones.
Create the app's config file. At some point in the future, this will be done through a script (as above). But for now it is a manual step.

<root>/.config.json

{
  "appTitle": "<page title of app>",
  "sitePrefix": "<site path prefix; eg. vforcejs>",
  "apexPrefix": "<prefix of controller, page, and static resource; eg. VForceJS>",
  "apiVersion": "<sfdc api version; eg. 35.0>",
  "isCommunity": true
}

Note: If the site is a community, set isCommunity to true. If it is a public site, set to false.

Development

Run npm start

This command will take the following steps:

Opens a connection to the configured org
Opens a public ngrok connection and starts an Express server Webpack middleware
Compiles the bundled app sources
Deploys the bundle
If it does not exist, creates <apexPrefix>UrlRewriter.cls
If it does not exist, creates a default <apexPrefix>Controller.cls
Deploys the compiled ApexPage named as the configured apexPrefix

At this point, you will need to configure your site's UrlRewriter, permissions, and the landing page. The landing page should be set to <apexPrefix>.page.

Now, open your public Salesforce site.

Webpack will watch for changes related to the app and automatically recompile and hot-reload the page, and re-deploy the Visualforce page when necessary. Bundle sources will be publicly served from the local Webpack server via ngrok.

Production

Run npm run build. Builds and deploys page and resource bundle.

Contributing

Pull requests are welcome! Code should pass tests and the ESLint style guide, preferably with no warnings emitted.

jdcrensh / vforcejs-angular