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.
npmcommands listed below must be run from the
webdirectory 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
Here’s how to look up your Mobify Cloud credentials:
- Login to Mobify Cloud
- Go to the Account Settings page
- Copy the email address as it appears under Update Account Information.
You will need this to generate the
- Scroll down to the section called Authorize Your Computer To Push
- 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.
- You will be asked to confirm resetting your API key. Click OK.
- Copy the API key. You will need this to generate the
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
$API_KEY with the email address and API key that you just
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:
You can supply a custom string for identifying your bundle in Mobify Cloud by
running the command with the
npm run push -- --message "Accessibility improvements"
For a list of other options you can supply to the push script, run it with the
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:
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 #
Detailed error message: Either a project does not exist with that name or you are not authorized to change it.
What to do:
- 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
- Verify that your project appears on the Mobify Cloud home page under
- 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.
- Open the project on Mobify Cloud and copy the string under Mobify Project ID
webdirectory inside your project directory
- Verify that the values for
projectSlugboth match the project ID string you copied in step 3
HTTP 401 Unauthorized #
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 #
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:
- Remove unused or unnecessary assets
- Scale down images
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
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:
- Log in to Mobify Cloud
- You should see a list of your projects. Click on the name of your project.
- In the left-hand sidebar, click on Bundles
- Find the bundle that you want to publish
- Click the Publish button next to the bundle
- 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