Menu Sheet Overlay
Search Sheet

Mobify Progressive Web SDK Docs

    This guide will show you how to generate a set of project files for a new Progressive Web App using the Mobify Platform.

    Setting up #

    Before you can generate a project, you’ll need an account on Mobify Cloud. If you haven’t got one already, you can request one from Mobify Support.

    Once you’re gotten your Mobify Cloud account, install Mobify’s generator package from npm by running the following command in a terminal window:

    npm install -g @mobify/generator

    Running the generator #

    Once the generator is installed, you can run it with the following command:

    mobify create

    Authentication #

    If this is your first time working with Mobify, you will be asked for your email address and Mobify API key. (If you are not asked for your API key and email address, that means you’ve already saved your authentication settings and you can skip ahead to the capturing project information section.)

    Here’s how get to your email address and API key:

    1. Login to Mobify Cloud
    2. Go to the Account Settings page
    3. Copy the email address as it appears under Update Account Information. Paste this in the terminal when asked by the generator.
    4. Scroll down to the section called Authorize Your Computer To Push Bundles.
      • If you are an existing user, click the Reset API Key button.
      • If you are a new user, click the Generate your API Key button.
    5. You will be asked to confirm resetting your API key. Click OK.
    6. Copy the API key and paste this in the terminal when asked by the generator.

    Important: the next time you come back to the Account Settings page in Mobify Cloud, the API key will not be displayed in full, so you would have to reset the API key to copy the full text of the API key.

    The generator will verify that your credentials are correct and save them in a new file called .mobify in your home directory. This will allow you to use the generator and push bundles to Mobify Cloud.

    Capturing project information #

    The project generator will ask you some questions about your project. The first thing you will be asked to enter is your Mobify Project ID found on Mobify Cloud. If you do not have a project on Mobify Cloud yet, you can just enter merlinspotions.

    Project generator asking for Mobify Project ID

    Next, you’ll be asked if you would like to Push to GitHub. This will push the generated project directly to Mobify’s GitHub. If you choose this option, you’ll need to contact Mobify support to give you permission to access the generated GitHub project. This is fine if you are generating a real project, but if you are just trying out the Mobify Platform out you should type n to answer “no” to this question.

    The next prompt will ask you to enter the Project URL. This is the URL for the site that will have the Mobify tag installed on it. If you’re not working on an official project yet, just enter

    Project generator asking for GitHub push and project

    The remaining questions asked by the generator are important when generating a project for a customer. If you are unsure of what to enter, please reach out to Mobify for assistance. If you are trying out the Mobify Platform, answer the rest of the answers as best you can or by using made-up data. When the generator is finished, it will return a link to download your project.

    Note: If you do not yet have the Mobify Google Analytics ID for your project, use a placeholder such as ‘merlins-analytics’. Do not use a different Google Analytics ID because this will cause analytics to be reported incorrectly.

    Project generator asking for remaining questions and

    Finishing up #

    Once you’ve downloaded your project, you may wish to put it in a version control system such as Git. Even if you aren’t working on an official project, storing your project in Git and making regular commits makes it easy to revert changes if you break something and can’t figure out how to fix it. If you want to push your project to your company’s GitHub account, you can run the following commands from your project directory in your terminal application:

    git remote add origin
    git push -u origin master