Another one light starter for scalable Angular 1.x application based on ES6 classes and components with suport deployment in the Salesforce.
Starter provides scalable component-based AngularJS project structure and follow the best practice in directory organization for Angular. It supports ES6 standards and consumes components as classes. Starter uses Webpack as bundler and Gulp as task runner.
- ES6 standards and component based ready to use structure
- SASS suport
- Templates placed near with controllers (no need to create Visualforce component and follow VF marchap requirements)
- Configured build (Webpack) and test system (Karma, Jasmine)
- Component generation
- Single command deploy to any Salesforce environment
- UI-Router
We use component-based approach for scaling and separating by concerns. Domain related components by default placed in public/components folder. Visualforce remoting wrapper is in public/commons folder. Ideally, the whole application should be a tree of components that implement clearly defined inputs and outputs and minimize two-way data binding.
Tests also support ES6 classes. Testing framework - Jasmine. Test launcher - Karma Chrome
- Install node
- Clone or fork repo
- Run
npm installin directory
All bundles will be placed in dist folder. Run npm run webpack then npm run serve.
Visualforce sample for localy served bundle:
<apex:page sidebar="false" showHeader="false" Controller="ProductController">
<head>
<apex:includeScript value="https://localhost:8000/app.bundle.js"/>
</head>
<body ng-app="App">
<app></app>
</body>
</apex:page>Visualforce sample for deployed bundle:
<apex:page sidebar="false" showHeader="false" Controller="ProductController">
<head>
<apex:includeScript value="{!URLFOR($Resource.bundles, 'app.bundle.js')}"/>
</head>
<body ng-app="App">
<app></app>
</body>
</apex:page>Deploy runner consumes password and username from command arguments and also from config. Fill use related json in config directory and run npm run deploy -- --env sb. Also you can run deploy without environment specification, it uses sb config by default. Password shoud be concatenation of user password and security token
npm run webpack- run webpack and watch directory on changesnpm run serve --ssl- run server on localhost 8000npm test- run unit testsnpm run component -- --name *****- create new component. The parameter following the --name flag is the name of the component to be created.npm run component -- --name ***** --parent ****- create new component in specified directorynpm run deploy -- --username ***** --password ****** --env prod- run deploy in production. The parameter following the --username flag is the user username. The parameter following the --password flag is the concatenation of user password and security token. The parameter following the --env flag is the organization (sb - sandbox, prod - production)npm run deploy -- --username ***** --password ******- run deploy in sandboxnpm run deploy -- --env prod- run deploy in production use confignpm run deploy- run deploy in sandbox use config
- Add support of Webpack hot module replacement (Run browaersync with webpack meddleware)
- Add unit test reports
- Add ES6 linter
- Add component replacement command
- Add service and factories generation