Angular features we’ll use

Components

Services

Dependency injection

Forms and form validations

Component inputs

Component outputs

View Children

Router and Router Guards

Part 1: Backend

Rough plan

Bootstrap and configure a RoR app in API mode Link to Postgres database Install, configure devise-token-auth gem Create and Configure our Devise User model Seed the DB with a default test user Create, Migrate and Seed our database Run the server and test the API

If you don’t want/need to go through this process, you can just download the final code from this repo: https://github.com/avatsaev/rails-devise-token-seed and jump straight to Part 2: Bootstrapping and configuring the frontend.

Let’s get started.

Setup

First let’s bootstrap a new Rails project in API mode and Postgres database (DB) config:

$ rails new rails_devise_token_auth --api --database=postgresql

This will create a barebones Rails 5 app in API mode (without views and without the asset pipeline, JSON will be the default response format)

Next, we’ll add a few useful gems to our Gemfile:

gem 'devise_token_auth'

gem 'omniauth'

gem 'rack-cors', :require => 'rack/cors'

Devise Token Auth leverages Devise and will allow us to do user management via a REST API, omniauth is a devise_token_auth dependency.

We need rack-cors, which allows us to do cross domain AJAX requests (because we are running in API mode, so the backend will most certainly run on a separate server and domain when in production).

Install the gems:

$ bundle install

Let’s configure cors, edit the file ./config/initializers/cors.rb (create if doesn’t exist), replace its contents with the following:

Rails.application.config.middleware.use Rack::Cors do allow do origins '*' resource '*', :headers => :any, :expose => ['access-token', 'expiry', 'token-type', 'uid', 'client'], :methods => [:get, :post, :options, :delete, :put] end end

For this tutorial we’ll allow all domains to contact our server, expose some custom headers retuned by Devise Token Auth, and allow the most commonly used http request methods, although we won’t need all of them.

Database configuration

Assuming you already have a Postgres server installed and running on your system, we do not have to change anything, because Postgres is already initialised with a public postgres user and database, and initial Rails DB config uses postgres as default user and localhost as default host, but if your Postgres server has a custom password protected user, don’t forget to edit the ./config/database.yml file:

default: &default

adapter: postgresql

encoding: unicode

pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> development:

<<: *default

database: rails_devise_token_seed_development

username: YOUR_CUSTOM_USERNAME

password: YOUR_PASSWORD test:

<<: *default

database: rails_devise_token_seed_test

username: YOUR_CUSTOM_USERNAME

password: YOUR_PASSWORD

Create the database

$ rails db:create

This command will create our development and test databases.

Initialise Devise User Model

If you read the DeviseTokenAuth README you’ll see how to initialise our user model:

$ rails generate devise_token_auth:install User auth

User will be our model name, and auth will be the endpoint of our user management rest api (ex: /auth/sign_in, /auth/sign_out)

Generated output of this command should look something like this:

create config/initializers/devise_token_auth.rb create db/migrate/20170131161242_devise_token_auth_create_users.rb create app/models/user.rb insert app/controllers/application_controller.rb gsub config/routes.rb

The most interesting files for us are highlighted in bold.

The first one is a database migration file that will initialise the users table for us with all required fields.

We also have User model initialised, as well as the auth endpoint mounted in routes.rb

Configure User Model

For this tutorial, we’ll disable account email validation by opening the User model (./app/models/user.rb) file and removing confirmable module from the devise configuration, so the User model should look something like this:

class User < ActiveRecord::Base





devise :database_authenticatable,

:registerable,

:recoverable,

:rememberable,

:trackable,

:validatable,

:omniauthable include DeviseTokenAuth::Concerns::User end

Create a default User seed

We’ll initialise the users table with a default user that will allow us to test our API as we go. In ./db/seeds.rb add the following line:

User.create(email: 'user@example.com', nickname: 'UOne', name: 'User One', password: "monkey67")

Our login will be user@example.com with password monkey67

Migrate and Seed the DB

rails db:migrate && rails db:seed

This one liner will migrate the users table, and create our default user in it: