Code explanation - Sophievanderburg/ilojo-bar Wiki


We use Prismic as a headless CMS. A headless CMS is a content management system (CMS), only used for back-end purposes, built from the ground up to make content accessible and maintainable. Prismic is supported for lots of frameworks as Next.js & Vue.js, but is also be used with an express server or even just vanilla javascript. In our case, we use it in combination with an express server.

We use Prismic to retrieve the stories and images from. The images are linked to the stories. This is the structure of all the stories:

For more information how to use Prismic click here

Activity diagram

Service worker

The service worker checks whether the user has an internet connection. When a request is made, the service worker stores the 'CORE_ASSETS' in the browser's cache memory 'v3'. The CORE_ASSETS contains the offline page and the styling file. This allows the service worker to still show the offline page with associated styling when there is no internet connection.

If there is internet connection, the service worker caches the rendered content in 'html cache'. If the user later returns to de SPA without internet, he can see still the pages he has already visited.

NPM Body-parser

Body-parser is a middleware to parse the body of an incoming request. It parses the body into JSON so I can use the data more easily. That data is now available under the ‘req.body’ property. It returns an object with the data. This can be sent to Nodemailer.

NPM Nodemailer

To use Nodemailer you need a view things in your code:

  • A specific app-password for google account. Nodemailer cannot log in with the password you use to log in on your google account. You must create one for it in settings.
  • A transporter: in this variable you tell Nodemailer what service you are working with.
  • Info: a variable where you tell Nodemailer how the email has to be set up.
  • Function to send an email with the info you have declared before.

NPM Multer

Multer is a middleware for handling the enctype ‘multipart/form- data’. The uploaded files are stored in the ‘req.files’ property.