ember-cli-amplify v0.3.0
ember-cli-amplify
Adds AWS Amplify to your Ember CLI project. This Ember addon is neither created nor endorsed by Amazon!
AWS Amplify connects to AWS Mobile Hub to work with Amazon Web Services. AWS Mobile Hub gives you a single place to easily configure AWS service and automatically provisions the AWS services required for the features in your app. ~ AWS Amplify Documentation
Prerequisites
- An AWS Account
- NodeJS
Ember CLI
npm install -g ember-cli # create a new project if you don't already have one ember new <app-name> cd <app-name>
AWS Amplify CLI
npm install -g @aws-amplify/cli # configure the CLI with your AWS credentials amplify configure
See here for more details about configuration
Installation
ember install ember-cli-amplify
On installation the addon will request confirmation to perform the following actions:
- Add aws-amplify to devDependencies in package.json
- Add ember-cli-webpack-imports to devDependencies in package.json
- Add aws-amplify to an ember-cli-webpack-imports configuration in the EmberApp options found in ember-cli-build.js
- Generate instance initializer amplify-initializer.js to configure the Amplify service
Because aws-amplify is a webpack module the ember-cli-webpack-exports addon is used to add aws-amplify to the build.
Post-Installation Configuration
Amplify Setup
From within the root of your application:
$ amplify init
Change the default options to:
Source code directory: app
Build directory: dist
Build command: ember b
Start command: ember s
This will generate the aws-exports.js file, placing it in your app/ directory.
Please note that backend resources that are created with awsmobile init are copied to amplify/#current-cloud-backend project folder. When you change your backend configuration and run amplify pull, the contents of the folder will be updated automatically, and a new copy of the configuration file (app/aws-exports.js) will be re-generated to app/aws-exports.js folder ~ AWS Amplify Quickstart
Amplify Feature Configuration
Enable the Amplify features you wish to use and push the configuration to AWS Mobile.
$ amplify add <category>
$ awsmobile push
Enable hosting and Publish your site to S3/CloudFront:
$ amplify add hosting
$ amplify publish
This will refresh your app/aws-exports.js
file.
Usage
Accessing each Amplify category in your Ember app is as simple as injecting the Amplify service into your code, for example:
import Component from '@ember/component';
import { inject as service } from '@ember/service';
export default Component.extend({
amplify:service(),
actions: {
signIn() {
const auth = this.get('amplify').Auth;
const username = this.get('username');
const password = this.get('password');
auth.signIn(username, password)
}
});
Want to know how to use the Amplify category objects? Check out these links:
Amplify Category Guides
Amplify API Docs
References
- Adding AWS Amplify to an Ember.js Application
- AWS Amplify Quickstart
- AST Rewriting Using recast and esprima
Contributing
Installation
git clone <repository-url>
cd ember-cli-amplify
npm install
Linting
npm run lint:js
npm run lint:js -- --fix
Running tests
ember test
– Runs the test suite on the current Ember versionember test --server
– Runs the test suite in "watch mode"ember try:each
– Runs the test suite against multiple Ember versions
Running the dummy application
ember serve
- Visit the dummy application at http://localhost:4200.
For more information on using ember-cli, visit https://ember-cli.com/.
License
This project is licensed under the MIT License.