Yesterday, a friend of mine asked me to email him on how to publish his app built with framework7 and cordova to Apple App store. I imagined you might need help just like my friend hence, the reason for this guide. This will be broken in three steps depending on where you’re starting from.
Setting up your Machine (MAC and Linux)
Converting from Source code to Xcode project
Deploying to App Store
Setting up your machine
Requirements: OS X operating system on Intel-based Macs. Xcode® 10.0 (the minimum required version) runs only on OS X version 10.13 (Sierra High) or greater, and includes the iOS 11 SDK (Software Development Kit), Mac book, Node.js, npm and perseverance(pun intended).
If you have not installed cordova on your machine, you might wanna do that before moving forward.
Check that you have node and npm installed
To check if you have Node.js installed, run this command in your terminal:
node -v
To confirm that you have npm installed you can run this command in your terminal:
npm -v
npm is distributed with Node.js which means that when you download Node.js, you automatically get npm installed on your computer.
npm is a separate project from Node.js, and tends to update more frequently. As a result, even if you’ve just downloaded Node.js (and therefore npm), you’ll probably need to update your npm. Luckily, npm knows how to update itself! To update your npm, type this into your terminal:
npm install npm@latest -g
Now that you have npm and node.js installed, proceed to install cordova CLI. this is where we will convert to various native platforms. in your terminal, type
sudo npm install -g cordova
Following installation, you should be able to run cordova on the command line with no arguments and it should print help text.
Convert source code to Xcode Project
Create the Cordova App
In your terminal, go to the directory where you want to maintain your source code, and create a cordova project:
cordova create hello com.example.hello HelloWorld
This creates the required directory structure for your cordova app. By default, the cordova create script generates a skeletal web-based application whose home page is the project's www/index.html file.
Now, I assume you already have and existing framework7 app. If you used framework7 to develop your app, just copy the content of www/ folder into www/ folder of your new HelloWorld Cordova app.
Add Platforms
All subsequent commands need to be run within the cordova project’s directory. To navigate into our HelloWorld project directory we created earlier, type
cd hello
this should take you into the cordova project directory.
Add the platforms that you want to target your app. Since this guide is specific to ios only, we will add the ‘ios’ platform and ensure it get saved to config.xml and package.json:
cordova platform add ios
To check your current set of platforms:
$ cordova platform ls
Note: you should not edit any files in the /platforms/ directory. The files in this directory are routinely overwritten when preparing applications for building, or when plugins are re-installed.
Install pre-requisites for building
Now this is where you will need perseverance in the event that your system isn’t properly setup. Lets go!
To check if you satisfy requirements for building the platform: type in your terminal
cordova requirements
Should return result like this
Requirements check results for ios:
Apple OS X: installed
Build the App
Run the following command to build the project for ios platform:
cordova build ios
Once this completes successfully, you’ll have your deploy-able ios project in a folder /platforms/ios/HelloWorld
Open up Xcode and open the workspace file (platforms/ios/HelloWorld.xcworkspace), or from the command line:
open ./platforms/ios/HelloWorld.xcworkspace/
To distribute your applications on app store, you will need to “sign” your application.
To distribute your app to the App Store, you need to create a Provisioning Profile in order to get it approved by Apple. However, when you’re in the development stages of building your app, it’s a good idea to first test it before sending it to Apple. Provisioning profiles enable developers to do this by allowing them to run and test an app on a physical device.
A provisioning profile is downloaded from your Apple Developer account and embedded within the app bundle itself. Specified devices within the provisioning profile can be used for testing only by people whose iPhone Development Certificates are included in the profile.
Step 1
Go to https://developer.apple.com and click on Account (you must have an Apple Developer account to begin)
- Click Log In, choose Select Certificates, Identifiers & Profiles
Step 2
On the left tab under Provisioning Profiles, select Distribution
1. Select add button “+” at the top right to create a new profile
2. Select “App Store” and press Continue
3. Select App ID and press Continue
4. Select the Certificate you wish to include in this provisioning profile (the certificate the app was signed with) and click Continue. Next, select the devices you wish to include in the provisioning profile. The certificate is a public/private key-pair, which identifies who developed the app.
5. Create a name for your profile and click Generate. You might want to include “Distribution” in the name so you can distinguish this one from testing.
Note: You need a matching provisioning profile name when you distribute to the App Store. This is to verify that your developer account created the app.
Step 3
1. Download the provisioning profile to your machine by clicking the Download button.
Submitting to App Store
1. Create an iTunes Connect app record
You have to create a record in iTunes Connect before you can upload an app for distribution on the App Store. This record includes all the information that needed to manage the app through the distribution process and appears on the store for the app. To sign in to App Store Connect, go to App Store Connect.
2. Configure your Xcode project for distribution
Back to Xcode, you have to set Identity and Team, Bundle ID, provisioning profile and set version number and release string. All that could be done from the General pane in the project editor.
3. Archive your app
Xcode archives allow you to build your app and store it, along with critical debugging information, in a bundle that’s managed by Xcode. Choose Product > Archive to create archive. Xcode will create and store archive in Archives organizer.
4. Run iTunes Connect validation tests
Validate your archive before uploading it to iTunes Connect. In the Archives organizer select the archive and click Validate. Review and fix validation issues, if found.
5. Upload your app
To upload your app to iTunes Connect, in the Archives organizer select the archive you want to upload, and click “Upload to App Store” Provisioning Profiles are packaged with iOS apps so users devices can install them.
6. Submit Version for Review
Every app that is submitted to the store has to be reviewed by the Apple team before release. The app should comply with App Store guidelines.
You can request Manual or Automatic release of the approved app. We recommend manual release option.
Ensure that all relevant infrastructure (backend servers, etc.) is running in production mode before you submit the app.
App review usually takes 2–3 days (you can check current expected review time here). If your app was not approved, review the notes in the Resolution Center and make any necessary changes to the app or version information then resubmit. Common reasons and statistics for app rejections is available here.
7. Release
Enjoy the final, most satisfying step.
If you selected Manual release, click Release your app when ready
Wait for the green “Ready for Sale” version status (This might take from 1 hour to 1 day after release)
Search for your app on the App Store
Celebrate!
When submitting a new version of your app, you will only have to repeat steps 2 through 7.
I hope this is helps in publishing your Framework7/cordova app to Apple App Store… If you run into any issues, carefully read the error message. I’m 100% sure you’ll find a solution on stack overflow. persevere!!!
I will publish a guide to deploy an Android Application to Google Playstore in my next article. I promise you, it will be easier. see you soon!