Preview your Project

Preview your Adaptive.js project on your computer. See the changes that you make to your local project when you refresh the browser.

1. Start the Adaptive.js Server

This step starts the server that runs the Adaptive.js server locally. Running the server locally enables you to preview the mobile version of the site in your browser.

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 preview, 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.

Leave your Terminal or Command Prompt to Run Leave this command prompt open during the next step. It is running the preview server that the browser needs to preview your site.

2.a Start the Browser Preview (Semi-Automatic)

1. At the bottom of the output from the grunt preview command, look at the "DEVELOPING ON HTTP" or "DEVELOPING ON HTTPS" section.

For Mac:

2. To open the the link in your browser directly from Terminal, press the control key on your keyboard while you click on the URL.

3. Select the "Open URL" menu option.

For Windows:

2. Select and copy the URL from the Command Prompt into your browser URL bar.

2.b Start the Browser Preview (Manual)

1. Go to the Mobify Preview at

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

3. Click the "Preview" button.

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

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

Simulate a Mobile Device View in Chrome Chrome is Mobify's preferred browser. Follow the steps on the official Chrome documentation site to preview your site in device mode.

Mobify Preview in a simulated device view in Chrome.

Edit in GitHub