- Angular app deployed to Firebase functions with Server Side Rendering.
- Progressive Web App
- Optimised for an excellent Lighthouse score
- Note: to open web links in a new window use: ctrl+click on link
- Firebase functions used to serve Node.js SSR app
- Dist folder contains functions folder with browser and server SSR code.
- Functions folder contains a copy of dependencies from the src package.json file
- App contains Angular Material card to see effect on rendering speed.
- Roboto font style: Regular 400 used
- Angular v16
- Angular Universal v16 added for Server Side Rendering (SSR)
- Angular Material v16 Material Design components
- Firebase Functions serverless framework to automatically run SSR node.js server app
- Firebase Emulator tools to test Cloud Functions
- RxJS v7 - not used as yet
- Express v4 Node.js framework
-
Create project in Firebase console then add functions. This can all be done from firebase init in VS COde
-
npm ito install dependencies -
npm pruneto remove unused npm modules -
ng servefor a dev server. Navigate tohttp://localhost:4200/. The app will automatically reload if you change any of the source files. -
ng updateto update Angular -
Run
npm run dev:ssrto see SSR app on a dev server -
Run
npm run build:ssrto build SSR project. The browser & server build folders will be stored in thedist/functionsdirectory. -
cd dist/functionsthen runfirebase emulators:startfor Firebase emulator -
From
/dist/functionsrunnpm run deployto deploy app to firebase functions & hosting
server.tsExpress app exported so that it can be used by serverless Functions.
// export function app(): express.Express { const server = express(); const websiteFileLocation = environment.production ? 'browser' : 'dist/functions/browser'; const distFolder = join(process.cwd(), websiteFileLocation); const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index'; // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine) server.engine( 'html', ngExpressEngine({ bootstrap: AppServerModule, }) ); server.set('view engine', 'html'); server.set('views', distFolder); server.get( '*.*', express.static(distFolder, { maxAge: '1y', }) ); server.get('*', (req, res) => { res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }], }); }); return server; }- Excellent Lighthouse score
- Status: Working SSR & PWA. Deployed to Firebase Functions
- To-Do: Use to create an actual app with content. Update sitemap & robots.txt
- Codeible: Server Side Rendering with Angular, Angular Universal, & Firebase 2021
- Dev.to: Loading Google Fonts and any other web fonts as fast as possible in early 2021
- MDN: Link types: preload
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email:
gomezbateman@yahoo.com
