Set bemo url in examples app (#4091)

This PR just adds a thing to set the bemo URL during build. No bemo
example page yet

### Change type

- [ ] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [x] `other`

### Test plan

1. Create a shape...
2.

- [ ] Unit tests
- [ ] End to end tests

### Release notes

- Fixed a bug with...
This commit is contained in:
David Sheldrick 2024-07-08 16:37:04 +01:00 committed by GitHub
parent b166d20447
commit e3cdf34007
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 49 additions and 3 deletions

View file

@ -20,10 +20,13 @@ setDefaultEditorAssetUrls(assetUrls)
// eslint-disable-next-line local/no-at-internal
setDefaultUiAssetUrls(assetUrls)
const gettingStartedExamples = examples.find((e) => e.id === 'Getting started')
if (!gettingStartedExamples) throw new Error('Could not find getting started exmaples')
if (!gettingStartedExamples) throw new Error('Could not find getting started examples')
const basicExample = gettingStartedExamples.value.find((e) => e.title === 'Tldraw component')
if (!basicExample) throw new Error('Could not find initial example')
// eslint-disable-next-line no-console
console.log('bemo', process.env.TLDRAW_BEMO_URL)
const router = createBrowserRouter([
{
path: '*',

View file

@ -2,7 +2,49 @@ import react from '@vitejs/plugin-react-swc'
import path from 'path'
import { PluginOption, defineConfig } from 'vite'
export default defineConfig({
const PR_NUMBER = process.env.VERCEL_GIT_PULL_REQUEST_ID
function getEnv() {
if (!process.env.VERCEL_ENV) {
return 'development'
}
if (PR_NUMBER !== undefined && PR_NUMBER !== '') {
return 'preview'
}
if (process.env.VERCEL_ENV === 'production') {
return 'production'
}
return 'canary'
}
const env = getEnv()
// eslint-disable-next-line no-console
console.log('build env:', env)
function urlOrLocalFallback(mode: string, url: string | undefined, localFallbackPort: number) {
if (url) {
return JSON.stringify(url)
}
if (mode === 'development') {
// in dev, vite lets us inline javascript expressions - so we return a template string that
// will be evaluated on the client
return '`http://${location.hostname}:' + localFallbackPort + '`'
} else {
// in production, we have to fall back to a hardcoded value
return JSON.stringify(`http://localhost:${localFallbackPort}`)
}
}
const TLDRAW_BEMO_URL_STRING =
env === 'production'
? '"https://demo.tldraw.xyz"'
: env === 'canary'
? '"https://canary-demo.tldraw.xyz"'
: `"https://pr-${PR_NUMBER}-demo.tldraw.xyz"`
export default defineConfig(({ mode }) => ({
plugins: [react({ tsDecorators: true }), exampleReadmePlugin()],
root: path.join(__dirname, 'src'),
publicDir: path.join(__dirname, 'public'),
@ -26,8 +68,9 @@ export default defineConfig({
},
define: {
'process.env.TLDRAW_ENV': JSON.stringify(process.env.VERCEL_ENV ?? 'development'),
'process.env.TLDRAW_BEMO_URL': urlOrLocalFallback(mode, TLDRAW_BEMO_URL_STRING, 8989),
},
})
}))
function exampleReadmePlugin(): PluginOption {
return {