Menu Developer Moovweb University

Quick Start

Get up and running with the Moovweb platform—whose core component is the Moovweb SDK.

You can use the Moovweb SDK to transform any website. For this Quick Start, we’ll transform iGadgetCommerce.com. When you finish, you’ll have a transformed site running locally on your computer. And it’ll have all the content and functionality found on the desktop site.

Task 1: Install the SDK

Download and install the Moovweb SDK, which is available for Mac, Linux and Windows. You’ll also install some additional software for your computer’s operating system.

Developer Dashboard

Download Moovweb SDK

  1. Click the button above to download the Moovweb SDK. Note: This requires an account. If you don’t already have an account, follow the registration steps to download.
  2. On the download page, follow the onscreen instructions for installing the SDK.
  3. The SDK requires additional software to run. At this point, install the software listed below for your operating system.

    Mac

    Linux

    • Node.js: Download the latest stable build here
    • Python v2.7 (v3.x.x is not supported): Download it here
    • Make utility: Refer to documentation for your version of Linux.
    • C/C++ compiler toolchain like GCC (GNU Compiler Collection): Refer to documentation for your version of Linux.

    Windows

    • Node.js: Download the latest stable build here
    • Python v2.7 (v3.x.x is not supported): Download it here
    • Microsoft Visual Studio 2013 for Desktop (Full or Express versions): Download it here. The Express version is free.
    • Note: Make sure you review our Notes for Windows users for info about this additional software.

Task 2: Open the Dashboard

Now that all the software is installed, we’ll open the Developer Dashboard. The dashboard is the interface for working with the SDK. It displays in your default browser.

Developer Dashboard

Mac/Linux
  1. Open the command-line Terminal application:

    • Mac: Terminal is in the Utilities folder within your Applications folder.
    • Linux: The way you open the Terminal depends on your version of Linux. (See the documentation for your version.)
  2. Run this command:

sudo moov start

We use sudo because the dashboard needs to modify host files so that you can test projects locally.

Windows

Right-click the Moovweb icon and select Run as administrator. (If you only double-click the icon, it won’t execute in Administrator mode, and you’ll be unable to test projects locally.)

Task 3: Create a Project

Create a project using the Developer Dashboard. You’ll provide two important details: the project name and the URL for the site to be transformed. Then, you’ll install Node modules we use to perform transformations

  1. On the Developer Dashboard, click Generate New Project.

    dashboard - Generate New Project button - top

  2. In the dialog, enter the details provided below.

    • Project Name: igadget
    • Source Site: www.igadgetcommerce.com
    • Site Domain Model: Subdomains
    • Project Configuration: JavaScript
  3. Click Generate New Project.
  4. Open the command-line terminal. If you forgot how to do this, see Step 2.
  5. Use the cd command to navigate to your new igadget directory. The exact path depends on your operating system and its version. Here are some cd commands using common paths:

    Mac

    cd /Users/<username>/"Moovweb Projects"/igadget

    Linux

    cd /home/<username>/"Moovweb Projects"/igadget

    Windows

    cd <root>\Users\<username>\"Moovweb Projects"\igadget
  6. Run this command to install the modules into your project directory. Note: It may take a minute for the installation to complete.

    npm install

Task 4: View the Transformed Site

Start the project and view the transformation, which takes the HTML code from the desktop site and transforms it for mobile experiences.

  1. Return to the browser tab with the Developer Dashboard. Click http://www.igadgetcommerce.com (the Source Site link) to view the desktop site. The original site will open in a new browser tab.

    Developer Dashboard - Play Button

    Review the site to get an idea of the available functionality.

  2. On the Developer Dashboard, click the Start button for the igadget project.

    Developer Dashboard - Play Button

    The project name becomes a link.

  3. Click the igadget link.

    Developer Dashboard - Project Name Link

    In your browser, you’ll see the transformed site—which appears as a stripped-down version of the desktop site.

    Stripped Down Site

    Congratulations! You’ve just transformed your first website using the Moovweb platform.

    Although the majority of the styles were removed and a line that says “Powered by Moovweb” was added to the footer, the content and functionality (such as click interactions, login, and account creation) remain intact.

Task 5: See a Change Instantly

Make a change to the transformed code and view the change live. You’ll change the newsletter subscription form so that the field labels appear as placeholder text.

  1. We’re going to edit the home.js file, which resides in a subdirectory within your igadget directory. Navigate to the igadget/scripts/pages directory. Again, the exact path depends on your OS and its version, as noted in Step 3.
  2. Open the home.js file in a text editor.
  3. In a new, blank line before the closing brace, add this code:

    var $nameLabel = $body.find("form#subscribe_form label[for=nl_first_name]");
    $body.find("input#nl_first_name").attr("placeholder", $nameLabel.text());
    $nameLabel.remove();
    
    var $emailLabel = $body.find("form#subscribe_form label[for=nl_email]");
    $body.find("input#nl_email").attr("placeholder", $emailLabel.text());
    $emailLabel.remove();
    

    You can copy the code here and paste it into your file.

  4. Save your edited file.
  5. Return to your browser and refresh the local preview of the igadget site. You’ll see your change.

    Developer Dashboard - Project Name Link

Next Steps

Learn more about the Moovweb platform!