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

Raghavendra S
2 min readDec 16, 2024

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.

Part 2: Setting Up the Angular Frontend

Now, we’ll create the Angular frontend and prepare it to consume the Rails API.

Step 1: Install Angular CLI and Create a New Project

  1. Ensure Node.js and npm are installed:
node -v
npm -v

2. Install the Angular CLI:

npm install -g @angular/cli

3. Create a new Angular project:

ng new blog_frontend --routing
cd blog_frontend

Step 2: Install Dependencies

For UI styling, we’ll use Angular Material:

ng add @angular/material

#Choose a theme during installation (e.g., Indigo/Pink).

Step 3: Configure the Angular Environment

Update the src/environments/environment.ts file with the Rails API URL:

export const environment = {
production: false,
apiUrl: 'http://localhost:3000'
};

Step 4: Set Up Routing

Modify app-routing.module.ts to define basic routes for your application.

const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'articles', component: ArticlesComponent }
];

Generate the required components:

ng generate component Home
ng generate component Articles

To be continued in the part 3.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Raghavendra S
Raghavendra S

Written by Raghavendra S

Artificial enthusiast. Rubyist.

No responses yet

Write a response