MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Serve builder preview via server to fix dependency on third party cookies

This commit is contained in:
Andrew Kingston 2022-08-20 13:47:57 +01:00
parent 10be50f7ec
commit d19a0f171e
7 changed files with 145 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
hosting/nginx.dev.conf.hbs
View File

@ -62,6 +62,10 @@ http {
proxy_pass http://{{ address }}:4001; proxy_pass http://{{ address }}:4001;
} }
location /preview {
proxy_pass http://{{ address }}:4001;
}
location /builder { location /builder {
proxy_pass http://{{ address }}:3000; proxy_pass http://{{ address }}:3000;
rewrite ^/builder(.*)$ /builder/$1 break; rewrite ^/builder(.*)$ /builder/$1 break;

9
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
View File

@ -8,7 +8,6 @@
selectedLayout, selectedLayout,
currentAsset, currentAsset,
} from "builderStore" } from "builderStore"
import iframeTemplate from "./iframeTemplate"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { import {
ProgressCircle, ProgressCircle,
@ -40,12 +39,6 @@
BUDIBASE: "type", BUDIBASE: "type",
} }
// Construct iframe template
$: template = iframeTemplate.replace(
/\{\{ CLIENT_LIB_PATH }}/,
$store.clientLibPath
)
const placeholderScreen = new Screen() const placeholderScreen = new Screen()
.name("Screen Placeholder") .name("Screen Placeholder")
.route("/") .route("/")
@ -298,7 +291,7 @@
<iframe <iframe
title="componentPreview" title="componentPreview"
bind:this={iframe} bind:this={iframe}
srcdoc={template} src="/preview"
class:hidden={loading || error} class:hidden={loading || error}
class:tablet={$store.previewDevice === "tablet"} class:tablet={$store.previewDevice === "tablet"}
class:mobile={$store.previewDevice === "mobile"} class:mobile={$store.previewDevice === "mobile"}

104
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js
View File

@ -1,104 +0,0 @@
export default `
<html>
<head>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
rel="stylesheet"
/>
<style>
html, body {
padding: 0;
margin: 0;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
body {
flex: 1 1 auto;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
</style>
<script src='{{ CLIENT_LIB_PATH }}'></script>
<script>
function receiveMessage(event) {
if (!event.data) {
return
}
// Parse received message
// If parsing fails, just ignore and wait for the next message
let parsed
try {
parsed = JSON.parse(event.data)
} catch (error) {
console.error("Client received invalid JSON")
// Ignore
}
if (!parsed || !parsed.isBudibaseEvent) {
return
}
// Extract data from message
const {
selectedComponentId,
layout,
screen,
appId,
theme,
customTheme,
previewDevice,
navigation,
hiddenComponentIds
} = parsed
// Set some flags so the app knows we're in the builder
window["##BUDIBASE_IN_BUILDER##"] = true
window["##BUDIBASE_APP_ID##"] = appId
window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout
window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
window["##BUDIBASE_PREVIEW_THEME##"] = theme
window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme
window["##BUDIBASE_PREVIEW_DEVICE##"] = previewDevice
window["##BUDIBASE_PREVIEW_NAVIGATION##"] = navigation
window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"] = hiddenComponentIds
// Initialise app
try {
if (window.loadBudibase) {
window.loadBudibase()
document.documentElement.classList.add("loaded")
} else {
throw "The client library couldn't be loaded"
}
} catch (error) {
window.parent.postMessage({ type: "error", error })
}
}
window.addEventListener("message", receiveMessage)
window.parent.postMessage({ type: "ready" })
</script>
</head>
<body/>
</html>
`

17
packages/server/src/api/controllers/static/index.ts
View File

@ -102,6 +102,7 @@ export const deleteObjects = async function (ctx: any) {
} }
export const serveApp = async function (ctx: any) { export const serveApp = async function (ctx: any) {
console.log("SERVE APP")
const db = getAppDB({ skip_setup: true }) const db = getAppDB({ skip_setup: true })
const appInfo = await db.get(DocumentType.APP_METADATA) const appInfo = await db.get(DocumentType.APP_METADATA)
let appId = getAppId() let appId = getAppId()
@ -128,6 +129,22 @@ export const serveApp = async function (ctx: any) {
} }
} }
export const serveBuilderPreview = async function (ctx: any) {
const db = getAppDB({ skip_setup: true })
const appInfo = await db.get(DocumentType.APP_METADATA)
if (!env.isJest()) {
let appId = getAppId()
const previewHbs = loadHandlebarsFile(`${__dirname}/templates/preview.hbs`)
ctx.body = await processString(previewHbs, {
clientLibPath: clientLibraryPath(appId, appInfo.version, ctx),
})
} else {
// just return the app info for jest to assert on
ctx.body = { ...appInfo, builderPreview: true }
}
}
export const serveClientLibrary = async function (ctx: any) { export const serveClientLibrary = async function (ctx: any) {
return send(ctx, "budibase-client.js", { return send(ctx, "budibase-client.js", {
root: join(NODE_MODULES_PATH, "@budibase", "client", "dist"), root: join(NODE_MODULES_PATH, "@budibase", "client", "dist"),

103
packages/server/src/api/controllers/static/templates/preview.hbs Normal file
View File

@ -0,0 +1,103 @@
<html lang="en">
<head>
<title>Budibase Builder Preview</title>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
rel="stylesheet"
/>
<style>
html, body {
padding: 0;
margin: 0;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
body {
flex: 1 1 auto;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
</style>
<script src='{{ clientLibPath }}'></script>
<script>
function receiveMessage(event) {
if (!event.data) {
return
}
// Parse received message
// If parsing fails, just ignore and wait for the next message
let parsed
try {
parsed = JSON.parse(event.data)
} catch (error) {
console.error("Client received invalid JSON")
// Ignore
}
if (!parsed || !parsed.isBudibaseEvent) {
return
}
// Extract data from message
const {
selectedComponentId,
layout,
screen,
appId,
theme,
customTheme,
previewDevice,
navigation,
hiddenComponentIds
} = parsed
// Set some flags so the app knows we're in the builder
window["##BUDIBASE_IN_BUILDER##"] = true
window["##BUDIBASE_APP_ID##"] = appId
window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout
window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
window["##BUDIBASE_PREVIEW_THEME##"] = theme
window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme
window["##BUDIBASE_PREVIEW_DEVICE##"] = previewDevice
window["##BUDIBASE_PREVIEW_NAVIGATION##"] = navigation
window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"] = hiddenComponentIds
// Initialise app
try {
if (window.loadBudibase) {
window.loadBudibase()
document.documentElement.classList.add("loaded")
} else {
throw "The client library couldn't be loaded"
}
} catch (error) {
window.parent.postMessage({ type: "error", error })
}
}
window.addEventListener("message", receiveMessage)
window.parent.postMessage({ type: "ready" })
</script>
</head>
<body></body>
</html>

1
packages/server/src/api/routes/static.ts
View File

@ -56,6 +56,7 @@ router
authorized(PermissionTypes.TABLE, PermissionLevels.WRITE), authorized(PermissionTypes.TABLE, PermissionLevels.WRITE),
controller.deleteObjects controller.deleteObjects
) )
.get("/preview", authorized(BUILDER), controller.serveBuilderPreview)
.get("/:appId/:path*", controller.serveApp) .get("/:appId/:path*", controller.serveApp)
.get("/app/:appUrl/:path*", controller.serveApp) .get("/app/:appUrl/:path*", controller.serveApp)
.post( .post(

26
packages/server/src/api/routes/tests/static.spec.js
View File

@ -40,7 +40,6 @@ describe("/static", () => {
}) })
describe("/app", () => { describe("/app", () => {
beforeEach(() => { beforeEach(() => {
jest.clearAllMocks() jest.clearAllMocks()
}) })
@ -60,7 +59,7 @@ describe("/static", () => {
it("should serve the app by url", async () => { it("should serve the app by url", async () => {
const headers = config.defaultHeaders() const headers = config.defaultHeaders()
delete headers[constants.Headers.APP_ID] delete headers[constants.Headers.APP_ID]
const res = await request const res = await request
.get(`/app${config.prodApp.url}`) .get(`/app${config.prodApp.url}`)
.set(headers) .set(headers)
@ -82,7 +81,7 @@ describe("/static", () => {
describe("/attachments", () => { describe("/attachments", () => {
describe("generateSignedUrls", () => { describe("generateSignedUrls", () => {
let datasource let datasource
beforeEach(async () => { beforeEach(async () => {
datasource = await config.createDatasource({ datasource = await config.createDatasource({
datasource: { datasource: {
@ -93,7 +92,7 @@ describe("/static", () => {
}, },
}) })
}) })
it("should be able to generate a signed upload URL", async () => { it("should be able to generate a signed upload URL", async () => {
const bucket = "foo" const bucket = "foo"
const key = "bar" const key = "bar"
@ -108,7 +107,7 @@ describe("/static", () => {
`https://${bucket}.s3.eu-west-1.amazonaws.com/${key}` `https://${bucket}.s3.eu-west-1.amazonaws.com/${key}`
) )
}) })
it("should handle an invalid datasource ID", async () => { it("should handle an invalid datasource ID", async () => {
const res = await request const res = await request
.post(`/api/attachments/foo/url`) .post(`/api/attachments/foo/url`)
@ -123,7 +122,7 @@ describe("/static", () => {
"The specified datasource could not be found" "The specified datasource could not be found"
) )
}) })
it("should require a bucket parameter", async () => { it("should require a bucket parameter", async () => {
const res = await request const res = await request
.post(`/api/attachments/${datasource._id}/url`) .post(`/api/attachments/${datasource._id}/url`)
@ -136,7 +135,7 @@ describe("/static", () => {
.expect(400) .expect(400)
expect(res.body.message).toEqual("bucket and key values are required") expect(res.body.message).toEqual("bucket and key values are required")
}) })
it("should require a key parameter", async () => { it("should require a key parameter", async () => {
const res = await request const res = await request
.post(`/api/attachments/${datasource._id}/url`) .post(`/api/attachments/${datasource._id}/url`)
@ -151,4 +150,17 @@ describe("/static", () => {
}) })
}) })
describe("/preview", () => {
beforeEach(() => {
jest.clearAllMocks()
})
it("should serve the builder preview", async () => {
const headers = config.defaultHeaders()
const res = await request.get(`/preview`).set(headers).expect(200)
expect(res.body.appId).toBe(config.appId)
expect(res.body.builderPreview).toBe(true)
})
})
}) })