February 15, 2019

Deploy React App to GitLab Pages With GitLab CI

So I wanted to deploy a simple React app to GitLab Pages using GitLab CI. While this is easy to do (example here) I did not know how to configure homepage in package.json during the build and keep it out of version control and do the same for a list of public GPG keys. Not that any of these is secret but it would be nice if the app can be cloned/forked and reused by anyone without having to modify the code.

Here is what I did, not sure if this is the best solution but it worked for me.

Configure homepage

For this one I just added a step in the deploy stage to insert the line in packages.json .

 - "sed -i -e '/\"name\": \"muna-js\",/a\\'$'\\n'\"\\ \\ \\\"homepage\\\": \\\"$CI_PAGES_URL\\\",\" package.json"

What this is doing is to search for the line "name": "muna-js", and insert a new line after it. Took me a while to figure out the correct sed command and even more to escape it properly so it is valid yaml at the end. 😅

Keep in mind that CI_PAGES_URL is available as of GitLab 11.8 which at the time of writing is not out yet so for now I had to add it manually.

Provide public GPG keys

The app needs these in order to do its work - encrypt secrets. I went with declaring them as an array in a dedicated file which is then imported and used from the React app.

The file (src/recipients.js) should look like this

var data = [
  "-----BEGIN PGP PUBLIC KEY BLOCK-----\nVersion: GnuPG v1\n\nmQENBF...v9x/\n-----END PGP PUBLIC KEY BLOCK-----\n",
  "-----BEGIN PGP PUBLIC KEY BLOCK-----\nVersion: GnuPG v1\n\eVTogBC...uhV/\n-----END PGP PUBLIC KEY BLOCK-----\n"
module.exports = {gpgKeys: data};

and then can be imported and use like this

var {gpgKeys} = require('./recipients');

All good, but how to make it available during the build and keep it out of version control? Again I went with something simple - create an environment variable that contains the whole file content and add a command to the deploy stage to create it:

- "echo \"$RECIPIENTS\" > src/recipients.js"

So yeah, that’s all. Nothing special but took me some time to figure it out (this is my first and only React app so far 😎) so I decided to write it down in case someone else is googling about similar problems.

Powered by Hugo & Kiss.