🌆 ANGULARJS → REACT / ANGULAR 17 🌆

╔════════════════════════════════════════════════════════════════╗
║                                                                ║
║   ███████╗██████╗  █████╗ ███╗   ███╗███████╗██╗    ██╗ ██████╗ ██████╗ ██╗  ██╗
║   ██╔════╝██╔══██╗██╔══██╗████╗ ████║██╔════╝██║    ██║██╔═══██╗██╔══██╗██║ ██╔╝
║   █████╗  ██████╔╝███████║██╔████╔██║█████╗  ██║ █╗ ██║██║   ██║██████╔╝█████╔╝ 
║   ██╔══╝  ██╔══██╗██╔══██║██║╚██╔╝██║██╔══╝  ██║███╗██║██║   ██║██╔══██╗██╔═██╗ 
║   ██║     ██║  ██║██║  ██║██║ ╚═╝ ██║███████╗╚███╔███╔╝╚██████╔╝██║  ██║██║  ██╗
║   ╚═╝     ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝╚══════╝ ╚══╝╚══╝  ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝
║                                                                ║
║              ███████╗██╗   ██╗ ██████╗ ██╗     ██╗   ██╗████████╗██╗ ██████╗ ███╗   ██╗
║              ██╔════╝██║   ██║██╔═══██╗██║     ██║   ██║╚══██╔══╝██║██╔═══██╗████╗  ██║
║              █████╗  ██║   ██║██║   ██║██║     ██║   ██║   ██║   ██║██║   ██║██╔██╗ ██║
║              ██╔══╝  ╚██╗ ██╔╝██║   ██║██║     ██║   ██║   ██║   ██║██║   ██║██║╚██╗██║
║              ███████╗ ╚████╔╝ ╚██████╔╝███████╗╚██████╔╝   ██║   ██║╚██████╔╝██║ ╚████║
║              ╚══════╝  ╚═══╝   ╚═════╝ ╚══════╝ ╚═════╝    ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚═══╝
║                                                                ║
╚════════════════════════════════════════════════════════════════╝

         🕹️  THE ULTIMATE FRAMEWORK TIME TRAVEL EXPERIENCE  🕹️
              From 2010 Legacy → 2024 Modern Architecture

🎮 OVERVIEW

Welcome to the Framework Evolution Lab 🧬

Step into the neon-lit corridors of frontend history! This lab takes you on an epic journey through time — from the golden age of AngularJS 1.6 (circa 2010) to the cutting-edge frontier of React 18 or Angular 17 with TypeScript.

⚠️ MISSION CRITICAL: AngularJS reached END OF LIFE in January 2022. No more security patches. No more updates. The clock is ticking for enterprises with legacy AngularJS apps! ⏰

Your Mission: Modernize GlobalTravel Corp's legacy travel booking portal — a full-featured AngularJS application complete with Bower packages, Grunt builds, jQuery plugins, and all the nostalgic anti-patterns of yesteryear. Transform it into a blazing-fast, type-safe, modern single-page application! 🚀

🌟 WHAT YOU'LL LEARN

FRAMEWORK EVOLVED 🧬

Assess migration complexity and scope for AngularJS applications
Map AngularJS controllers + templates → React functional components OR Angular standalone components
Migrate $scope and $rootScope → React hooks/Zustand OR Angular signals/NgRx
Convert UI-Router states → TanStack Router OR Angular Router

BOWER → NPM UPGRADE ⬆️

Replace deprecated Bower with modern npm/pnpm
Eliminate jQuery dependencies (write native components instead!)
Swap Moment.js → date-fns (reduce bundle size by 80%!)
Remove unnecessary Lodash usage (modern ES6+ has you covered!)

GRUNT → VITE SPEEDRUN 🏎️

Rip out the Grunt pipeline (goodbye, complex config!)
Install Vite (React) or Angular CLI (Angular) — lightning-fast builds ⚡
Hot Module Replacement (HMR) that actually works
Build times: from minutes → seconds

TYPESCRIPT UNLOCKED 🔓

Convert loosely-typed JavaScript → strict TypeScript
Catch runtime errors at compile time
IntelliSense superpowers in your IDE
Refactor with confidence using type safety

DEPLOYMENT MASTERY 🌐

Build production-optimized bundles
Deploy to Azure Static Web Apps
Set up CI/CD with GitHub Actions

🔮 CHOOSE YOUR PATH 🔀

This lab offers TWO PARALLEL UNIVERSES for your migration destination:

🔷 PATH A: REACT 18 (Recommended for greenfield flexibility)

React 18 + TypeScript
    ├── ⚡ Vite (build tool)
    ├── 🧭 TanStack Router (routing)
    ├── 🔄 TanStack Query (API state)
    ├── 🐻 Zustand (global state)
    ├── 🧪 Vitest + Testing Library (tests)
    └── 🎨 Modern CSS Modules

Choose React if:

✅ You want maximum flexibility and ecosystem richness
✅ Your team prefers functional programming patterns
✅ You need a lightweight, composable architecture
✅ You're building component libraries or design systems

🔶 PATH B: ANGULAR 17 (Recommended for enterprise continuity)

Angular 17 + TypeScript
    ├── 🛠️ Angular CLI (build tool)
    ├── 🧭 Angular Router (routing)
    ├── 🔄 HttpClient + Interceptors (API)
    ├── 🏪 NgRx (global state)
    ├── 🧪 Jasmine + TestBed (tests)
    └── 🎨 Angular Material (UI components)

Choose Angular if:

✅ Your team already knows AngularJS and wants a familiar migration
✅ You need a batteries-included framework with opinionated structure
✅ Enterprise-grade type safety and dependency injection are priorities
✅ You prefer a full-featured framework over composing libraries

💡 Pro Tip: Both paths achieve the same outcome! The lab includes complete implementations for both React and Angular. You can even migrate to both and compare! 🆚

⚡ PREREQUISITES

Before you jack into the mainframe, make sure you have:

🧠 Knowledge:
- JavaScript fundamentals
- AngularJS 1.x familiarity (controllers, directives, services)
- TypeScript basics (or willingness to learn!)
- Understanding of REST APIs
💻 System Requirements:
- Node.js 20+ installed (Download)
- npm (comes with Node) or pnpm
- Git (for version control)
- Your favorite code editor (VS Code recommended)
☁️ Azure (Optional for deployment):
- Azure subscription (Free tier available)
- Azure CLI installed
📦 Legacy Tools (for running the AngularJS app):
- Bower: npm install -g bower
- Grunt CLI: npm install -g grunt-cli

🚀 QUICK START

🕰️ STEP 1: EXPERIENCE THE PAST (Run the Legacy AngularJS App)

# Clone the repository
git clone https://github.com/EmeaAppGbb/appmodlab-angularjs-to-react-angular-modern.git
cd appmodlab-angularjs-to-react-angular-modern

# Check out the legacy branch
git checkout legacy

# Install legacy dependencies (Bower + npm)
bower install
npm install

# Start the mock API server
node api-mock/server.js &

# Build the AngularJS app with Grunt
grunt build

# Serve the legacy app
grunt serve

🌐 Open http://localhost:8080 and witness the glory of 2010's finest frontend tech!

🎯 STEP 2: CHOOSE YOUR FRAMEWORK PATH

For React:

git checkout solution
npm install
npm run dev

For Angular:

git checkout solution-angular
npm install
npm start

🧪 STEP 3: EXPLORE STEP-BY-STEP BRANCHES

Each migration step has its own branch:

git checkout step-1-project-setup        # Vite/Angular CLI scaffold
git checkout step-2-component-migration  # Controllers → Components
git checkout step-3-state-management     # $scope → hooks/signals
git checkout step-4-routing-and-api      # UI-Router → modern router
git checkout step-5-testing-and-deploy   # Tests + Azure deployment

📁 PROJECT STRUCTURE

🗂️ Legacy AngularJS App (`legacy` branch)

globaltravel-portal/
├── 📦 bower.json                    # Bower dependencies (deprecated)
├── ⚙️ Gruntfile.js                  # Grunt build config (complex!)
├── 🎨 app/
│   ├── app.js                       # AngularJS module definition
│   ├── app.routes.js                # UI-Router state configs
│   ├── components/
│   │   ├── 🛫 flight-search/        # Flight search feature
│   │   ├── 🏨 hotel-booking/        # Hotel reservation
│   │   ├── 📋 itinerary/            # Trip itinerary manager
│   │   ├── 📝 travel-request/       # Approval workflow
│   │   └── 💰 expense-reconciliation/ # Expense reports
│   ├── directives/                  # Custom AngularJS directives
│   │   ├── date-picker.directive.js # jQuery datepicker wrapper
│   │   ├── currency-input.directive.js
│   │   └── approval-status.directive.js
│   ├── filters/                     # AngularJS filters
│   │   ├── currency.filter.js
│   │   └── date-format.filter.js
│   ├── services/                    # AngularJS services
│   │   ├── auth.service.js          # Authentication with $http
│   │   ├── api.service.js           # Restangular config
│   │   └── user.service.js          # User profile
│   └── assets/
│       ├── css/                     # Bootstrap 3 + custom styles
│       └── images/
├── 🧪 test/spec/                    # Karma + Jasmine tests
└── 🔌 api-mock/
    └── server.js                    # Express mock API server

🆕 Modern React App (`solution` branch)

globaltravel-portal-react/
├── 📦 package.json                  # npm dependencies
├── ⚡ vite.config.ts                # Vite build config (simple!)
├── 🎨 src/
│   ├── main.tsx                     # App entry point
│   ├── App.tsx                      # Root component
│   ├── router.tsx                   # TanStack Router config
│   ├── components/
│   │   ├── 🛫 FlightSearch/         # React functional component
│   │   ├── 🏨 HotelBooking/
│   │   ├── 📋 Itinerary/
│   │   ├── 📝 TravelRequest/
│   │   └── 💰 ExpenseReconciliation/
│   ├── hooks/                       # Custom React hooks
│   │   ├── useAuth.ts
│   │   ├── useFlights.ts
│   │   └── useHotels.ts
│   ├── store/                       # Zustand stores
│   │   ├── authStore.ts
│   │   └── userStore.ts
│   ├── api/                         # TanStack Query + Axios
│   │   └── client.ts
│   └── utils/                       # Utility functions
│       └── dateHelpers.ts           # date-fns wrappers
└── 🧪 tests/                        # Vitest + Testing Library

🅰️ Modern Angular App (`solution-angular` branch)

globaltravel-portal-angular/
├── 📦 package.json                  # npm dependencies
├── 🛠️ angular.json                  # Angular CLI config
├── 🎨 src/
│   ├── main.ts                      # App bootstrap
│   ├── app/
│   │   ├── app.config.ts            # App configuration
│   │   ├── app.routes.ts            # Angular Router config
│   │   ├── components/
│   │   │   ├── 🛫 flight-search/    # Standalone component
│   │   │   ├── 🏨 hotel-booking/
│   │   │   ├── 📋 itinerary/
│   │   │   ├── 📝 travel-request/
│   │   │   └── 💰 expense-reconciliation/
│   │   ├── services/                # Angular services
│   │   │   ├── auth.service.ts
│   │   │   ├── flight.service.ts
│   │   │   └── hotel.service.ts
│   │   ├── store/                   # NgRx store
│   │   │   ├── actions/
│   │   │   ├── reducers/
│   │   │   └── selectors/
│   │   └── interceptors/            # HTTP interceptors
│   │       └── auth.interceptor.ts
└── 🧪 tests/                        # Jasmine + TestBed

💾 LEGACY STACK (2010 Era)

The Old Guard 🗡️

Technology	Version	Status	Reason for Replacement
🅰️ AngularJS	1.6.x	❌ EOL (2022)	No security patches, poor performance, no TypeScript
📦 Bower	1.8.x	❌ Deprecated	Unmaintained since 2017, replaced by npm
⚙️ Grunt	1.x	⚠️ Legacy	Slow builds, complex config, replaced by Vite/CLI
💲 jQuery	2.x	⚠️ Not needed	DOM manipulation done by React/Angular
🔧 Restangular	1.6.x	⚠️ Abandoned	Extra abstraction layer over $http
📅 Moment.js	2.x	⚠️ Deprecated	Huge bundle size (67KB), use date-fns (12KB)
🔨 Lodash	4.x	⚠️ Partially needed	Many functions available in modern ES6+
☕ Karma + Jasmine	-	⚠️ Outdated	Replaced by Vitest (React) or modern Jasmine (Angular)

Classic Anti-Patterns Present 🐛

❌ $scope-based data binding (not controllerAs syntax)
❌ $rootScope events for cross-component communication ($broadcast/$on)
❌ jQuery plugins wrapped in AngularJS directives (DOM manipulation conflicts)
❌ $watch and $watchCollection for manual change detection
❌ Two-way data binding causing performance issues on large lists
❌ No TypeScript — dynamic typing leading to runtime errors
❌ Mixed jQuery and AngularJS DOM manipulation
❌ Global namespace pollution

🎯 TARGET ARCHITECTURE (2024 Modern)

The New Order 🚀

React Path:

Technology	Version	Why It's Better
⚛️ React	18.x	Virtual DOM, hooks, huge ecosystem, 200K+ weekly downloads
📘 TypeScript	5.x	Type safety, IntelliSense, refactoring confidence
⚡ Vite	5.x	Lightning-fast builds (10x faster than Webpack), HMR in <50ms
🧭 TanStack Router	1.x	Type-safe routing, nested routes, data loading
🔄 TanStack Query	5.x	Server state management, caching, background refetch
🐻 Zustand	4.x	Lightweight global state (1KB), no boilerplate
📅 date-fns	3.x	Modular, tree-shakeable, 80% smaller than Moment.js
🧪 Vitest	1.x	Fast tests with Vite, Jest-compatible API

Angular Path:

Technology	Version	Why It's Better
🅰️ Angular	17.x	Signals, standalone components, improved DX, enterprise-grade
📘 TypeScript	5.x	First-class citizen in Angular, full type safety
🛠️ Angular CLI	17.x	Optimized builds, built-in best practices
🧭 Angular Router	17.x	Feature-rich routing, guards, lazy loading
🔄 HttpClient	17.x	RxJS-powered, interceptors, automatic JSON parsing
🏪 NgRx	17.x	Redux pattern, DevTools, time-travel debugging
🎨 Angular Material	17.x	Production-ready components, accessibility built-in
🧪 Jasmine + TestBed	-	Powerful testing utilities, dependency injection

Architecture Transformation ✨

BEFORE (AngularJS):                        AFTER (React/Angular):

┌─────────────────────────┐               ┌─────────────────────────┐
│   Controller + $scope   │  ────────────► │  Functional Component   │
│   (Two-way binding)     │               │  (React Hooks/Signals)  │
└─────────────────────────┘               └─────────────────────────┘

┌─────────────────────────┐               ┌─────────────────────────┐
│   $rootScope Events     │  ────────────► │  Zustand/NgRx Store     │
│   ($broadcast/$on)      │               │  (Immutable state)      │
└─────────────────────────┘               └─────────────────────────┘

┌─────────────────────────┐               ┌─────────────────────────┐
│   UI-Router States      │  ────────────► │  TanStack/Angular Router│
│   (config-based)        │               │  (Type-safe routes)     │
└─────────────────────────┘               └─────────────────────────┘

┌─────────────────────────┐               ┌─────────────────────────┐
│   jQuery Directives     │  ────────────► │  Native Components      │
│   (DOM manipulation)    │               │  (Virtual DOM/Signals)  │
└─────────────────────────┘               └─────────────────────────┘

┌─────────────────────────┐               ┌─────────────────────────┐
│   Restangular + $http   │  ────────────► │  TanStack Query/HttpClt │
│   (Promise-based)       │               │  (Observable/async)     │
└─────────────────────────┘               └─────────────────────────┘

┌─────────────────────────┐               ┌─────────────────────────┐
│   Bower + Grunt         │  ────────────► │  npm + Vite/CLI         │
│   (Slow builds)         │               │  (HMR in milliseconds)  │
└─────────────────────────┘               └─────────────────────────┘

🎓 LAB WALKTHROUGH (Using GitHub Copilot CLI)

🤖 Powered by AI Pair Programming

This lab is designed to be completed with GitHub Copilot CLI as your co-pilot! The CLI can help you:

🔍 Analyze legacy code patterns
🔄 Generate migration code snippets
🧪 Write unit tests automatically
📝 Document your changes
🐛 Debug build errors

Quick Copilot CLI Tips:

# Ask Copilot to explain legacy code
@workspace /explain How does the AngularJS flight-search controller work?

# Generate migration code
@workspace /new Create a React functional component equivalent to this AngularJS controller

# Fix build errors
@terminal Why is Vite failing to build?

# Generate tests
@workspace /new Write Vitest tests for the FlightSearch component

📚 Step-by-Step Migration Journey

🎬 STAGE 1: RUN THE LEGACY APP (30 min)

Objective: Get the AngularJS app running and understand its features.

Check out the legacy branch
Install Bower dependencies: bower install
Install npm dependencies: npm install
Start the mock API: node api-mock/server.js
Build with Grunt: grunt build
Run the app: grunt serve
Explore all features:
- 🛫 Search for flights (JFK → LAX)
- 🏨 Book a hotel
- 📋 View your itinerary
- 📝 Submit a travel request for approval
- 💰 Reconcile expenses

💡 Copilot Tip: Use @workspace /explain to understand how each AngularJS controller, service, and directive works.

🔍 STAGE 2: ANALYZE MIGRATION SCOPE (45 min)

Objective: Inventory all AngularJS components and plan the migration.

What to Analyze:

Controllers: How many? Which ones are most complex?
Directives: Which are reusable? Which wrap jQuery plugins?
Services: Which make API calls? Which manage state?
Filters: Which are used frequently?
Routes: How many UI-Router states?
Dependencies: Bower packages to replace with npm equivalents

💡 Copilot Tip: Ask Copilot to create a migration checklist for you:

@workspace Create a checklist of all AngularJS controllers and their React/Angular equivalents

🏗️ STAGE 3: SCAFFOLD MODERN PROJECT (30 min)

React Path:

# Create Vite + React + TypeScript project
npm create vite@latest globaltravel-portal-react -- --template react-ts
cd globaltravel-portal-react

# Install dependencies
npm install
npm install @tanstack/router @tanstack/react-query zustand axios date-fns

# Install dev dependencies
npm install -D vitest @testing-library/react @testing-library/jest-dom

Angular Path:

# Create Angular 17 project
npx @angular/cli@17 new globaltravel-portal-angular --standalone --routing --style=scss
cd globaltravel-portal-angular

# Install dependencies
npm install @ngrx/store @ngrx/effects @angular/material date-fns

# Install dev dependencies
npm install -D @ngrx/store-devtools

💡 Copilot Tip: Ask Copilot to generate the project structure:

@workspace /new Create a folder structure for the React/Angular migration

🧩 STAGE 4: MIGRATE COMPONENTS (2-3 hours)

Objective: Convert AngularJS controllers + templates to React/Angular components.

Migration Pattern (React):

Before (AngularJS Controller):

// flight-search.controller.js
angular.module('app').controller('FlightSearchController', 
  function($scope, FlightService) {
    $scope.searchParams = { origin: '', destination: '' };
    $scope.flights = [];
    
    $scope.searchFlights = function() {
      FlightService.search($scope.searchParams).then(function(data) {
        $scope.flights = data;
      });
    };
  }
);

After (React Component):

// FlightSearch.tsx
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { searchFlights } from '@/api/flightService';

export const FlightSearch = () => {
  const [searchParams, setSearchParams] = useState({ origin: '', destination: '' });
  
  const { data: flights, refetch } = useQuery({
    queryKey: ['flights', searchParams],
    queryFn: () => searchFlights(searchParams),
    enabled: false,
  });

  return (
    <div>
      {/* Component JSX */}
    </div>
  );
};

Migration Pattern (Angular):

After (Angular Standalone Component):

// flight-search.component.ts
import { Component, signal } from '@angular/core';
import { FlightService } from '@/services/flight.service';

@Component({
  selector: 'app-flight-search',
  standalone: true,
  templateUrl: './flight-search.component.html',
})
export class FlightSearchComponent {
  searchParams = signal({ origin: '', destination: '' });
  flights = signal([]);

  constructor(private flightService: FlightService) {}

  searchFlights() {
    this.flightService.search(this.searchParams()).subscribe(
      data => this.flights.set(data)
    );
  }
}

💡 Copilot Tip:

@workspace Convert this AngularJS controller to a React functional component with hooks

Repeat for each component:

✅ FlightSearch
✅ HotelBooking
✅ Itinerary
✅ TravelRequest
✅ ExpenseReconciliation

🏪 STAGE 5: MIGRATE STATE MANAGEMENT (1-2 hours)

Objective: Replace $scope and $rootScope with modern state management.

Before (AngularJS):

// Using $rootScope for global auth state
$rootScope.$on('user:loggedIn', function(event, user) {
  $scope.currentUser = user;
});

$rootScope.$broadcast('user:loggedIn', userData);

After (React + Zustand):

// store/authStore.ts
import { create } from 'zustand';

export const useAuthStore = create((set) => ({
  currentUser: null,
  login: (user) => set({ currentUser: user }),
  logout: () => set({ currentUser: null }),
}));

// Use in components
const { currentUser, login } = useAuthStore();

After (Angular + NgRx):

// store/actions/auth.actions.ts
import { createAction, props } from '@ngrx/store';

export const loginSuccess = createAction(
  '[Auth] Login Success',
  props<{ user: User }>()
);

// Use in components
this.store.dispatch(loginSuccess({ user }));
this.currentUser$ = this.store.select(selectCurrentUser);

🧭 STAGE 6: MIGRATE ROUTING (1 hour)

Before (UI-Router):

// app.routes.js
$stateProvider
  .state('flights', {
    url: '/flights',
    templateUrl: 'components/flight-search/flight-search.template.html',
    controller: 'FlightSearchController'
  });

After (TanStack Router - React):

// router.tsx
import { createRoute } from '@tanstack/router';
import { FlightSearch } from '@/components/FlightSearch';

const flightsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/flights',
  component: FlightSearch,
});

After (Angular Router):

// app.routes.ts
import { Routes } from '@angular/router';
import { FlightSearchComponent } from './components/flight-search';

export const routes: Routes = [
  { path: 'flights', component: FlightSearchComponent },
];

🔌 STAGE 7: REPLACE DEPENDENCIES (1 hour)

Objective: Remove legacy libraries and use modern alternatives.

Replacements:

❌ jQuery → ✅ Native React/Angular (no DOM manipulation needed!)
❌ Moment.js → ✅ date-fns
❌ Lodash → ✅ Native ES6+ (map, filter, reduce, etc.)
❌ Restangular → ✅ TanStack Query + Axios (React) or HttpClient (Angular)

Example (date-fns):

// Before (Moment.js) - 67KB bundle
import moment from 'moment';
const formattedDate = moment(date).format('YYYY-MM-DD');

// After (date-fns) - 12KB bundle
import { format } from 'date-fns';
const formattedDate = format(date, 'yyyy-MM-dd');

🧪 STAGE 8: SET UP TESTING (1-2 hours)

React (Vitest + Testing Library):

// FlightSearch.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import { FlightSearch } from './FlightSearch';

test('searches for flights when form is submitted', async () => {
  render(<FlightSearch />);
  
  fireEvent.change(screen.getByLabelText('Origin'), { target: { value: 'JFK' } });
  fireEvent.change(screen.getByLabelText('Destination'), { target: { value: 'LAX' } });
  fireEvent.click(screen.getByText('Search'));
  
  expect(await screen.findByText('Flight Results')).toBeInTheDocument();
});

Angular (Jasmine + TestBed):

// flight-search.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FlightSearchComponent } from './flight-search.component';

describe('FlightSearchComponent', () => {
  let component: FlightSearchComponent;
  let fixture: ComponentFixture<FlightSearchComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [FlightSearchComponent]
    }).compileComponents();
    
    fixture = TestBed.createComponent(FlightSearchComponent);
    component = fixture.componentInstance;
  });

  it('should search for flights', () => {
    component.searchParams.set({ origin: 'JFK', destination: 'LAX' });
    component.searchFlights();
    expect(component.flights().length).toBeGreaterThan(0);
  });
});

🚀 STAGE 9: DEPLOY TO AZURE (30 min)

Azure Static Web Apps Deployment:

# Install Azure CLI
az login

# Create resource group
az group create --name rg-globaltravel --location eastus

# Create Static Web App
az staticwebapp create \
  --name globaltravel-portal \
  --resource-group rg-globaltravel \
  --source https://github.com/YOUR_USERNAME/globaltravel-portal-react \
  --location eastus \
  --branch main \
  --app-location "/" \
  --output-location "dist"

# GitHub Actions workflow is auto-generated!

💡 Copilot Tip:

@workspace Create a GitHub Actions workflow for building and deploying to Azure Static Web Apps

⏱️ ESTIMATED DURATION

Stage	Time	Difficulty
1️⃣ Run Legacy App	30 min	⭐ Easy
2️⃣ Analyze Scope	45 min	⭐⭐ Medium
3️⃣ Scaffold Project	30 min	⭐ Easy
4️⃣ Migrate Components	2-3 hours	⭐⭐⭐ Hard
5️⃣ State Management	1-2 hours	⭐⭐⭐ Hard
6️⃣ Routing	1 hour	⭐⭐ Medium
7️⃣ Replace Dependencies	1 hour	⭐⭐ Medium
8️⃣ Testing	1-2 hours	⭐⭐⭐ Hard
9️⃣ Deploy to Azure	30 min	⭐⭐ Medium
TOTAL	5-7 hours	⭐⭐⭐ Advanced

💡 Pro Tip: You can complete this lab over multiple sessions. Use the step branches to save your progress!

📚 RESOURCES

🔗 Official Documentation

React:

Angular:

Migration Guides:

🎥 Video Tutorials

📖 Recommended Reading

🎯 ACCEPTANCE CRITERIA

✅ Lab Completion Checklist

Legacy App:

AngularJS app runs successfully with Bower + Grunt
All 5 features work (flights, hotels, itinerary, travel requests, expenses)
Mock API serves data correctly

Modern App (React OR Angular):

TypeScript compiles with zero errors
All components migrated from AngularJS
State management implemented (Zustand/NgRx)
Routing works for all pages
No jQuery, Moment.js, Bower, or Grunt in dependencies
Build completes in <10 seconds (Vite/CLI)
All tests pass
App deploys to Azure Static Web Apps
Lighthouse score >90 for Performance

Code Quality:

TypeScript strict mode enabled
ESLint passes with zero warnings
No console.log statements in production
Proper error handling for API calls
Accessible (WCAG AA compliant)

🆘 TROUBLESHOOTING

Common Issues & Solutions

Problem: Bower install fails

# Solution: Use legacy peer deps
npm install -g bower --legacy-peer-deps

Problem: Grunt build is slow

# Solution: This is normal for Grunt! That's why we're migrating. ⏰
# Consider using --force flag if needed
grunt build --force

Problem: React app won't compile

# Solution: Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install
npm run dev

Problem: Angular CLI version mismatch

# Solution: Install Angular 17 globally
npm install -g @angular/cli@17
ng version

Problem: Azure deployment fails

# Solution: Check GitHub Actions logs
# Ensure output-location matches your build folder (dist/build)

🏆 ACHIEVEMENT UNLOCKED!

Upon completing this lab, you will have earned:

╔════════════════════════════════════════════════════════════╗
║                                                            ║
║            🏆 FRAMEWORK EVOLUTION MASTER 🏆                ║
║                                                            ║
║  ✨ You successfully time-traveled from 2010 to 2024!     ║
║                                                            ║
║  Skills Acquired:                                          ║
║    🧬 AngularJS → React/Angular Migration                 ║
║    ⬆️ Bower → npm Modernization                           ║
║    🏎️ Grunt → Vite/CLI Speedrun                          ║
║    🔓 JavaScript → TypeScript Mastery                     ║
║    🚀 Azure Static Web Apps Deployment                    ║
║                                                            ║
║  Badge: LEGACY DESTROYER 💥                               ║
║  Level: SENIOR MIGRATION ENGINEER 🎖️                     ║
║                                                            ║
╚════════════════════════════════════════════════════════════╝

📞 SUPPORT & COMMUNITY

Need Help?

💬 Join the discussion: GitHub Discussions
🐛 Report issues: GitHub Issues
📧 Contact the team: appmodlabs@microsoft.com

Share Your Success!

Tweet your completion with #AppModLabs #AngularJSMigration
Star the repo ⭐ if you found it helpful
Contribute improvements via Pull Requests

📄 LICENSE

MIT License - See LICENSE file for details.

🌟 READY TO BEGIN YOUR JOURNEY? 🌟

   _____ _______       _____ _______   __  ______  _    _ _____    __  __ _____ _____ _____ _____ _______ _____ ____  _   _ 
  / ____|__   __|/\   |  __ \__   __| |  \/  / \ | |  | |  __ \  |  \/  |_   _/ ____|  __ \_   _|__   __|_   _/ __ \| \ | |
 | (___    | |  /  \  | |__) | | |    | \  / |  \| |  | | |__) | | \  / | | || |  __| |__) || |    | |    | || |  | |  \| |
  \___ \   | | / /\ \ |  _  /  | |    | |\/| | . ` |  | |  _  /  | |\/| | | || | |_ |  _  / | |    | |    | || |  | | . ` |
  ____) |  | |/ ____ \| | \ \  | |    | |  | | |\  |  | | | \ \  | |  | |_| || |__| | | \ \_| |_   | |   _| || |__| | |\  |
 |_____/   |_/_/    \_\_|  \_\ |_|    |_|  |_|_| \_|  |_|_|  \_\ |_|  |_|_____\_____|_|  \_\_____|  |_|  |_____\____/|_| \_|

🎮 INSERT COIN TO CONTINUE 🎮

⬇️ CLONE THE REPO • 📖 READ THE FULL LAB • 🚀 START MIGRATING

_{Built with 💜 by the App Modernization Labs Team}
_{Powered by ☁️ Azure • Assisted by 🤖 GitHub Copilot}

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
api-mock		api-mock
app		app
assets		assets
bower_components		bower_components
test		test
.bowerrc		.bowerrc
.gitignore		.gitignore
APPMODLAB.MD		APPMODLAB.MD
Gruntfile.js		Gruntfile.js
README.md		README.md
bower.json		bower.json
package-lock.json		package-lock.json
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

🌆 ANGULARJS → REACT / ANGULAR 17 🌆

🎮 OVERVIEW

🌟 WHAT YOU'LL LEARN

🔮 CHOOSE YOUR PATH 🔀

🔷 PATH A: REACT 18 (Recommended for greenfield flexibility)

🔶 PATH B: ANGULAR 17 (Recommended for enterprise continuity)

⚡ PREREQUISITES

🚀 QUICK START

🕰️ STEP 1: EXPERIENCE THE PAST (Run the Legacy AngularJS App)

🎯 STEP 2: CHOOSE YOUR FRAMEWORK PATH

🧪 STEP 3: EXPLORE STEP-BY-STEP BRANCHES

📁 PROJECT STRUCTURE

🗂️ Legacy AngularJS App (legacy branch)

🆕 Modern React App (solution branch)

🅰️ Modern Angular App (solution-angular branch)

💾 LEGACY STACK (2010 Era)

The Old Guard 🗡️

Classic Anti-Patterns Present 🐛

🎯 TARGET ARCHITECTURE (2024 Modern)

The New Order 🚀

Architecture Transformation ✨

🎓 LAB WALKTHROUGH (Using GitHub Copilot CLI)

🤖 Powered by AI Pair Programming

📚 Step-by-Step Migration Journey

🎬 STAGE 1: RUN THE LEGACY APP (30 min)

🔍 STAGE 2: ANALYZE MIGRATION SCOPE (45 min)

🏗️ STAGE 3: SCAFFOLD MODERN PROJECT (30 min)

🧩 STAGE 4: MIGRATE COMPONENTS (2-3 hours)

🏪 STAGE 5: MIGRATE STATE MANAGEMENT (1-2 hours)

🧭 STAGE 6: MIGRATE ROUTING (1 hour)

🔌 STAGE 7: REPLACE DEPENDENCIES (1 hour)

🧪 STAGE 8: SET UP TESTING (1-2 hours)

🚀 STAGE 9: DEPLOY TO AZURE (30 min)

⏱️ ESTIMATED DURATION

📚 RESOURCES

🔗 Official Documentation

🎥 Video Tutorials

📖 Recommended Reading

🎯 ACCEPTANCE CRITERIA

✅ Lab Completion Checklist

🆘 TROUBLESHOOTING

Common Issues & Solutions

🏆 ACHIEVEMENT UNLOCKED!

📞 SUPPORT & COMMUNITY

📄 LICENSE

🌟 READY TO BEGIN YOUR JOURNEY? 🌟

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

🗂️ Legacy AngularJS App (`legacy` branch)

🆕 Modern React App (`solution` branch)

🅰️ Modern Angular App (`solution-angular` branch)

Packages