Amazon Web Services and Ionic unite to build the ultimate full-stack starter to make it easy for developers to go from zero to a fully functioning app with production-ready backend in as few steps as possible.
AWS provides a range of services to help you develop mobile apps that can scale to hundreds of millions of users, and reach global audiences. With AWS you can get started quickly, ensure high quality by testing on real devices in the cloud, and measure and improve user engagement.
This Ionic starter comes with a pre-configured AWS Mobile Hub project set up to use Amazon DynamoDB, S3, Pinpoint, and Cognito. This project generates an Ionic app complete with a pre-configured AWS Mobile Hub project ready to go, along with pre-configured pages and utilities wired up to Amazon Cognito for user identity management, DynamoDB for application data, S3 for file storage, and Pinpoint for analytics.
Using the Starter
This starter project requires Ionic CLI 3.0, to install, run
npm install -g ionic@next
Make sure to add
sudo on Mac and Linux. If you encounter issues installing the Ionic 3 CLI, uninstall the old one using
npm uninstall -g ionic first.
To install the AWS CLI, first ensure your pip installation is up to date:
pip install --upgrade pip
Next, install the AWS CLI:
pip install awscli
sudo to the above commands on Mac and Linux.
To create a new Ionic project using this AWS Mobile Hub starter, run
ionic start myApp aws
Which will create a new app in
Once the app is created,
cd into it:
Proceed to the next steps on importing the auto-generated AWS Mobile Hub project.
Visit the AWS Mobile Hub and enter the Mobile Hub Console.
In the Mobile Hub dashboard, click the “Import your project” button. Next, find the
mobile-hub-project.zip included in this starter project, and drag and drop it to the import modal. Set the name of the project, and then click “Import project.”
Once the project is imported, you’ll be directed to the dashboard for this Mobile Hub project. To continue configuring the app, you’ll need to find the name of the Amazon S3 bucket auto generated through the App Content Delivery system. To do this, click the “Resources” button on the left side of the Mobile Hub project dashboard, find the “Amazon S3 Buckets” card, and then copy the bucket name that contains
Next, assuming your terminal is still open inside of the
myApp folder, run:
aws s3 cp s3://BUCKET_NAME/aws-config.js src/assets
BUCKET_NAME with the full name of the S3 bucket found above. This will copy the auto-generated
aws-config.jsfile into the
src/assets folder in your Ionic app, which pre-configures all your AWS settings automatically.
Now the app is configured and wired up to the AWS Mobile Hub and AWS services. To run the app in the browser, run
To run the app on device, first add a platform, and then run it:
ionic platform add ios ionic run ios
Or open the platform-specific project in the relevant IDE:
Since your Ionic app is just a web app, it can be hosted as a static website in an Amazon S3 bucket. To do this, copy the web assets to the S3 bucket:
npm run build aws s3 cp --recursive ./www s3://WEBSITE_BUCKET
WEBSITE_BUCKET is an S3 bucket configured with static hosting.