Angular Material SSR

• 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

📄 Table of contents

• Angular Material SSR
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• 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

📷 Screenshots

📶 Technologies

• 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

💾 Setup

• Create project in Firebase console then add functions. This can all be done from firebase init in VS COde

• npm i to install dependencies

• npm prune to remove unused npm modules

• ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

• ng update to update Angular

• Run npm run dev:ssr to see SSR app on a dev server

• Run npm run build:ssr to build SSR project. The browser & server build folders will be stored in the dist/functions directory.

• cd dist/functions then run firebase emulators:start for Firebase emulator

• From /dist/functions run npm run deploy to deploy app to firebase functions & hosting

💻 Code Examples

• server.ts Express 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;
}

🆒 Features

• Excellent Lighthouse score

📋 Status & To-Do List

• Status: Working SSR & PWA. Deployed to Firebase Functions
• To-Do: Use to create an actual app with content. Update sitemap & robots.txt

👏 Inspiration

• 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

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com