Merge pull request #76 from jordanopensource/task/add-build-banner

Add build banner

Author: George Khoury

.drone.yml

@@ -19,6 +19,16 @@ steps:
         [
           CONTRIBUTIONS_API_URL=https://contributions.api.dev.josa.ngo,
           MATOMO_SITE_ID=11,
+          TARGET_ENV=development
+        ]
+      build_args_from_env:
+        [
+          DRONE_BUILD_NUMBER,
+          DRONE_BUILD_LINK,
+          DRONE_COMMIT_SHA,
+          DRONE_COMMIT_LINK,
+          DRONE_REPO_LINK,
+          DRONE_BUILD_FINISHED,
         ]
       tags:
         - ${DRONE_COMMIT_SHA}

Dockerfile

@@ -1,4 +1,4 @@
-ARG CONTRIBUTIONS_API_URL=https://contributions.api.dev.josa.ngo HOST=0.0.0.0 PORT=3000 USER=node MATOMO_SITE_ID=11
+ARG CONTRIBUTIONS_API_URL=https://contributions.api.dev.josa.ngo HOST=0.0.0.0 PORT=3000 USER=node MATOMO_SITE_ID=11 TARGET_ENV DRONE_COMMIT_SHA=${DRONE_COMMIT_SHA} DRONE_BUILD_NUMBER=${DRONE_BUILD_NUMBER} DRONE_BUILD_LINK=${DRONE_BUILD_LINK} DRONE_COMMIT_LINK=${DRONE_COMMIT_LINK} DRONE_REPO_LINK=${DRONE_REPO_LINK} DRONE_BUILD_FINISHED=${DRONE_BUILD_FINISHED} DEBUG='false'
 
 ###########
 # BUILDER #
@@ -9,14 +9,22 @@ ARG CONTRIBUTIONS_API_URL
 ARG HOST
 ARG PORT
 ARG MATOMO_SITE_ID
+ARG TARGET_ENV
+ARG DRONE_COMMIT_SHA
+ARG DRONE_BUILD_NUMBER
+ARG DRONE_BUILD_LINK
+ARG DRONE_COMMIT_LINK
+ARG DRONE_REPO_LINK
+ARG DRONE_BUILD_FINISHED
+ARG DEBUG
 
 # copy build context and install dependencies
 WORKDIR /workspace
 COPY . .
 RUN npm install
 
 # Inject the enviromental variables
-ENV CONTRIBUTIONS_API_URL=$CONTRIBUTIONS_API_URL HOST=$HOST PORT=$PORT MATOMO_SITE_ID=$MATOMO_SITE_ID
+ENV CONTRIBUTIONS_API_URL=$CONTRIBUTIONS_API_URL HOST=$HOST PORT=$PORT MATOMO_SITE_ID=$MATOMO_SITE_ID TARGET_ENV=${TARGET_ENV} DRONE_COMMIT_SHA=$DRONE_COMMIT_SHA DRONE_BUILD_NUMBER=${DRONE_BUILD_NUMBER} DRONE_BUILD_LINK=${DRONE_BUILD_LINK} DRONE_COMMIT_LINK=${DRONE_COMMIT_LINK} DRONE_REPO_LINK=${DRONE_REPO_LINK} DRONE_BUILD_FINISHED=${DRONE_BUILD_FINISHED} DEBUG=${DEBUG}
 
 # build NuxtJS project
 RUN npm run build:modern
@@ -31,6 +39,14 @@ ARG HOST
 ARG PORT
 ARG USER
 ARG MATOMO_SITE_ID
+ARG TARGET_ENV
+ARG DRONE_COMMIT_SHA
+ARG DRONE_BUILD_NUMBER
+ARG DRONE_BUILD_LINK
+ARG DRONE_COMMIT_LINK
+ARG DRONE_REPO_LINK
+ARG DRONE_BUILD_FINISHED
+ARG DEBUG
 
 # copy builder output to project workdir
 WORKDIR /app
@@ -40,7 +56,7 @@ COPY --from=builder --chown=${USER}:${USER} /workspace/node_modules /app/node_mo
 COPY --from=builder --chown=${USER}:${USER} /workspace/package.json /app/
 
 # Inject the enviromental variables
-ENV CONTRIBUTIONS_API_URL=$CONTRIBUTIONS_API_URL HOST=$HOST PORT=$PORT MATOMO_SITE_ID=$MATOMO_SITE_ID
+ENV CONTRIBUTIONS_API_URL=$CONTRIBUTIONS_API_URL HOST=$HOST PORT=$PORT MATOMO_SITE_ID=$MATOMO_SITE_ID TARGET_ENV=${TARGET_ENV} DRONE_COMMIT_SHA=$DRONE_COMMIT_SHA DRONE_BUILD_NUMBER=${DRONE_BUILD_NUMBER} DRONE_BUILD_LINK=${DRONE_BUILD_LINK} DRONE_COMMIT_LINK=${DRONE_COMMIT_LINK} DRONE_REPO_LINK=${DRONE_REPO_LINK} DRONE_BUILD_FINISHED=${DRONE_BUILD_FINISHED} DEBUG=${DEBUG}
 
 # set user context
 USER ${USER}

layouts/default.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="bg-gray">
+    <buildInfoBanner v-if="this.$config.TARGET_ENV==='development'"/>
     <TheHeader />
     <Nuxt />
     <TheFooter />

nuxt.config.js

@@ -39,6 +39,7 @@ export default {
 
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
+    '@josango/nuxt-build-banner',
     [
       'nuxt-matomo',
       { matomoUrl: '//track.josa.ngo/', siteId: process.env.MATOMO_SITE_ID },
@@ -63,6 +64,14 @@ export default {
   publicRuntimeConfig: {
     CONTRIBUTIONS_API_URL: process.env.CONTRIBUTIONS_API_URL,
     siteID: process.env.MATOMO_SITE_ID,
+    buildCommitSHA: process.env.DRONE_COMMIT_SHA,
+    DRONE_COMMIT_SHA: process.env.DRONE_COMMIT_SHA,
+    DRONE_COMMIT_LINK: process.env.DRONE_COMMIT_LINK,
+    DRONE_BUILD_NUMBER: process.env.DRONE_BUILD_NUMBER,
+    DRONE_BUILD_LINK: process.env.DRONE_BUILD_LINK,
+    DRONE_REPO_LINK: process.env.DRONE_REPO_LINK,
+    DRONE_BUILD_FINISHED: process.env.DRONE_BUILD_FINISHED,
+    TARGET_ENV: process.env.TARGET_ENV
   },
 
   healthcheck: {

package-lock.json

@@ -13,6 +13,7 @@
     "lint": "npm run lint:js"
   },
   "dependencies": {
+    "@josango/nuxt-build-banner": "^1.0.0",
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/proxy": "^2.1.0",
     "@nuxtjs/pwa": "^3.3.5",