Building a Mobile Site: Project Setup

This module will walk you through quickly setting up your Moovweb project so you can create a mobile mode for iGadgetCommerce.

This module assumes you have already downloaded and installed Moovweb.

Outline


Set Up Your Project

To start Moovweb, run the command:

sudo moov start

If you don’t know how to run a command, learn more about the Command Line here.

127.0.0.1:4002 should open up automatically in a browser. This is the Moovweb Developer Dashboard, where you can manage your local projects.

To create a project, click the “Generate New Project” button.

Developer Dashboard

Generate a mobile project with the following options:

Developer Dashboard

Using Moovweb SDK version 4.7 or earlier?

Create a project using the “mobile” recipe with the command below. Then change directories into the generated project folder.

moov generate igadget igadgetcommerce.com --recipe="mobile" cd igadget

You can start the server using the moov server command:

sudo moov server

Navigate to http://mlocal.igadgetcommerce.com/ to see your local project.

Windows Users

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

Generate Project

You should see a new project appear in the Developer Dashboard.

Once you have the project loaded, just click the play button in the Start/Stop column to start the Moovweb Server and run the project locally (the Start button will become a Stop button and the project name will become a clickable link to indicate that it is running locally).

To see your project running in a local browser window, click the project name.

Developer Dashboard

The URL http://mlocal.igadgetcommerce.com/ should open in a new tab in your browser and you should see a local version of the origin iGadgetCommerce site.

Developer Dashboard


Developer Tools

For development with the Moovweb SDK you simply need a browser and a text editor. Our favorite text editor here at Moovweb is Sublime Text 2. Check it out!


Preparing for Mobile Development

Before starting development, you’ll want to implement some standard best practices for configuring your mobile project.

Go into the html.ts file and paste the following code below the rewrite_links() function.

# Rewrite relative image paths to point to original desktop site.
absolutize_srcs()
# Add the mobile meta tags 
clean_mobile_meta_tags()
  
# Remove styles and comments
remove_all_styles()
remove_html_comments()

The absolutize_srcs() function rewrites any relative image src attributes so that they use the origin source domain instead of the Moovweb subdomain. It’s important not to pass requests through Moovweb that aren’t being transformed, and we won’t be transforming images in real-time.

The clean_mobile_meta_tags() function makes sure your site has the proper meta tags for a mobile viewport.

Finally, removing all styles and html comments will set you up to develop a mobile UX from scratch without having to worry about overwriting existing styles.


Developer Workflow

Although your workflow will most likely vary based on the team you’re working with and some of the processes you already have in place for web development, we’ve listed several things to think about when finding a workflow that is right for you and that fits the Moovweb development process.

Version Control

Moovweb is version control-agnostic so you can pick any form of version control system you want to integrate with your projects.

Whatever version control system you choose, make sure to write a deploy script before you begin deploying your code to the Moovweb Cloud.

A deploy script will essentially set the -deploy-id equal to the unique identifier of the build that your version control is currently using so the Moovweb Cloud stays synchronized with your version control system.

Learn more about how to set up version control.

Code Hosting

Moovweb recommends hosting your code somewhere other than the Moovweb Cloud. Many developers use places such as GitHub or Bitbucket to host their code and maintain synchronized codebases with their development team.

You’ll often see this referred to as the origin repository.

Staging and Production Environment

You can use the Moovweb Cloud to setup both staging and production projects.

Staging projects can be used to test new changes you’ve made to your Moovweb experiences. Your team can QA the site by testing all the links and making sure the site is fully functional.

Then you can deploy the same codebase over to production where you’ve got your high-performing secure servers that handle all your live traffic.

Development Process

Here is what the typical development process with Moovweb looks like:

Moovweb Workflow

origin
This remote will be where you and your developers host your code base. You’ll coordinate changes to your code here and manage different branches and bug fixes during development.

stage
This remote is where you’ll deploy your code base for testing. This will be a Moovweb Cloud URL that actually builds your code live so you can QA it before you put it on your production site.

production
This remote is where you’ll deploy your final production site that has been tested and approved for public use.