Skip to content

📋 Angular app with Server Side Rendering working as a Progressive Web App. Deployed to Netlify.

License

Notifications You must be signed in to change notification settings

AndrewJBateman/angular-pwa-ssr

Repository files navigation

⚡ Angular PWA SSR

  • Angular used to display data from an API with Server Side Rendering as a Progressive Web App.Deployed to Netlify.
  • Note: to open web links in a new window use: ctrl+click on link

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 General info

  • User can enter a post code to search for all commercial enterprises around the RATP station in that post code

  • Data comes from the RATP API

  • Using Angular Server Side Rendering (ngUniversal) and Service Workers for a Progressive Web App

  • Includes Transloco i18n translation json files so user can switch languages from nav buttons

  • Deployed from Github so each Commit causes an auto-deploy in Netlify. Netlify performs the build process.

  • Important note: I had to specify Node version in Netlify in site-name/settings/deploys/Environment/Environment variables/ key - value NODE_VERSION - 16.13.2 or deploy would fail - see image below

📷 Screenshots

Frontend screenshot Frontend screenshot Frontend screenshot Frontend screenshot

📶 Technologies

💾 Setup

  • Install dependencies using npm i
  • Run npm outdated to see if any dependencies are outdated.
  • Run ng serve for a non-SSR dev server. Frontend will open at http://localhost:4200/ - refreshes on code changes
  • Run npm run dev:ssr for an SSR dev server.
  • Run npm run build to generate a build file without SSR
  • Run npm run build:ssr to generate a build file with SSR. Add defer to browser CSS file ref.
  • Run npm run serve:ssr to see on a dev server http://localhost:4000
  • Run npm run prerender to prerender SSR app

🔧 Testing

  • Run ng test to run Jasmine unit tests via Karma - passes 2/6 tests

💻 Code Examples

  • function to serve browser content using SSR - code from ngUniversal
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/angular-pwa-ssr/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  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

  • Dummy Robots.txt & sitemap.xml documents added to improve Lighthouse score
  • Lighthouse scores: 97 - 99%

📋 Status, Testing & To-Do List

  • Status: Working PWR & SSR app deployed to Netlify. Lighthouse score > 97% for all pages
  • Testing: 6/6 tests pass
  • To-Do: Add tests, add eslint

👏 Inspiration/General Tools

📁 License

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

✉️ Contact

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