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 :
3. To start the preview, enter the following command on the command line:
Automatic Preview To open the browser preview of your site automatically, append the
--auto=trueflag to the end of your
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
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.
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.
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 http://preview.mobify.com.
2. On the "Mobify Preview" page, set the "Site URL" and "Bundle Location" form fields to the following values:
- Site URL:
- Bundle Location:
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.
Edit in GitHub