Node.js with Frontend Frameworks

This approach offers several advantages:

Unified Language:

Use JavaScript/TypeScript across the entire stack

Code Sharing:

Developer Experience:

Consistent tooling and package management with npm/yarn

Performance:

Ecosystem:

Common Integration Patterns

1. API - First Architecture

// Example API endpoint app.get('/api/products', (req, res) => {
res.json([{ id: 1, name: 'Product' }]);
});

2. Server - Side Rendering (SSR)

// Next.js page export async function getServerSideProps() {
const res = await fetch('https://api.example.com/data');
return { props: { data: await res.json() } };
}

3. Micro - Frontends

// Module Federation in webpack.config.js new ModuleFederationPlugin({
name: 'app1', filename: 'remoteEntry.js', exposes: { './Component': './src/Component' }
})

Component-Based Architecture:

Virtual DOM:

Efficient updates and rendering

Rich Ecosystem:

Large community and extensive package ecosystem

Developer Tools:

Excellent debugging and development tools

npx create - react - app my - app cd my - app npm start

2. Set Up Node.js Backend mkdir backend cd backend npm init - y npm install express cors

const express = require('express');
const cors = require('cors');
const app = express();
// Enable CORS for React frontend app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello from Node!' });
});
app.listen(8080, () => {
console.log('Server running on port 8080');
});
// React frontend component import { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('http://localhost:8080/api/data').then(res => res.json()).then(data => {
setData(data);
setLoading(false);
});
}, []);
return (

{loading ? 'Loading...' : data.message}

);
}

Angular is a comprehensive platform and framework for building scalable single - page applications using TypeScript.

TypeScript Support:

Dependency Injection:

Built-in DI system for better component organization

Modular Architecture:

RxJS Integration:

Powerful reactive programming with Observables

Angular CLI:

Command - line interface for project generation and build tools

npm install - g @angular/cli

2. Create New Angular Project ng new angular - nodejs - app cd angular - nodejs - app