Platform Deployment Steps

Platform Components

The platform has two primary components: WordPress and Next.js. WordPress is used for layout and content while Next.js serves up the content in a React.js single page application.

WordPress

1. WordPress instance - WordPress contains HTML contents that have been laid out in the Block Editor using custom blocks developed for digital.gov.bc.ca specific look and feel.

2. Custom WordPress plugin - the plugin contains custom blocks for the use in the block editor as well as other features in the following files:

   1. ./editor.js - this setups up the “Preview on digital.gov.bc.ca” button in the block editor for previewing the contents on digital.gov.bc.ca

   2. ./custom.php - this file performs a number of functions:

      1. Enqueues JavaScript files for the editor (jQuery - for setting up “Preview on digital.gov.bc.ca” button, editor.js, block_extensions.js)

      2. Creates custom roles for workflow management within WordPress

      3. Creates custom capabilities and adds those capabilities to custom roles

      4. Filters the list of blocks that appears in the block editor - this is done to restrict the degrees of freedom available to the content editors - to a few core blocks and custom blocks developed for digital.gov.bc.ca

      5. Sets up custom post types

      6. Sets up default templates for post types

   3. assets/block_extensions.js - this file contains extensions to core WordPress blocks:

      1. Sets up an ability to add aria-label to core/list block

      2. Adds custom style for the post title block to be styled in accordance with styling needs for digital.gov.bc.ca

3. Custom WordPress theme - the theme performs these functions:

   1. ./functions.php:

      1. Includes CSS file to display blocks correctly inside the editor. Similar CSS is mirrored on the front end as well.

      2. Removes support for default WordPress patterns - to restrict degrees of freedom available to content editors in an effort to keep look-and-feel consistent with design guidelines

   2. ./style.css - CSS to display blocks in a way that’s consistent with digital.gov.bc.ca in the block editor

The code for both custom WordPress theme and plugin are hosted on GitHub here: https://github.com/bcgov/wordpress-digimod

WordPress Deployment

Next.JS

Next.JS is responsible for fetching the content from WordPress through the API, parsing the WordPress HTML into React components and serving resulting HTML to the client. On the client, React.js is responsible for re-hydrating any React components for interactive functionality. If the user disables JavaScript, the site is expected to run a standard website instead of a Single Page Application (SPA). Interactive elements, such as accordions should either work through CSS toggles or be accessible without interactive (for example leaving accordions expanded, or rendered differently).

Next.JS application is hosted on GitHub here: https://github.com/bcgov/nextjs-digimod

Next.JS Deployment

To deploy Next.JS application to OpenShift run following commands:

1. oc apply -f image-stream.yaml

2. oc apply -f .\build-config.yaml

3. Start the build manually from the build config through the OpenShift web interface.

4. Navigate to the Developer Topology view and select the Add Page link. From the Add page, select Container images. From the Deploy image page that pops up, select Image stream tag from internal registry, and then ubi8-nextjs for the Image Stream and latest for the Tag. Scroll down and set the Target port to match the value in our Dockerfile, which is 3000. Accept the rest of the default values and select Create.