ams-be

This project is a quick-start boilerplate of the Javascript framework Ember.js to start a frontend project with the common functionality out of the box like main page layout, user management and forms validation.

It's recomended for API projects that implement the JSON API specification (http://jsonapi.org/).

ams-be is a frontend project that matches the backend project ams-bl developed with the PHP micro-framework Lumen and may be set up with the ams-bel architecture (though other backend and architecture may be used).

Features

• User register.
• User login.
• User password reset with token.
• Update user account.
• Delete user account.
• User email verification on register.
• Contact form page.
• Forms validation.
• API error handling.
• Material Design styling.
• Header-body-footer page layout.
• FAQ, Privacy and Terms pages and page footer links.

Technologies

• TDD. This project uses Test Driven Development as development methodology.
• JSON API. API requests and responses follow the JSON API v1.0 specification: http://jsonapi.org/format/
• JWT. Authentication with JSON Web Tokens: https://tools.ietf.org/html/rfc7519
• Ember 3.0. This project is developed with the 3.0 version of Ember.js, released on 2018-02-14.

Addons

• ember-paper. Material Design for Ember.js using Ember.js syntax and components.
  http://miguelcobain.github.io/ember-paper/
  • ember-cli-sass. Installed by ember-paper.
• ember-test-selectors. Removes attributes starting with data-test- from HTML tags in templates for production builds. https://github.com/simplabs/ember-test-selectors
• ember-paper-link. Extends ember's built in link-to helper and adds paper-button styling and functionality.
  https://github.com/Subtletree/ember-paper-link
• qunit-dom. Specific test asserts for DOM elements.
  https://github.com/simplabs/qunit-dom
• ember-cli-fake-server. Makes it extremely simple to stub Ajax requests for testing.
  https://github.com/201-created/ember-cli-fake-server
• ember-simple-auth. A library for implementing authentication and authorization in Ember.js applications.
  https://github.com/simplabs/ember-simple-auth
• ember-cp-validations. Elaborate validations (email format, string length, fields comparison...) https://github.com/offirgolan/ember-cp-validations

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js (with npm)
• Ember CLI
• Google Chrome

Install

Download or fork this project and take it as the starting point of your own project.

Install NPM packages:

$ npm install

Run Development Server

• ember serve
• Visit your app at http://localhost:4200.
• Visit your tests at http://localhost:4200/tests.

If you are running ams-be frontend with the development server of ams-bl as backend, first run the ams-bl server and then run:

• ember serve --proxy http://localhost:8000

Usage

After creating your own project from this one, add your own files to the existing ones.

You can modify the existing files on the project you've created. The key files are located in:

• tests/
• app/components/
• app/controllers/
• app/models/
• app/styles/
• app/templates/

Code Generators

Make use of the many generators for code, try ember help generate for more details

Run Tests

• ember test
• ember test --server

Linting

• npm run lint:js
• npm run lint:js -- --fix

Build

• ember build (development)
• ember build --environment production (production)

Further Reading / Useful Links

• ember.js
• ember-cli
• Development Browser Extensions
  • ember inspector for chrome
  • ember inspector for firefox