Test a Theme on a Local Server

This topic applies to

Applies to

SuiteCommerce Web Stores

You can test your theme customizations on a local server before deploying to NetSuite. To set up your files for a local server, access the top-level directory in a command terminal and run the following command:

gulp theme:local

This command compiles all source files, including your theme and any extensions customizations, into combined files within a LocalDistribution/tmp directory. This directory contains the Sass and template files used by the local version of the application, so you can test your site before deploying anything to NetSuite.

When the server starts, Gulp.js initializes watch tasks that listen for changes to files in the Templates and Sass directories. When you save changes to a file, gulp automatically recompiles the source files and updates the LocalDistribution directory. Gulp also outputs a message to the console when an update occurs.

Important

The local server is primarily used to test frontend changes. You must deploy and activate your theme to view any changes you made to skins or to Sass variables exposed to SMT.


To run your Theme customizations on a local server:

  1. In your local developer environment, open a command line or terminal and access the top-level development directory.

  2. Run the following command:

    gulp theme:local

    Important

    Besides compiling your theme to run on a local server, the gulp theme:local command updates the manifest.json file for the theme. This action overwrites any manual changes you made to this file. To preserve any manual changes to your manifest.json file, run the gulp theme:local --preserve-manifest command instead. See Theme Manifest for details on this file.


  3. Navigate to the local version of the application using one of the following URLs:

    • http://<DOMAIN_NAME>/c.<ACCOUNT_ID>/<SSP_APPLICATION>/shopping-local.ssp

    • http://<DOMAIN_NAME>/c.<ACCOUNT_ID>/<SSP_APPLICATION>/my_account-local.ssp

    • http://<DOMAIN_NAME>/c.<ACCOUNT_ID>/<SSP_APPLICATION>/checkout-local.ssp

    • DOMAIN_NAME – replace this value with the domain name configured for your NetSuite website record.

    • ACCOUNT_ID – replace this value with your NetSuite account ID.

    • SSP_APPLICATION – replace this value with the URL root that you are accessing. For SuiteCommerce sites, this part of the URL should read scs.

The local server starts automatically. With the local server running, you can make changes to your local files and see the results immediately. Gulp.js automatically recompiles the application when you save any changes to theme-related HTML, Sass, or assets. Simply refresh your browser to see the changes.

You can also deploy your theme to NetSuite. This is required if you want to activate the theme on a domain. This is also required to test any Sass variables exposed to the Site Management Tools Theme Customizer. See Deploy a Theme to NetSuite.

Important

If you add a new file or make changes to any overrides after launching the local server, you must run the gulp theme:local command again to include the new changes. Gulp.js does not automatically compile new files or process overrides.