Categories
app dev

Gatsby & Carbon: Build with Github Action

As some of you know, I work on the IBM FHIR Server and with my colleagues, I have started automating some of the actions we take – Build, Test, Deploy, Deploy our website.

More specific to the “Deploy our website” automation, our website uses technologies, such as Gatsby, Carbon, Gatsby Carbon Theme. Fundamentally, a static site generation technology, like Jekyll, Gatsby uses Node, Yarn and some nice React code.

To build our site with GitHub actions, I built out a site workflow.  The key elements to this workflow are:

  • Triggers
  • Node.js and Ubuntu Images
  • Build
  • Add, Commit and Push to GH Pages
  • Debugging and Replicating Locally

Triggers

For the Triggers, I recommend limiting the site generation to master branches.  The master branch filter and on push, limits the re-deployment, also keep your site building on on docs/** changes.

on:
push:
paths:
– “docs/**”
branches:
– master
 
There is a subtlety the websites are cached for 10 minutes, confirmed on the site – Caching assets in website served from GitHub pages

Node.js and Ubuntu Images

I opted to use Ubuntu with Node.js
 
jobs:
build:
runs-on: ubuntu-latest

strategy:
matrix:
node-version: [12.x]
 
The important thing is ubuntu-latest which has some incompatibility with Gatsby Carbon’s build. 

Build

I build the system as follows:

Checkout the repo to a folder

steps:
-name: Grab the Master Branch
uses: actions/checkout@v1
with:
working-directory: fhir
ref: refs/heads/master
fetch-depth: 1
path: fhir
 
Activate Node
name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
 
Setup the build
 
echo “Check on Path”
pwd
cd docs/
npm install -g gatsby-cli
gatsby telemetry –disable
 
Install the packages, note, fsevents is not used on linux images, so use–no-optional (these plugins are suspect).
 
npm install –no-optional –save react react-copy-to-clipboard react-dom react-ga classnames carbon @carbon/addons-website carbon-components carbon-components-react carbon-addons-cloud carbon-icons gatsby gatsby-theme-carbon-starter markdown-it gatsby-plugin-manifest gatsby-plugin-slug gatsby-plugin-sitemap gatsby-plugin-sharp
 
With ubuntu, you can’t use gatsby build directly per https://github.com/gatsbyjs/gatsby/issues/17557, 
so I use the suggestion as a workaround due to path/issues in the gatsby component dependency of fsevents.
 
npm –prefix-paths run build
cp -R public/ ../../public/
 
Grab the GH-Pages branch
 
– name: Grab the GH Pages Branch
uses: actions/checkout@v1
with:
working-directory: gh-pages
ref: refs/heads/gh-pages
fetch-depth: 1
path: docs
token: ${{ secrets.GITHUB_TOKEN }}

Per Bypassing Jekyll on GitHub Pages, be sure to add the .nojekll to the root of the gh-pages. I added a guard in the shell script to check if the file is there, and create the file if it does not exist.

If you need Environment variables, you should add the environment variables to the step.

Add, Commit and Push to GH Pages

I add the gitignore and nojekll files while removing any cached files, before moving in the new files.

I also like to make sure when this runs there is a build.txt file to trace when the site is built. (This file contains the build time Thu Nov 21 19:39:49 UTC 2019

I then use the github environment variables passed in to push the contents to the repo the branch is from. 

-name: Commit and Add GH Pages

run: |

echo "cleaning up the prior files on the branch"

if [ ! -f .nojekyll ]

then

touch .nojekyll

rm -f _config.yml

fi

rm -f *.js webpack.stats.json styles-*.js styles-*.js.map webpack-runtime-*.js.map webpack-runtime-*.js manifest.webmanifest component---*.js* app-*.js*

rm -rf docs/node_modules docs/public docs/.cache

echo "Moving the files around for gh-pages"

cp -Rf ../public/* ./

find .

date > build.txt

git config --global user.email "${{ secrets.GITHUB_ACTOR }}@users.noreply.github.com"

git config --global user.name "Git Hub Site Automation"

git add .

git commit -m "Update to GH-Pages"

- name: Push changes to GH Pages

run: |

echo "Push Changes"

git branch

remote_repo="https://${GITHUB_ACTOR}:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git"

git push "${remote_repo}" HEAD:gh-pages

env:

GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

GITHUB_REPOSITORY: ${{ secrets.GITHUB_REPOSITORY }}

GITHUB_ACTOR: ${{ secrets.GITHUB_ACTOR }}

CI: true

Debugging and Replicating Locally

If you are troubleshooting, you can use a couple of approaches: 

1 – Create a Docker Image

Create the Image

docker run -itd –name gatsby-node -v docs:/data node:latest

Copy the Files

docker cp ~/FHIR/docs 6d810efb3b586739932166d424641003ee9b238de506543fcdd47eb7e7d41699:/data

Launch the shell and try the build

npm install –no-optional –save react react-copy-to-clipboard react-dom react-ga classnames carbon @carbon/addons-website carbon-components carbon-components-react carbon-addons-cloud carbon-icons gatsby gatsby-theme-carbon-starter markdown-it gatsby-plugin-manifest gatsby-plugin-slug gatsby-plugin-sitemap gatsby-plugin-sharp

Run the gatsby build

npm –prefix-paths run build

2. If you want complicated navigation, refer to https://github.com/gatsbyjs/gatsby/blob/master/www/src/data/sidebars/doc-links.yaml however… gatsby-carbon-theme’s sidebar links only uses the to value not the href value.

3.  If you have an issue with your deployment check a couple of things:

Check your Deployed Environment. You should see a deployment in the last few seconds.

Check your Settings You should see no issues, else investigate the site locally on the gh-pages branch, and check Troubleshooting Jekyll build errors for GitHub Pages sites

Best of luck with your build!

Categories
app dev

Application Development Notes: Tips and Tricks

LC_ALL

Exception = javax.resource.spi.ResourceAllocationException
Source = com.ibm.ws.rsadapter.jdbc.WSJdbcDataSource.getConnection
probeid = 299
Stack Dump = javax.resource.spi.ResourceAllocationExceptionDSRA8100E: Unable to get a XAConnection from the DataSource. with SQL State : XJ041 SQL Code : 40000
    at com.ibm.ejs.j2c.FreePool.createManagedConnectionWithMCWrapper(FreePool.java:1578)

LC_ALL is the way to fix.

Before executing the Java application.

export LC_ALL=en_US.UTF-8

https://stackoverflow.com/a/9894836/1873438
http://db.apache.org/derby/docs/10.5/tools/ctools1004764.html#ctools1004764__rtoolsijtools91283
https://stackoverflow.com/questions/55673886/what-is-the-difference-between-c-utf-8-and-en-us-utf-8-locales

Multi-module Javadocs where Search doesn’t resolve the context properly

<additionalJOption>--no-module-directories</additionalJOption>
or
<additionalOption>--no-module-directories</additionalOption>

Search will generate which avoid the <undefined>, and use the root folder.

https://stackoverflow.com/questions/52326318/maven-javadoc-search-redirects-to-undefined-url

Gatsby with the Carbon Theme

The IBM project I work on uses Carbon Theme with Gatsby to generate our HTML pages. The Carbon Design system has a nice git repository at GIT: gatsby-theme-carbon. I recommend cloning these repository.  The repository has an example and a place to figure out where and how to Shadow a feature – “provide their own components for the theme to use over the defaults”.

A couple of plugins I recommend are:
gatsby-plugin-slug – https://www.gatsbyjs.org/packages/gatsby-plugin-slug/ resolves inter-page links
gatsby-plugin-manifesthttps://www.gatsbyjs.org/packages/gatsby-plugin-manifest/?=gatsby-plugin-manifest favicon, general theme details, metadata, supports mdx and md formatted files.
gatsby-plugin-sitemap – https://www.gatsbyjs.org/packages/gatsby-plugin-sitemap/ makes the site searchable

To update the components, use

– Navigation (on left) – Update the src/data/nav-items.yaml
– Footer – Update the src/gatsby-theme-carbon/components/Footer.js Only one column and content area used. (RIGHT column not used)
– Header – The custom header src/gatsby-theme-carbon/components/Header.js is in this file. This is the only one that should be edited.  The other files are theme.

To see team’s configuration, you can view https://github.com/IBM/FHIR/tree/master/docs

Building a Carbon Site
0 – clone git: IBM/FHIR and change to /docs
1 – npm install
– if prompted, install these plugins:
npm install –save gatsby-plugin-manifest
npm install –save gatsby-plugin-slug
npm install –save gatsby-plugin-manifest
2 – gatsby build –prefix-paths
The build should output:
08:02:18-pb@pauls-mbp:~/git/wffh/oct27/FHIR/docs$ gatsby build –prefix-paths
success open and validate gatsby-configs – 0.090 s
success load plugins – 1.701 s
success onPreInit – 0.017 s
success delete html and css files from previous builds – 0.019 s
success initialize cache – 0.031 s
success copy gatsby files – 0.080 s
success onPreBootstrap – 1.931 s
success source and transform nodes – 4.337 s
success building schema – 0.272 s
success createPages – 0.014 s
success createPagesStatefully – 1.165 s
success onPreExtractQueries – 0.014 s
success update schema – 0.071 s
success extract queries from components – 0.243 s
success write out requires – 0.017 s
success write out redirect data – 0.015 s
success Build manifest and related icons – 0.110 s
success Build manifest and related icons – 0.129 s
success onPostBootstrap – 0.268 s

info bootstrap finished – 15.674 s

success run static queries – 0.049 s — 6/6 187.18 queries/second
success Building production JavaScript and CSS bundles – 105.557 s
success Rewriting compilation hashes – 0.029 s
success run page queries – 0.087 s — 19/19 312.56 queries/second
success Building static HTML for pages – 21.400 s — 19/19 14.81 pages/second
info Done building in 142.923 sec

3 – gatsby serve (to check)
4 – on a different repo, copy the files from `public/` over to the gh-pages branch at the root
5 – git add .
6 – git push

I hope this helps you with Carbon/Gatsby.

Additional Links
Gatsby Theme: Carbon https://github.com/carbon-design-system/gatsby-theme-carbon
Gatsby Theme Carbon: Guides https://gatsby-theme-carbon.now.sh/guides/
Carbon Design https://www.carbondesignsystem.com/components/link/code/
Carbon Theme Details http://react.carbondesignsystem.com/?path=/story/link–default
MDX https://mdxjs.com/

IBM Db2 with IBM FHIR Server – FHIR Schema

My colleague Albert has also merged a Dockerfile for testing, it’s a good place to start.


docker run -itd –name fhirdby –privileged=true -p 50000:50000 -e LICENSE=accept -e DB2INST1_PASSWORD=password -e DBNAME=fhirdb -v database:/database ibmcom/db2


docker exec -ti fhirdby bash -c “su – db2inst1”
source .bashrc

# Recreate the DB with the right page size the tablespace is implictly created by the tool
[db2inst1@c58991a6a1a2 ~]$ db2 terminate
DB20000I The TERMINATE command completed successfully.
[db2inst1@c58991a6a1a2 ~]$ db2 drop db fhirdb
DB20000I The DROP DATABASE command completed successfully.
[db2inst1@c58991a6a1a2 ~]$ db2 CREATE DB FHIRDB using codeset UTF-8 territory us PAGESIZE 32768
DB20000I The CREATE DATABASE command completed successfully.

# Create the schemas
[db2inst1@c58991a6a1a2 ~]$ db2 connect to fhirdb
Database Connection Information
Database server = DB2/LINUXX8664 11.5.0.0
SQL authorization ID = DB2INST1
Local database alias = FHIRDB

[db2inst1@c58991a6a1a2 ~]$ db2 “create schema fhirdata”
DB20000I The SQL command completed successfully.
[db2inst1@c58991a6a1a2 ~]$ db2 “create schema fhir_admin”
DB20000I The SQL command completed successfully.

# Run the Schema creation with a small pool
–prop-file /Users/paulbastide/git/wffh/FHIR/fhir-persistence-schema/db.properties
–schema-name FHIRDATA
–pool-size 2
–update-schema

# Create a new tenant
–prop-file /Users/paulbastide/git/wffh/FHIR/fhir-persistence-schema/db.properties
–schema-name FHIRDATA
–allocate-tenant TNT1

Contents of db.properties are
db.host=localhost
db.port=50000
db.database=fhirdb
user=db2inst1
password=change-me
sslConnection=false

Good luck with Docker/IBM FHIR Server