diff --git a/README.md b/README.md index e00597c..c0dc948 100644 --- a/README.md +++ b/README.md @@ -94,24 +94,32 @@ import {join} from 'path'; import {AppModule} from '../src/app/app.module'; +import express = require('express'); + +import url = require('url'); + const dist = join(process.cwd(), 'dist'); const builder = new ApplicationBuilderFromModule(AppModule, join(dist, 'index.html')); const application = builder.build(); -app.get('*', - async (req, res) => { - try { - const snapshot = await application.renderUri(absoluteUri(req)); - res.send(snapshot.renderedDocument); - } - catch (exception) { // log this failure in a real application - res.send(builder.templateDocument()); // fall back on client-side rendering - } - }); +const http = express(); + +http.get(/.*/, async (request, response) => { + try { + const snapshot = await application.renderUri(absoluteUri(req)); + + response.send(snapshot.renderedDocument); + } + catch (exception) { + response.send(builder.templateDocument()); // fall back on client document + } +}); -export const absoluteUri = (request: express.Request): string => { +http.listen(process.env.PORT); + +const absoluteUri = (request: express.Request): string => { return url.format({ protocol: request.protocol, host: request.get('host'), @@ -313,7 +321,9 @@ export class LocaleTransition implements StateTransition { } } -const builder = new ApplicationBuilderFromModule(AppModule, join(process.cwd(), 'dist', 'index.html')); +type Variants = {locale: string}; + +const builder = new ApplicationBuilderFromModule(AppModule, join(process.cwd(), 'dist', 'index.html')); builder.variants({ locale: { @@ -328,22 +338,12 @@ builder.variants({ const application = builder.build(); -type ApplicationVariants = {locale: string}; - -// DocumentVariantStore is a variant-aware special-case of DocumentStore. When you -// query it, you must provide values for each variant key that we described in the -// call to variants() above. But in this application, there is only one key: locale. -// And again, if you do not want caching in your application or you want finer-grained -// control over it, just skip DocumentVariantStore and call application.renderUri, -// which will render a new document each time you call it, with no caching. -const documentStore = new DocumentVariantStore(application); - app.get('*', async (req, res) => { try { // Remember that we set locale in document.cookie, so all requests after the // first-ever application load will have a locale cookie that we can use to // decide whether to give the user an English or French pre-rendered page. - const snapshot = await documentStore.load(req.url, {locale: req.cookies.locale}); + const snapshot = await application.renderUri(absoluteUri(req), {locale: req.cookies.locale}); res.send(snapshot.renderedDocument); } diff --git a/examples/demand-express/.gitignore b/examples/demand-express/.gitignore index df84562..49d0d5a 100644 --- a/examples/demand-express/.gitignore +++ b/examples/demand-express/.gitignore @@ -1,4 +1,6 @@ dist dist-server +app/**/*.js +app/**/*.map node_modules yarn.lock diff --git a/examples/demand-express/server/index.ts b/examples/demand-express/server/index.ts index 1318191..1a46db7 100644 --- a/examples/demand-express/server/index.ts +++ b/examples/demand-express/server/index.ts @@ -4,13 +4,15 @@ import express = require('express'); import {enableProdMode} from '@angular/core'; -import {ApplicationBuilderFromModule, DocumentVariantStore} from 'angular-ssr'; +import {ApplicationBuilderFromModule} from 'angular-ssr'; import {AppModule} from '../app/app.module'; import {absoluteUri, configure, listen} from './http'; + +import {Variants, variants} from './variants'; + import {index} from './paths'; -import {variants, Variants} from './variants'; const http = express(); @@ -19,25 +21,22 @@ configure(http); enableProdMode(); const builder = new ApplicationBuilderFromModule(AppModule, index); + builder.variants(variants); const application = builder.build(); -// NOTE(cbond): It is important to note that this caching implementation is limited and -// probably not suitable for your application. It is a fixed-size LRU cache that only -// makes sense for applications whose content does not change over time. If the content -// of your application routes does change over time, consider writing your own cache -// on top of application.renderUri or just avoid caching altogether. -const documentStore = new DocumentVariantStore(application); - -http.get('*', (request, response) => { - documentStore.load(absoluteUri(request), {locale: request.cookies['locale'] || 'en-US'}) - .then(snapshot => { - response.send(snapshot.renderedDocument); - }) - .catch(exception => { - response.send(builder.templateDocument()); // fall back on client document - }); +http.get(/.*/, async (request, response) => { + try { + const options: Variants = {locale: request.cookies['locale'] || 'en-US'}; + + const snapshot = await application.renderUri(absoluteUri(request), options); + + response.send(snapshot.renderedDocument); + } + catch (exception) { + response.send(builder.templateDocument()); // fall back on client document + } }); listen(http).then(port => console.log(`Load http://localhost:${port}/blog/1 (or try other blog ID numbers to see demand loading)`));