Part-1: Building a Single Page Application (SPA) with Angular and Rails

This 6-part blog series takes you through building a single-page application (SPA) using Angular for the frontend and Ruby on Rails for the backend. By the end of this series, you’ll have a fully functional SPA and understand the integration of these two frameworks.
Setting Up the Rails Backend
We’ll start by creating the backend API using Ruby on Rails in API mode.
Step 1: Install Rails and Create a New Project
- Ensure you have Ruby and Rails installed:
ruby -v
rails -v
2. Create a new Rails API-only application:
rails new blog_api --api
cd blog_api
The --api
flag ensures the app is optimized for JSON responses.
Step 2: Configure the Database
Edit the config/database.yml
file to match your database credentials. For simplicity, we’ll use SQLite in development.
Run the following commands to set up the database:
rails db:create
rails db:migrate
Step 3: Generate a Resource
Create a resource to manage articles:
rails generate scaffold Article title:string content:text
rails db:migrate
This generates the model, controller, and routes for Article
.
Step 4: Configure JSON Serialization
- Use
Active Model Serializers
for JSON formatting:
bundle add active_model_serializers
- Generate a serializer:
rails generate serializer Article
- Customize the
ArticleSerializer
(located inapp/serializers/article_serializer.rb
) to include necessary fields.
Step 5: Enable CORS
Allow the Angular frontend to communicate with the Rails backend:
- Add the
rack-cors
gem:
bundle add rack-cors
- Update
config/initializers/cors.rb
:
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins '*' # Replace with specific origin in production resource '*', headers: :any, methods: %i[get post put patch delete options]
end
end
At this point, your Rails API is ready to handle requests from Angular. (Contd ..)