Salesforce-template-webpack-plugin NPM

salesforce-template-webpack-plugin

Extension of HtmlWebpackPlugin with templates for generating Salesforce metadata.

Install

npm i -D jade jade-loader salesforce-template-webpack-plugin

Example configuration

webpack.config.js

const path = require('path');

const SalesforceTemplateWebpackPlugin =
	require('salesforce-template-webpack-plugin');

const PACKAGE_DIR = path.join(__dirname, 'pkg');

// ...

const webpackConfig = {
	output: {
		path: 'dist',
		filename: 'index_bundle.js'
	},
	module: {
		// required for jade templates
		loaders: [{
			test: /\.jade$/,
			loader: 'jade?pretty=true'
		}]
	},
	plugins: {
		new SalesforceTemplateWebpackPlugin({
			outputDir: PACKAGE_DIR,
			files: [{
				template: 'SinglePageApp'
			}]
		})
	}
}

Plugin Options

These are the minimal plugin options. Template-specific options are listed in the following section.

outputDir: Path to the base output directory for generated files. Required.
distDir: Path to where the plugin will package resources as a StaticResource zip.
files: [...] An array of template options (see below). Required.
meta: true | false If true, also generate corresponding *-meta.xml files and package.xml. Default is true

Templates

The plugin includes a few default Jade/EJS templates.

template: Name of a template. Required.
apiName: A unique API name for assigning filenames and any references from within templates. Default is the value of template
apiVersion: Salesforce API version of the metadata. Default is 36.0

A minimal example

new SalesforceTemplateWebpackPlugin({
	files: [{
		template: '<template name>',
		// additional template options
	}]
})

SinglePageApp

A bare-bones Visualforce page and Apex remoting controller for use as a "single page" web app.

title: Title of the page. Default is 'Visualforce App'
mobile: true | false Configure the page as mobile-ready. Default is false
baseHref: Set
unsupportedBrowser: true | false Display a message on unsupported browsers. Default is false
appMountId: Create a div element with the id given.
appMountIds: [...] Create div elements with the ids given.
window: {...} Extend the global window object with defined key-values.
devServer: Path to directory where webpack-dev-server.js can be found.
googleAnalytics: {...} Google Analytics options: - trackingId: The account's tracking ID. - pageViewOnLoad: true | false Track page views on load. Default is false
controller: {...} | false Apex controller options: - apiName: API name of the controller. Default is 'Controller' appended to the base API name. - sharing: with | without Sets with/without sharing on the controller. Default is with. - testClass: true | false Also create a controller test class. Default is true