Skip to content

Commit

Permalink
refactor(movies): migrate to use application builder SSR features
Browse files Browse the repository at this point in the history
  • Loading branch information
eneajaho committed Nov 13, 2023
1 parent c1f9c61 commit 1a609d9
Show file tree
Hide file tree
Showing 42 changed files with 293 additions and 949 deletions.
93 changes: 36 additions & 57 deletions package-lock.json

Large diffs are not rendered by default.

23 changes: 1 addition & 22 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@
"@angular/platform-browser-dynamic": "17.0.2",
"@angular/platform-server": "17.0.2",
"@angular/router": "17.0.2",
"@angular/ssr": "17.0.0",
"@angular/service-worker": "17.0.2",
"@push-based/ngx-fast-svg": "^0.5.0",
"@rx-angular/cdk": "^16.0.0",
"@rx-angular/eslint-plugin": "^1.0.0",
"@rx-angular/state": "^16.3.0",
"@rx-angular/template": "^16.1.1",
"@typescript-eslint/eslint-plugin": "^6.10.0",
"core-js": "^2.6.12",
"express": "^4.18.2",
"firebase-functions": "^4.4.0",
"rxjs": "^7.8.1",
Expand All @@ -60,9 +60,6 @@
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
"@miniflare/tre": "^3.0.0-next.13",
"@nguniversal/builders": "^16.2.0",
"@nguniversal/common": "^16.2.0",
"@nguniversal/express-engine": "^16.2.0",
"@nx/angular": "17.1.1",
"@nx/devkit": "17.1.1",
"@nx/esbuild": "17.1.1",
Expand Down Expand Up @@ -146,24 +143,6 @@
"@nguniversal/common": "^17.0.0",
"@angular-devkit/build-angular": "^17.0.0,"
},
"@nguniversal/builders": {
"@angular-eslint/schematics": "^17.0.0",
"@angular/core": "^17.0.0",
"@angular/common": "^17.0.0",
"@angular-devkit/build-angular": "^17.0.0"
},
"@nguniversal/common": {
"@angular-eslint/schematics": "^17.0.0",
"@angular/core": "^17.0.0",
"@angular/common": "^17.0.0",
"@angular-devkit/build-angular": "^17.0.0"
},
"@nguniversal/express-engine": {
"@angular-eslint/schematics": "^17.0.0",
"@angular/core": "^17.0.0",
"@angular/common": "^17.0.0",
"@angular-devkit/build-angular": "^17.0.0"
},
"@push-based/user-flow-nx-plugin": {
"@nx/devkit@": "^17.0.2"
}
Expand Down
1 change: 0 additions & 1 deletion projects/firebase-function/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "projects/firebase-function/src",
"projectType": "application",
"implicitDependencies": ["ng-universal-express"],
"targets": {
"build": {
"executor": "@nx/webpack:webpack",
Expand Down
File renamed without changes.
30 changes: 19 additions & 11 deletions projects/movies/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,12 @@
"name": "movies",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"generators": {
"@schematics/angular:component": {
"style": "scss",
"changeDetection": "OnPush"
},
"@schematics/angular:application": {
"strict": true
}
},
"sourceRoot": "projects/movies/src",
"targets": {
"build": {
"executor": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/projects/movies/browser",
"outputPath": "dist/projects/movies",
"index": "projects/movies/src/index.html",
"browser": "projects/movies/src/main.ts",
"tsConfig": "projects/movies/tsconfig.app.json",
Expand All @@ -30,7 +21,14 @@
"projects/movies/src/_routes.json"
],
"styles": ["projects/movies/src/styles.scss"],
"scripts": []
"scripts": [],
"server": "projects/movies/src/main.server.ts",
"prerender": {
"routesFile": "projects/movies/prerender-routes.txt"
},
"ssr": {
"entry": "projects/movies/server.ts"
}
},
"configurations": {
"development": {
Expand All @@ -51,6 +49,7 @@
},
"production": {
"serviceWorker": "projects/movies/src/ngsw-config.json",
"outputHashing": "all",
"fileReplacements": [
{
"replace": "projects/movies/src/environments/environment.ts",
Expand Down Expand Up @@ -190,5 +189,14 @@
"defaultConfiguration": "production"
}
},
"generators": {
"@schematics/angular:component": {
"style": "scss",
"changeDetection": "OnPush"
},
"@schematics/angular:application": {
"strict": true
}
},
"tags": ["scope:client", "type:app"]
}
69 changes: 69 additions & 0 deletions projects/movies/server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'node:path';
import bootstrap from './src/main.server';

import compressionModule from 'compression';
import serverTiming from 'server-timing';

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(serverDistFolder, 'index.server.html');

// **🚀 Perf Tip:**
// Serve gzip for faster load
server.use(compressionModule());
server.use(serverTiming());

const commonEngine = new CommonEngine({
enablePerformanceProfiler: true,
});

server.set('view engine', 'html');
server.set('views', browserDistFolder);

// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get(
'*.*',
express.static(browserDistFolder, {
maxAge: '1y',
})
);

// All regular routes use the Angular engine
server.get('*', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;

commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: browserDistFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})
.then((html) => res.send(html))
.catch((err) => next(err));
});

return server;
}

function run(): void {
const port = process.env['PORT'] || 4000;

// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}

run();
46 changes: 0 additions & 46 deletions projects/movies/src/app/app.base.config.ts

This file was deleted.

35 changes: 0 additions & 35 deletions projects/movies/src/app/app.component.standalone.ts

This file was deleted.

7 changes: 6 additions & 1 deletion projects/movies/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { ZonelessRouting } from './shared/zone-less/zone-less-routing.service';
import { AppShellComponent } from './app-shell/app-shell.component';
import { RouterOutlet } from '@angular/router';
import { RxLet } from '@rx-angular/template/let';

@Component({
selector: 'app-root',
template: `
<app-shell *rxLet="[]">
<router-outlet></router-outlet>
<router-outlet />
</app-shell>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [AppShellComponent, RouterOutlet, RxLet],
})
export class AppComponent {
/**
Expand Down
35 changes: 35 additions & 0 deletions projects/movies/src/app/app.config.server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';
import { RX_RENDER_STRATEGIES_CONFIG } from '@rx-angular/cdk/render-strategies';
import { provideFastSVG } from '@push-based/ngx-fast-svg';
import { IconLoadStrategySsr } from './shared/ssr/icon-load.ssr.strategy';

const serverConfig: ApplicationConfig = {
providers: [
provideServerRendering(),

// provideHttpClient(
// withInterceptors([
// requestTimingInterceptor((_request) => {
// return _request.urlWithParams.replace(
// 'https://api.themoviedb.org/3',
// 'api'
// );
// }),
// ])
// ),

provideFastSVG({
url: (name: string) => `${name}.svg`,
svgLoadStrategy: IconLoadStrategySsr,
}),

{
provide: RX_RENDER_STRATEGIES_CONFIG,
useValue: { primaryStrategy: 'native' },
},
],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);
Loading

0 comments on commit 1a609d9

Please sign in to comment.