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');
this.importRecipientsPublicKeys(gpgKeys);
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.