Skip to content

Commit

Permalink
feat(demo): use SSR and SSG for demo
Browse files Browse the repository at this point in the history
  • Loading branch information
jnizet committed Nov 15, 2023
1 parent d4032a2 commit 8581814
Show file tree
Hide file tree
Showing 13 changed files with 145 additions and 13 deletions.
7 changes: 6 additions & 1 deletion angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,12 @@
"scripts": [],
"allowedCommonJsDependencies": [
"prismjs"
]
],
"server": "projects/demo/src/main.server.ts",
"prerender": true,
"ssr": {
"entry": "projects/demo/server.ts"
}
},
"configurations": {
"production": {
Expand Down
5 changes: 5 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,13 @@
"@angular/material": "17.0.0",
"@angular/platform-browser": "17.0.2",
"@angular/platform-browser-dynamic": "17.0.2",
"@angular/platform-server": "17.0.2",
"@angular/router": "17.0.2",
"@angular/ssr": "17.0.0",
"@ng-bootstrap/ng-bootstrap": "15.1.2",
"@popperjs/core": "2.11.8",
"bootstrap": "5.3.2",
"express": "4.18.2",
"font-awesome": "4.7.0",
"prismjs": "1.29.0",
"rxjs": "7.8.1",
Expand All @@ -47,7 +50,9 @@
"@angular/compiler-cli": "17.0.2",
"@angular/localize": "17.0.2",
"@compodoc/compodoc": "1.1.22",
"@types/express": "4.17.17",
"@types/jasmine": "5.1.2",
"@types/node": "18.18.0",
"@types/prismjs": "1.26.3",
"@typescript-eslint/eslint-plugin": "6.11.0",
"@typescript-eslint/parser": "6.11.0",
Expand Down
59 changes: 59 additions & 0 deletions projects/demo/server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
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';

// 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');

const commonEngine = new CommonEngine();

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();
9 changes: 9 additions & 0 deletions projects/demo/src/app/app.config.server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';

const serverConfig: ApplicationConfig = {
providers: [provideServerRendering()]
};

export const config = mergeApplicationConfig(appConfig, serverConfig);
10 changes: 10 additions & 0 deletions projects/demo/src/app/app.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { provideRouter } from '@angular/router';
import { ROUTES } from './app.routes';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { provideClientHydration } from '@angular/platform-browser';
import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

export const appConfig: ApplicationConfig = {
providers: [provideRouter(ROUTES), provideAnimationsAsync(), provideHttpClient(withFetch()), provideClientHydration()]
};
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { SnippetComponent } from '../../snippet/snippet.component';
imports: [SnippetComponent, RouterLink]
})
export class BootstrapComponent {
cssSnippet = 'bootstrap.css.snippet.css';
cssSnippet = 'bootstrap.css.snippet.css-like';
appSnippet = 'bootstrap.app.snippet.ts-like';
formSnippet = 'bootstrap.snippet.html';
}
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export class MaterialComponent {

snippet = 'material.snippet.html';
appSnippet = 'material.app.snippet.ts-like';
cssSnippet = 'material.css.snippet.css';
cssSnippet = 'material.css.snippet.css-like';

constructor(config: ValdemortConfig, fb: FormBuilder) {
config.displayMode = DisplayMode.ONE;
Expand Down
7 changes: 7 additions & 0 deletions projects/demo/src/main.server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { config } from './app/app.config.server';

const bootstrap = () => bootstrapApplication(AppComponent, config);

export default bootstrap;
9 changes: 2 additions & 7 deletions projects/demo/src/main.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { ROUTES } from './app/app.routes';
import { provideRouter, withHashLocation } from '@angular/router';
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, {
providers: [provideRouter(ROUTES, withHashLocation()), provideAnimations(), provideHttpClient()]
}).catch(err => console.error(err));
bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));
10 changes: 8 additions & 2 deletions projects/demo/tsconfig.app.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,15 @@
"compilerOptions": {
"strictNullChecks": true,
"outDir": "../../out-tsc/app",
"types": ["node"]
"types": [
"node"
]
},
"files": ["src/main.ts"],
"files": [
"src/main.ts",
"src/main.server.ts",
"server.ts"
],
"angularCompilerOptions": {
"strictTemplates": true
}
Expand Down
38 changes: 37 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -362,13 +362,29 @@
dependencies:
tslib "^2.3.0"

"@angular/platform-server@17.0.2":
version "17.0.2"
resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-17.0.2.tgz#1055867181b84ab3e6119a3587f90dff4b4dbb92"
integrity sha512-+1uCnAw7Ql2r4BDnfaRvQrXI1H5qUB/1f8CwCjaVoIn7kLJs/ps4I0WbOVtujJ2VPnxIggfVtenXRRMlungZlg==
dependencies:
tslib "^2.3.0"
xhr2 "^0.2.0"

"@angular/router@17.0.2":
version "17.0.2"
resolved "https://registry.yarnpkg.com/@angular/router/-/router-17.0.2.tgz#f4a743087b7ca62a7b36c0a00285f69f783ea3ac"
integrity sha512-A1Ulv4qBAtJyK5g1yBlK1qZHe+KaaL5vMPAaPWUxICH8lHEodDkJlbYAUI2e4VL2BN7zBmdOep6tlBKPmHY3mw==
dependencies:
tslib "^2.3.0"

"@angular/ssr@17.0.0":
version "17.0.0"
resolved "https://registry.yarnpkg.com/@angular/ssr/-/ssr-17.0.0.tgz#99694e9a602ab87e64415b8bbf35597551140d31"
integrity sha512-yctZuIR9AA9aaAQe6JzBNbBoRUy37449tYYpwdxmI1Fp5rsrzrlJ1HeFidrmca4k3RWXw3VZNpklPWStlZBm2Q==
dependencies:
critters "0.0.20"
tslib "^2.3.0"

"@assemblyscript/loader@^0.10.1":
version "0.10.1"
resolved "https://registry.yarnpkg.com/@assemblyscript/loader/-/loader-0.10.1.tgz#70e45678f06c72fa2e350e8553ec4a4d72b92e06"
Expand Down Expand Up @@ -3105,6 +3121,16 @@
"@types/qs" "*"
"@types/serve-static" "*"

"@types/express@4.17.17":
version "4.17.17"
resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.17.tgz#01d5437f6ef9cfa8668e616e13c2f2ac9a491ae4"
integrity sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q==
dependencies:
"@types/body-parser" "*"
"@types/express-serve-static-core" "^4.17.33"
"@types/qs" "*"
"@types/serve-static" "*"

"@types/http-errors@*":
version "2.0.4"
resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.4.tgz#7eb47726c391b7345a6ec35ad7f4de469cf5ba4f"
Expand Down Expand Up @@ -3156,6 +3182,11 @@
dependencies:
undici-types "~5.26.4"

"@types/node@18.18.0":
version "18.18.0"
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.0.tgz#bd19d5133a6e5e2d0152ec079ac27c120e7f1763"
integrity sha512-3xA4X31gHT1F1l38ATDIL9GpRLdwVhnEFC8Uikv5ZLlXATwrCYyPq7ZWHxzxc3J/30SUiwiYT+bQe0/XvKlWbw==

"@types/normalize-package-data@^2.4.0":
version "2.4.4"
resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz#56e2cc26c397c038fab0e3a917a12d5c5909e901"
Expand Down Expand Up @@ -5800,7 +5831,7 @@ exponential-backoff@^3.1.1:
resolved "https://registry.yarnpkg.com/exponential-backoff/-/exponential-backoff-3.1.1.tgz#64ac7526fe341ab18a39016cd22c787d01e00bf6"
integrity sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==

express@^4.17.3:
express@4.18.2, express@^4.17.3:
version "4.18.2"
resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59"
integrity sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==
Expand Down Expand Up @@ -10735,6 +10766,11 @@ ws@~8.11.0:
resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==

xhr2@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/xhr2/-/xhr2-0.2.1.tgz#4e73adc4f9cfec9cbd2157f73efdce3a5f108a93"
integrity sha512-sID0rrVCqkVNUn8t6xuv9+6FViXjUVXq8H5rWOH2rz9fDNQEd4g0EA2XlcEdJXRz5BMEn4O1pJFdT+z4YHhoWw==

xmldoc@^1.1.2:
version "1.3.0"
resolved "https://registry.yarnpkg.com/xmldoc/-/xmldoc-1.3.0.tgz#7823225b096c74036347c9ec5924d06b6a3cebab"
Expand Down

0 comments on commit 8581814

Please sign in to comment.