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.
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.
Generate a mobile project with the following options:
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"
You can start the server using the moov server command:
sudo moov server
Navigate to http://mlocal.igadgetcommerce.com/ to see your local project.
Right-click on the “Moovweb” desktop shortcut icon and click “Run as administrator”.
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.
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!
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 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()
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.
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.
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.
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.
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.
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.
Here is what the typical development process with Moovweb looks like: