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

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

pull/7383/head
Andrew Kingston 4 years ago
parent
612ef21e75
commit
1e98f03bd7
7 changed files with 145 additions and 119 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      hosting/nginx.dev.conf.hbs
  2. 9
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
  3. 104
      packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js
  4. 17
      packages/server/src/api/controllers/static/index.ts
  5. 103
      packages/server/src/api/controllers/static/templates/preview.hbs
  6. 1
      packages/server/src/api/routes/static.ts
  7. 26
      packages/server/src/api/routes/tests/static.spec.js

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

@ -62,6 +62,10 @@ http {
proxy_pass http://{{ address }}:4001;
}
location /preview {
proxy_pass http://{{ address }}:4001;
}
location /builder {
proxy_pass http://{{ address }}:3000;
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,
currentAsset,
} from "builderStore"
import iframeTemplate from "./iframeTemplate"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import {
ProgressCircle,
@ -40,12 +39,6 @@
BUDIBASE: "type",
}
// Construct iframe template
$: template = iframeTemplate.replace(
/\{\{ CLIENT_LIB_PATH }}/,
$store.clientLibPath
)
const placeholderScreen = new Screen()
.name("Screen Placeholder")
.route("/")
@ -298,7 +291,7 @@
<iframe
title="componentPreview"
bind:this={iframe}
srcdoc={template}
src="/preview"
class:hidden={loading || error}
class:tablet={$store.previewDevice === "tablet"}
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) {
console.log("SERVE APP")
const db = getAppDB({ skip_setup: true })
const appInfo = await db.get(DocumentType.APP_METADATA)
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) {
return send(ctx, "budibase-client.js", {
root: join(NODE_MODULES_PATH, "@budibase", "client", "dist"),

103
packages/server/src/api/controllers/static/templates/preview.hbs
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),
controller.deleteObjects
)
.get("/preview", authorized(BUILDER), controller.serveBuilderPreview)
.get("/:appId/:path*", controller.serveApp)
.get("/app/:appUrl/:path*", controller.serveApp)
.post(

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

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

Write Preview
Loading…
Cancel
Save