feat: add preview deploys with netlify (#972)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/972
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>

.drone.yml

@@ -1,8 +1,7 @@
+---
 kind: pipeline
 name: build
 
-# TODO: update translations only nightly
-
 trigger:
   branch:
     include:
@@ -138,6 +137,21 @@ steps:
         - failure
         - success
 
+  - name: deploy-preview
+    image: node:16
+    pull: true
+    environment:
+      NETLIFY_AUTH_TOKEN:
+        from_secret: netlify_auth_token
+      NETLIFY_SITE_ID:
+        from_secret: netlify_site_id
+      GITEA_TOKEN:
+        from_secret: gitea_token
+    commands:
+      - node ./scripts/deploy-preview-netlify.js
+    depends_on:
+      - build-prod
+
 ---
 kind: pipeline
 name: release-latest
@@ -635,3 +649,8 @@ steps:
     environment:
       CROWDIN_KEY:
         from_secret: crowdin_key
+---
+kind: signature
+hmac: b343ca4448b29bcd26ba9888fa67926040b2f420d891b62e2e74ce487557c58c
+
+...

.gitignore

@@ -26,3 +26,6 @@ stats.html
 # Test files
 cypress/screenshots
 cypress/videos
+
+# Local Netlify folder
+.netlify

netlify.toml

@@ -0,0 +1,3 @@
+[build]
+  command = "yarn build"
+  publish = "dist"

package.json

@@ -70,10 +70,12 @@
     "express": "4.17.1",
     "faker": "5.5.3",
     "jest": "27.3.1",
+    "netlify-cli": "^6.14.19",
     "postcss": "8.3.11",
     "rollup": "2.59.0",
     "rollup-plugin-visualizer": "5.5.2",
     "sass": "1.43.4",
+    "slugify": "^1.6.2",
     "ts-jest": "27.0.7",
     "typescript": "4.4.4",
     "vite": "2.6.14",

scripts/deploy-preview-netlify.js

@@ -0,0 +1,66 @@
+const slugify = require('slugify')
+const {exec} = require('child_process')
+const axios = require('axios')
+
+const BOT_USER_ID = 513
+const giteaToken = process.env.GITEA_TOKEN
+const siteId = process.env.NETLIFY_SITE_ID
+const branchSlug = slugify(process.env.DRONE_SOURCE_BRANCH)
+const prNumber = process.env.DRONE_PULL_REQUEST
+
+const prIssueCommentsUrl = `https://kolaente.dev/api/v1/repos/vikunja/frontend/issues/${prNumber}/comments`
+const alias = `${prNumber}-${branchSlug}`
+const fullPreviewUrl = `https://${alias}--vikunja-frontend-preview.netlify.app`
+
+const promiseExec = cmd => {
+	return new Promise((resolve, reject) => {
+		exec(cmd, (error, stdout, stderr) => {
+			if (error) {
+				reject(error)
+				return
+			}
+
+			resolve(stdout)
+		})
+	})
+}
+
+(async function () {
+	let stdout = await promiseExec(`./node_modules/.bin/netlify link --id ${siteId}`)
+	console.log(stdout)
+	stdout = await promiseExec(`./node_modules/.bin/netlify deploy --alias ${alias}`)
+	console.log(stdout)
+
+	const {data} = await axios.get(prIssueCommentsUrl)
+	const hasComment = data.some(c => c.user.id === BOT_USER_ID)
+
+	if (hasComment) {
+		console.log(`PR #${prNumber} already has a comment with a link, not sending another comment.`)
+		return
+	}
+
+	await axios.post(prIssueCommentsUrl, {
+		body: `
+Hi ${process.env.DRONE_COMMIT_AUTHOR}!
+
+Thank you for creating a PR!
+
+I've deployed the changes of this PR on a preview environment under this URL: ${fullPreviewUrl}
+
+You can use this url to view the changes live and test them out.
+You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/.
+
+Have a nice day!
+
+> Beep boop, I'm a bot.
+`,
+	}, {
+		headers: {
+			'Content-Type': 'application/json',
+			'accept': 'application/json',
+			'Authorization': `token ${giteaToken}`,
+		},
+	})
+
+	console.log(`Preview comment sent successfully to PR #${prNumber}!`)
+})()