Angular 2 Lesson Rails 5

Lesson 1

Creating the Rails application

First, make sure you have Rails 5 installed. If rails -v doesn’t return Rails 5.0.0.1, do gem update rails to upgrade to the latest version.

Quick rundown of the flags:

  • --api: We want to create an API-only app. This, as you may know, is a new feature of Rails 5.
  • -T: We don’t want to use Test::Unit. (We’ll use RSpec.)
  • -d postgresql: We want to use PostgreSQL.

After that command finishes running, create the database and start the server.

If you now navigate to http://localhost:3000/, you should see a page that says “Yay! You’re on Rails!”.

Adding the Angular application

We’re going to create our Angular application using Angular CLI.

What is Angular CLI and why should you care?

Coming from Rails, you’re familiar with handy commands like rails new <project-name>, rails generate resource <resource-name>, etc. In the days of Angular 1 there wasn’t really a good tool (at least that I know of) that provided the same kind of benefits that Rails’ CLI does. One of the things that is arriving in conjuction with Angular 2 is the Angular CLI, which gives us commands to do things like spin up a new project, generate a new component, or run the test suite.

Free Guide

Getting Started´╗┐ ´╗┐with Angular and Rails

Get an Angular/Rails app up and running in as little as 20 minutes

What I find kind of funny is that Angular CLI was inspired by Ember CLI, which was probably inspired by Rails’ CLI.

Let’s install Angular CLI. I’m assuming you already have NPM installed, so if you don’t, install it before continuing.

A new Angular applicaton can be created by running ng new project-name. Let’s run that command inside the Rails project root now.

What we have right now is a slightly silly situation. Our Rails application lives at /author_wizard. The Angular application lives at /author_wizard/author-wizard. When I have an Angular application nested within a Rails application, I always call its directory client, which is a name I’ve just arbitrarily chosen because I think it makes sense. Let’s rename our Angular directory now, and then cd into it.

And let’s let Angular CLI spin up a server for us:

If you go now to http://localhost:4200/, you should see a page that says “app works!”.

Note: if you get a bunch of errors when you try to run ng server, it may be because of your Node, npm and TypeScript versions. See this GitHub issue for some ways to try to fix the problem.

About the author

Jason Swett

Add Comment

Click here to post a comment