Preview your Project on a Device

Preview a bundle on a mobile device before you publish the bundle.

Jump either to Preview your Local Project or to Preview a Project on Cloud on your mobile device.

Preview your Local Project on a Device

Preview your local Adaptive.js bundle on a device to:

1. Start the Adaptive.js Server

1. Open a new Terminal (Mac) or Command Prompt (Windows).

2. To change to your project directory, enter the following command on the command line:

cd path/to/project/directory

3. To start the local Adaptive.js server, enter the following command on the command line:

grunt preview

Automatic Preview To open the browser preview of your site automatically, append the --auto=true flag to the end of your grunt preview command.

The grunt preview command builds your project and starts an Adaptive.js server at default ports 8080 for HTTP and 8443 for HTTPS.

To change the HTTP and HTTPS port numbers, enter the following command with your own custom port numbers:

grunt preview --port httpPortNumber --https-port httpsPortNumber

Ensure that you replace the httpPortNumber and httpsPortNumber arguments with valid port numbers.

Your project is automatically compiled as you make changes to it.

Command Line Leave this command prompt open during the next steps. It is running the preview server that is needed by the browser.

Omit the remaining steps of this tutorial if your project has Adaptive.js v1.5.0 or greater.

Adaptive.js v1.5.0+: Preview Link with IP Address If your project has Adaptive.js version 1.5.0 or greater, the grunt preview command generates a link that includes your IP address. Access your local bundle from any device that is connected to same local area network as your computer.

2. Preview the Site on a Device

Device and Computer Network Ensure that your device and your computer are connected to the same network.

1. On your device, open your device web browser.

2. Go to Mobify Preview at

3. On the Mobify Preview page, set the Site URL and Bundle Location form fields to the following values:

Ensure that you replace the yourIPAddress part of the URL with the IP address that you found in the previous step.

4. Click the "Preview" link.

This sets cookies in your browser to preview your Adaptive.js site using your local server.

Browser Cache If you clear the browser cache or cookies, you need to repeat these steps.

If you need to preview to an HTTPS page:

1. On your device browser, go to https://your.IP.Address:8080/adaptive.js Accept any certificates or enable any scripts, if necessary.

You now see the source code for your bundle.

2. In the same browser window, go to Mobify Preview at

3. Set the "Bundle Location" form field to the following value with your own IP address:

4. Click the "Preview" link.

Now as you make changes to your local project, you also see these changes reflected when you refresh your device browser.

Troubleshooting Read our Preview Troubleshooting guide if you have trouble with this tutorial.

Preview a Project on Cloud on a Device

There are sometimes slight differences between a bundle on Mobify Cloud and a development project bundle on your local machine. When you upload your bundle to Cloud, only selected files that are flagged on the Cloud whitelist are uploaded.

Preview the actual bundle on Cloud to ensure that the bundle there is ready for publication. (The following steps also work for a Mobify Cloud bundle preview on a computer.)

1. In your browser, sign in to Mobify Cloud at

2. In the Projects section, under the Adaptive.js heading, select your project.

The page view is now in the "Bundles" tab of the "Bundles/Configure" link button cluster.

3. Hover over your desired bundle and and click the "Preview" button.

4. In the same bundle line, click the "View On Device" button.

5. In the same bundle line, type your email address into the form field, and click the "Send Preview To Device" button to send an email with a test link to your mobile device.

The following steps also work for a Mobify Cloud bundle preview on a computer.

6. On your mobile device, open your email client and check your email.

7. In the email, click the "Preview" link to go the URL in your mobile web browser.

8. On the Mobify Preview page in the mobile browser, check that the "Site URL" form field contains the correct URL.

9. Tap "Preview" to see the cloud bundle in your mobile web browser.

Preview Against Staging Server The preview link you receive in your email has the "Site URL" field pre-filled with the URL you provided during project creation. To preview against a different environment, like a staging server, replace the "Site URL" field with the URL of the staging server. To share the customized preview link, follow the steps in the Customize a Preview Link tutorial.

You now see a preview of this bundle on your device. Go to your site to verify that it works correctly.

Edit in GitHub