Automatically Deploying Theme Changes

You may have noticed that you have to deploy your theme manually each time you make a change. This can become tedious during the development process. The gulp watch task lets you preview changes to your theme without requiring a full redeploy.

Note: Gulp is included as a local dependency in generated themes, so you are not required to install it. It can be accessed by running node_modules\.bin\gulp followed by the Gulp task from a generated theme’s root folder.

Follow these steps to preview changes to your theme automatically:

1. Enable Developer Mode in your server. Without this enabled, the gulp watch task will not work.

2. Navigate to your theme’s root folder and run gulp watch. This sets up a proxy for your app server (http://localhost:9080) and opens it in a new window in the browser. It also provides an IP address for you to view your app server across all devices connected to the local network. The browser is synced across all devices that use the given IP address.

   Note: Live changes are only viewable on port 9080 (http://localhost:9080). Live changes are not viewable on your app server (e.g. http://localhost:8080).

   

   Figure 1: Run the `gulp watch` task to automatically deploy any changes to your theme.

3. Make a change to your theme and save the file. The updated files are built, compiled, and copied directly to port 9080. CSS changes are deployed live, so no page reload is needed. For JS and template changes, you must reload the browser to see the changes.

   

   Figure 2: The watch task notifies you that the changes are deployed.

4. Once you’re happy with the previewed changes, deploy your theme to your app server to apply the changes.

Related Topics

Configuring Your Theme’s App Server

Copying an Existing Theme’s Files

Deploying Themes