This repo uses AWS Mobile Hub and JavaScript SDKs directly. While this approach will still work, the recommended approach when building front-end/JavaScript applications is now to use AWS Amplify.
A serverless mobile web application built with EmberJS using import/export as well as Hosting and Streaming functionality from AWS Mobile Hub.
This web app utilizes AWS MobileHub for it's backend resource automation and the MobileHub generated aws-config.js
for connection properties.
For a detailed walkthrough please follow the blog post.
You will need the following things properly installed on your computer.
When you click on the button below, you will be asked to log into the AWS console (if you are not already logged in). Once logged in, you will be prompted to name the project. Accept the name (or change it), then click Import project.
You can also manually import from the Mobile Hub Console by clicking Import your project and then dragging the MobileHub.zip file into the screen.
Once the import is complete, click on Hosting and Streaming, then Manage Files copy/note the Amazon S3 > your-s3-bucket at the top of the page. Fork this repo, then, in the root of your cloned project directory run (replace "your-s3-bucket" with the bucket created by MobileHub)
git clone https://github.com/awslabs/aws-mobilehub-emberaws s3 cp s3://your-hosting-bucket/aws-config.js ./vendor/aws-config.jsnpm install -g ember-clinpm installember serve
To test a PWA (Progressive Web App) install the workbox-cli:
-
npm install -g workbox-cli -
npm start -
Visit your app at http://localhost:4200.
You can also download the aws-config.js from the Mobile Hub console. Navigate to your project in Mobile Hub, click on Hosting and Streaming, then click on Download aws-config.js file.
If you update your AWS Mobile Hub project by adding or removing features you will need an updated aws-config.js file. You can do this by runing the following (from the root of your project):
aws s3 cp s3://your-hosting-bucket/aws-config.js ./vendor/aws-config.js
This will download the new aws-config.js file with the new configuration values. No update
to the app should be neccisary unless you added new functionality. In that case even,
you can simply refer to the new constants within the Ember app.
Make use of the many generators in Ember.js for your code, try ember help generate for more details. This app comes
with a pre-built adapter for DynamoDB, located in app/adapters. This adapter abstracts the DynamoDB backend logic so
that within your controllers you can work with Ember models.
- app/adapters/note.js -> Ember adapter for interacting with DynamoDB
- app/serializers/node.js -> Serializes data returned from AWS APIs for Ember model data
- app/models/note.js -> Ember model for our DynamoDB items
- app/initializers/aws.js -> AWS JS SDK bootstrap and initialization
- app/instance-initializers/auth.js -> Injection of Cognito resources (authenticated user) into Ember services
- app/services/cognito.js -> Amazon Cognito Ember service
ember testember test --server
ember build(development)ember build --environment production(production)
Make sure you have workbox installed, then run the npm script:
npm install -g workbox-clinpm run build
Deploy the contents of the dist directory.
Mobile Hub will create an S3 static location for testing purposes and a CloudFront distribution for CDN deployment of your application. To deploy the app to your MobileHub generated S3 hosting bucket and CloudFront, use the S3 bucket name obtained above, and simply run from your projects root directory:
ember build
aws s3 cp --recursive ./dist s3://your-s3-bucket/
Make sure you have workbox installed, then run the npm script:
npm install -g workbox-clinpm run build
Then visit your S3 static web hosts url. To retrieve this:
- Go to your MobileHub project and click on Hosting and Streaming
- Click on the tile View from S3
After a bit of time the file changes you pushed will also propigate to the CloudFront Distribution so that you can click the View from CloudFromt tile and browse the site from a CDN for faster performance. You can force this refresh to happen immediately from the Hosting and Streaming page:
- Click Edit your CDN distribution
- Click the Invalidations tab
- Select Create Invalidation and enter an asterisk (*) to refresh all the content
Once the process completes click the View from CloudFront tile in the Hosting and Streaming section of Mobile Hub.
NOTE: If you would like browser URLs to route directly to your Ember routes e.g. visiting http://your-s3-host/home etc. You should add "index.html" to the Error document as well in your CloudFront distribution.
Each time you make changes to the application it will need to be built and deployed. To build and copy to S3:
ember build
aws s3 cp --recursive ./dist s3://your-s3-hosting-bucket/
Then as above either wait for a CloudFront Distribution refresh or force one with an invalidation. We recommend you do development locally testing using ember serve and perform the above process for integration testing and deployments.
Sometimes with dynamic JavaScript apps it is usful to add error code mapping to allow the client application to handle the Errors:
- Sign in to the AWS Management Console and open the CloudFront console
- Click on your distribution
- Navigate to the Error Pages Tab and click Create Custom Error Response
- Choose the error code, click "Yes" to Customize Error Response
- Enter "/" (without quotes) in the Reponse Page Path, and choose 200 HTTP Response Code
Usually you'll want to do this for at least 400 and 403 error codes with most JavaScript frameworks.