Client-side rendering

As explained in Modern Angular

Client-side rendering is the generation of a web application's user interface in the browser rather than on the server.

Client-side rendering (CSR) generates the interface in the browser. An Angular application is bundled into JavaScript, HTML, and CSS, then served through an index.html entry point. section 9.4.4

Deploying a CSR Angular application typically requires:

• Build the application into a dist folder containing the deployable bundle. section 9.4.4
• Copy the generated application folder to hosting that serves its files. section 9.4.4
• Configure the server to return index.html for unknown routes, allowing Angular to handle client-side routing instead of producing a 404. section 9.4.4

HRMS application deployment

An Angular HRMS application can be built into an hrms folder and deployed as static files. A direct request to /products first receives index.html; after JavaScript loads, Angular determines the route and displays the page. section 9.4.4

ng build

Use the build command to generate the deployable CSR bundle. section 9.4.4

Figure 9.6 Server + Angular handling a direct request to a particular route

Trace how the server and Angular cooperate when a user directly navigates to a client-side route. section 9.4.4

How Modern Angular covers it

How deep it goes

Explains bundling, static delivery, and route-fallback configuration, but defers hosting-provider-specific configuration.

Examples

Uses an Angular HRMS application, an /products route, a dist folder, and the index.html fallback.

What it assumes

Assumes an Angular application and basic server configuration, while explaining the required deployment artifacts and fallback behavior.

What you can do after

Operate deployment by building an Angular CSR application and configuring server fallback for direct routes.

How it connects

Connects Angular applications with single-page applications, client-side routing, static hosting, and server configuration.

liveBookmanning.com

Read Modern Angular on liveBook Get the book at manning.com

Related concepts

• server-side renderingcontrasts with · A web-rendering technique in which a server generates a user interface’s markup or other rendered representation before delivering it to a client.
• deploymentused by · Deployment is the process of making software, models, or other computational systems available to operate in a target environment.
• single-page applicationused by · A single-page application is a web application that loads a document and dynamically updates its content or interface without full-page navigation for most interactions.

This explainer was generated by Manning's knowledge graph from the text of Modern Angular. The section links point to the parts of the book it draws on.