Simple Site: Project Setup

The Simple Site lab is based around a WordPress site — the Moovweb blog. The concepts covered here should be easily applicable to other WordPress sites.

Prerequisites: Make sure you have downloaded the Moovweb SDK from the downloads page.


Outline


Starting the Developer Dashboard

The Developer Dashboard is a web GUI that allows you to create and manage local projects. This includes starting and stopping projects, checking project logs, and debugging.

On Mac and Linux, go to the command line. Run the following command in your working directory:

sudo moov start

Using Windows?

On Windows, a shortcut icon will have been placed on your Desktop when you installed the SDK. Right-click on the icon and select “Run as administrator” to start.

Right-click and select "Run as administrator"

Running moov start creates a new directory named Moovweb Projects and opens the Developer Dashboard in your preferred browser (at http://127.0.0.1:4002). The first time you launch the Developer Dashboard, it will not have any projects in it. Next, we’ll generate a new project to set started.

Generate a Project

To generate a new project, click the “Generate New Project” button to bring up the Project Generator. (You can also import existing projects by clicking “Load Existing Project .zip”, but we’ll get to that in the Deployment section.)

The Developer Dashboard

For this lab, please use these settings:

After making these selections and following the instructions at the the bottom of the Project Generator screen, the new project is automatically loaded into the Developer Dashboard.

Start the Moovweb Server

Before running your new Moovweb blog project locally, take a look at what the live Moovweb blog site looks like by visiting http://blog.moovdemos.com if you haven’t already done so.

Once you have the moovweb-blog project loaded in the Developer Dashboard, just click the play button in the Start/Stop column to start the Moovweb Server running that project (when the project is ready the project name will become a clickable link to indicate that it is running locally).

The Developer Dashboard

To see your development instance of the website running in a local browser window, click the project name. This will open up a new tab where you can see the Moovweb blog site, except now it’s running locally on your computer. Notice that the URL of the page is exactly the same as the actual Moovweb blog site. Browsing to that site on your machine will bring up your local version as long as your Developer Dashboard has your project running. This lets you explore the power of the Moovweb platform!

Moovweb Server Explained

The local Moovweb Server you started in the Developer Dashboard is now redirecting traffic from your browser to the blog site through the Moovweb SDK on your computer. Because it is doing so, you now have the power to make transformations and create completely new experiences!

You can turn the Server off and visit the actual Moovweb blog site, OR you can turn the Server on and visit the Moovweb blog running locally through your computer!

Next, you’ll learn how to implement some basic styles!