You can open the repository folder on your local machine to check the setup.

A new folder named node_modules is created. You should never modify anything in the node_modules folder. This folder is not part of the repository. All the third party dependencies get installed in this folder. Whenever you run an npm command the dependencies are overridden in this folder.

Salesforce Credentials

As part of the setup, sf.json file is created that contains the credentials for deploying the application. If you want to deploy your Storefront in a different org, you can update the credentials in this sf.json file.

Configuration Parameters

During the npm install phase, a configuration file named config.ts is automatically created. This is a runtime configuration for the application. This file is different from the sf.json file. The config.ts file contains runtime specific variables that help the application to operate. You must set it up with the following parameters:

Name

Type

Required

Default Value

Description

production

Boolean

Yes

-

Specify the environment where you want the application to run.

organizationId

String

Yes

-

Specify the org ID of the application. For details, see the Contact Support section.

defaultImageSrc

String

No

-

Specify the URL of the default image to use when no image is found.

defaultCountry

String

Yes

US

The default country code is "US".

defaultLanguage

String

Yes

en-US

The default locale is "en-US".

enableErrorLogging

Boolean

Yes

True

Set this to True, in non-production mode, to send error logs.

enableErrorReporting

Boolean

Yes

True

When set to True, in non-production mode, it shows a model window to provide user feedback.

enableMultiCurrency

Boolean

No

False

If using a multi-currency enabled org, set it to true to enable currency fields on models.

enableErrorPrinting

BooleanYesTrue

enableQueryLogs

Boolean

No

True

Set to true to print query requests and results in the browser console.

enablePerformanceLogs

Boolean

No

True

Set to true to print performance metrics of requests in the browser console.

defaultCurrency

String

Yes

USD

The default currency to use for guest users. Defaults to "USD".

bufferTime

Number (milliseconds)

No

200

The number in milliseconds to wait before sending requests. A larger number will batch requests into a single network callout, but may decrease performance.

maxBufferSize

Number

No

10

The maximum number of requests to batch into a single callout.

disableBuffer

Boolean

No

False

When set to true, will disable buffered requests entirely. 1 request = 1 network callout.
subqueryLimitNumberNo20
pricingMode'default' | 'turbo'Nodefault

The default pricing mode is "default". To use TurboPricing as the pricing mode, set the value to "turbo".

disableCache

Boolean

No

False

When set to true, data returned from requests will not be cached.

encryptResponse

Boolean

No

True

When set to true, responses from the server will be encrypted.

Encryption payload is limited to 1 MB.

productIdentifier (Deprecated)

String

No

Id

The API name of the field on the product to use as the unique identifier in the application.

cartRetryLimit

Number

No

10

The maximum number of times the CPQ reprice operation should be attempted when the state of the cart changes.

debounceTime

Number (milliseconds)

No

200

The amount of time the application should wait for user input before batching DML operations.

storageAccount (Deprecated)

String

No

-


tenantId (Deprecated)

Number

No

-


tenant (Deprecated)

String

No

-


proxy

String

No

-

The login proxy to use to bypass CORS restrictions on login.

useIndexedDB

Boolean

No

False

When set to true, data cache will be persisted in browser IndexedDB.

skipPricingBooleanYesTrueWhen the user changes an existing cart, Digital Commerce skips pricing. Setting this flag to False allows Digital Commerce to perform pricing when the user changes an existing cart.
skipRulesBooleanYesFalseWhen the user changes an existing cart, Digital Commerce evaluates the rules. Setting this flag to True skips rules when the user changes an existing cart.
pricingFallbackBooleanYesFalseWhen TurboPricing fails, an error message is displayed without any further action. Setting this flag to True enables the system to use CPQ pricing.
packageNamespaceStringYes-

storefront

String

Yes

Null


expandDepth

Number

No

10

The maximum number of queries that should be executed to populate subquery data.

hashRoutingBooleanNoFalse
queryDepthNumberNo2The maximum depth of relationships to be used in a query.
endpointStringYes-Specify the URL you set on the community sites.

sentryDsn

StringNo-
runTimeDebugModeBooleanYesFalse

connectedApp

ConnectAppYes-
defaultsDefaults


Setting Up Proxy for Local Development

There is also a proxy.config.json file that gets installed in the root directory as part of the deployment. To configure the proxy.config.json file, you must provide the Community URL in both the target locations. This allows you to make SOAP API calls from your local development server (for functionality like login and reprice cart). Populate the 'target' attributes in that file with the instance URL of your community. 

All the code for the templates is open sourced into the library we just cloned and installed. It consists of all the modules such as cart page, home page, account page, and more. We can go into any template, for example, Home page layout where you can see some of the components of the underlying component library. For example, apt-jumbotron. This is a component library that gets installed as part of the apttus/ecommerce. You don't need to essentially build a code for this component. This is a component with the npm package. You just need to modify a single line of HTML code to reference and use it.

You can reference your configuration and import them into your main application module from the app.module.ts file. This app.module.ts file contains an ApttusModule and a CommerceModule. These two modules are getting referenced from the underlying libraries. You must import them into the root module or application to use them. 

Importing the app modules in the root module

Add two lines for the following:

  • ApttusModule.forRoot - The module runs all the underlying state management, caching, communication with the Salesforce org. You must import the configuration from the config.ts file.



  • CommerceModule.forRoot - In the forRoot method of the CommerceModule declare the storefront that you want to use. For example, CommerceModule.forRoot('Tier 1')

This defines the Storefront for your application.

Setting Up Subset of Categories

You can set up specific categories or subset of categories from the header.component.ts file.

Turning Off Sentry for a Customer

Our angular application is wired into Sentry, any errors that occur for customers are sent to sentry. You can view those in sentry, along with stack trace, and debug them. If customers don't want such information to be sent to us, you may consider turning it off for customers.

Go to config.ts and do the following:

  • enableErrorLogging - Set this to False.
  • enableErrorReporting - Set this to False.