Quick Start

Overview

1

Download the SDK

2

Start Moovweb

3

Generate a Project

4

View the Project

5

Transform it Live!

Overview

Overview

Moovweb takes existing websites and transforms them into mobile experiences.

Download and install the Moovweb SDK for your OS.

Generate a project based on an existing website.

Transform the HTML and see it live locally!

Next
Step 1: Download the SDK

Step 1: Download the SDK

The Moovweb SDK is available for Mac, Linux, and Windows. Installation instructions will be provided for your OS on the download page.

 
 
Previous Next
Step 2: Start Moovweb

Step 2: Start Moovweb

Start the Developer Dashboard to manage and preview your project as you develop.

Windows


Right-click on the Moovweb shortcut and select “Run as administrator”.

If you just double-click on the icon, you will not be in Administrator mode, and will not be able to launch projects locally.

Mac/Linux


In your Terminal application type the following command to launch the Developer Dashboard:

sudo moov start


The Developer Dashboard window will open in your default web browser.

Previous Next
Step 3: Generate a Project

Step 3: Generate a Project

Pick a source site you want to transform and create a project based on that site.

Once you’ve installed the SDK, click the Generate New Project button on the Developer Dashboard to generate a project.

Developer Dashboard - Generate Project

  1. Give your Project a name (for your own reference) in the Project Name field.
  2. Type the domain of the web site you want to transform in the Source Site field. We’re going to use igadgetcommerce.com in this example.
  3. Choose the Subdomains option to create a project that will use a custom subdomain.
  4. Select the Recommended Project Configuration as your template.
  5. Click Generate New Project to build your new project and load it into the Developer Dashboard.
Previous Next
Step 4: View the Project

Step 4: View the Project

Starting a Moovweb project from the Developer Dashboard starts the local server.
That lets you see the site locally with your changes in place.

You should see a Project line for your Generated Project, with a play button to start the Moovweb Server locally, so you can view your local version in a browser.

Developer Dashboard - Start Project

After clicking the play button to start the Project you Generated, click on the project name to launch a local preview of your changes in your favorite browser.

Previous Next
Step 5: Transform it Live!

Step 5: Transform it Live!

Let’s quickly modify the iGadgetCommerce newsletter subscription form. We’ll simply grab the labels and turn them each into the placeholder text.

Navigate to the directory where you started the Developer Dashboard, and then into the directory for your Project. Open the scripts/html.ts file in any text editor and add the following code:

$("//form[@id='subscribe_form']/label") {
  $label = text()
  $("./following-sibling::input") {
    attribute("placeholder", $label)
  }
  remove()
}

When you reload your local preview of your Moovweb Project, you’ll see the updated form. If you can do this so easily, just imagine what else you could do with Moovweb.

Try making some more changes and reloading the page. Or click on the Training button below to learn more about ways you can transform your website with Moovweb, and publish your changes to the Moovweb Cloud so you can share them with the world.

Previous Training