Menu
Menu Sheet Overlay
Search
Search Sheet

Mobify Cloud

    Mobify Cloud (cloud.mobify.com) is where Mobify customers and partner developers go to manage the deployment of their Progressive Web Apps. Mobify Cloud allows you to preview the project created during development and allows you to publish that project when it’s ready to go into production.

    To develop with the Progressive Mobile Web SDK, you will need a developer account on Mobify Cloud. To request a developer account, contact Mobify Cloud support.

    To turn your project files into a usable Progressive Web App, they must be collected into a bundle and uploaded to Mobify Cloud. We call this pushing a bundle.

    Important: All npm commands listed below must be run from the web directory inside your project directory.

    Saving your credentials #

    Before you can push a bundle, you need to generate a .mobify file in your home directory that contains your Mobify Cloud credentials. (If you already have a .mobify file, you can skip ahead to the pushing a bundle section.)

    Here’s how to look up your Mobify Cloud credentials:

    1. Login to Mobify Cloud
    2. Go to the Account Settings page
    3. Copy the email address as it appears under Update Account Information. You will need this to generate the .mobify file.
    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. You will need this to generate the .mobify file.

    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.

    Run the following command in your terminal to generate your .mobify file, and replace $EMAIL and $API_KEY with the email address and API key that you just copied:

    npm run save-credentials -- --user $EMAIL --key $API_KEY
    

    If you clicked the Reset API Key button in order to obtain your API key, you will need to run the save-credentials script again on any other computers where you’ll be pushing bundles from.

    Pushing a bundle #

    To push a bundle, run the following command:

    npm run push
    

    By default, your project will be identified in Mobify Cloud by a string that combines the name of your Git branch with the first 7 characters of the SHA-1 checksum that Git uses to identify the commit. For example: master: c12d358.

    You can supply a custom string for identifying your bundle in Mobify Cloud by running the command with the --message flag:

    npm run push -- --message "Accessibility improvements"
    

    For a list of other options you can supply to the push script, run it with the --help option:

    npm run push -- --help
    

    Troubleshooting issues with pushing a bundle #

    When a bundle is successfully pushed, you should see the message “Beginning upload…” followed by “Bundle Uploaded!” and a link to preview the bundle.

    This is what you should see in your terminal after successfully pushing a bundle:

    Successful bundle push

    If something went wrong, you will see one of the following error messages following the “Beginning upload…” message. You will probably need to scroll back up in your terminal to find the exact message.

    Here’s how to troubleshoot all the possible error messages that you may encounter when pushing a bundle.

    HTTP 404 #

    HTTP 404 Error

    Detailed error message: Either a project does not exist with that name or you are not authorized to change it.

    What to do:

    1. Repeat the steps above in pushing a bundle and make sure that the email address and API key settings you pass to the command line script match the settings in Mobify Cloud
    2. Verify that your project appears on the Mobify Cloud home page under Projects
      • If your project does not appear, contact Mobify Cloud support to make sure that the project has been created and that you have been granted access to it as a team member.
    3. Open the project on Mobify Cloud and copy the string under Mobify Project ID
    4. Open package.json in the web directory inside your project directory
    5. Verify that the values for name and projectSlug both match the project ID string you copied in step 3

    HTTP 401 Unauthorized #

    HTTP 401 Error

    What to do: Contact your contact Mobify Cloud support and ask to have your role changed. If your role is set to “Read Only,” you will not be able to push bundles.

    HTTP 413 Request Entity Too Large #

    HTTP 413 Error

    The maximum size for bundles is 50 MB. You can check the size of a bundle by inspecting the build folder within your project. If your project is nearing this amount, or has already exceeded it, here’s what you can do to reduce the bundle size:

    Once you’ve reduced the size of your project files, try pushing the bundle again.

    Publishing a bundle #

    For any site that uses the Mobify Platform, only one bundle at a time can be designated as published for each environment. Every project comes with a single environment, called production. (If you need more than one environment, contact Mobify Cloud support.)

    The published bundle for the production environment contains the code that will be loaded by the Mobify Tag when a user visits the site on a mobile device. When a new bundle is published, the CDN caches for the previously published bundle will be invalidated. This ensures that the newly published bundle will be loaded when a user returns to the site.

    To publish a bundle that you have pushed to Mobify Cloud:

    1. Log in to Mobify Cloud
    2. You should see a list of your projects. Click on the name of your project.
    3. In the left-hand sidebar, click on Bundles
    4. Find the bundle that you want to publish
    5. Click the Publish button next to the bundle
    6. Click Confirm Publish

    After a few seconds, you should see the published bundle appear under Published Bundle.

    You can still preview any of the other bundles that have been pushed to Mobify Cloud.

    The reset bundle #

    Sometimes you’ll need to push a reset bundle. A reset bundle is basically empty. It does not contain any code that will change the way a user experiences a website, and it does not provide any features of the Mobify Platform. At the beginning of a project, you’ll need to push a reset bundle before installing the Mobify tag.

    In an emergency, you can push a reset bundle to disable Mobify on a website.

    To deploy a reset bundle, run the following command:

    npm run reset