This guide will show you how to install and configure all of the software you’ll need to start building a Accelerated Mobile Pages (AMP) with the Mobify Platform.
Required software #
If you haven’t already, you’ll need to install the following software:
Windows users: Always use the Git BASH terminal application that is installed with Git for Windows to run the terminal commands in our documentation.
Recommended software #
We strongly recommend that you also install the following software. Even if you prefer using other development tools, having these ones available will help Mobify support you.
- Google Chrome and the following extensions:
- Node Version Manager (nvm), requires Node 4.x.
- Visual Studio Code from Microsoft and the ESLint extension from Dirk Baeumer.
Project files #
Every project using Mobify’s Accelerated Mobile Pages technology begins with a set of project files, including:
- The Accelerated Mobile Pages Software Development Kit (SDK)
- Includes 25+ user interface components optimized for mobile users, and many more components are in development.
- Installed as an npm dependency so you can upgrade your SDK version without regenerating your project
- A fully functional AMP Service for ecommerce based on a fictional store called Merlin’s Potions
- Open-source libraries
- A development server for previewing your work locally
- Scripts for automating common tasks, such as generating boilerplate code for pages and components
Previewing your new project #
Now that you’ve generated your project files, the next step is to start the development web server so that you can preview the changes to your project as you work.
cd your-project-slug cd web npm install cd ../amp npm install npm start
The AMP server listening on port 3000, so you open your browser and type http://localhost:3000 in the URL. We recommend using Google Chrome because of its accurate emulation of mobile devices and its strong debugging tools. With the generated project, you can preview the Merlin’s Potions product page and product list page so you will need to change the URL to http://localhost:3000/eye-of-newt.html for product page and http://localhost:3000/potions.html for product list page.
Open the Chrome Developer Tools and choose a mobile device to emulate.