75 lines
2.5 KiB
Markdown
75 lines
2.5 KiB
Markdown
|
---
|
||
|
|
sidebar_position: 4
|
||
|
|
title: Custom URL Access/Build
|
||
|
|
---
|
||
|
|
|
||
|
|
|
||
|
|
## Build for non-root path
|
||
|
|
|
||
|
|
Sometimes it is desired to access the viewer from a non-root path (e.g., `/my-awesome-viewer` instead of `/`).
|
||
|
|
You can achieve so by using the `PUBLIC_URL` environment variable AND the `routerBasename` configuration option.
|
||
|
|
|
||
|
|
1. use a config (e.g. `config/myConfig.js`) file that is using the `routerBasename` of your choice `/my-awesome-viewer` (note there is only one / - it is not /my-awesome-viewer/).
|
||
|
|
2. build the viewer with `PUBLIC_URL=/my-awesome-viewer/` (note there are two / - it is not /my-awesome-viewer).
|
||
|
|
|
||
|
|
|
||
|
|
:::tip
|
||
|
|
The PUBLIC_URL tells the application where to find the static assets and the routerBasename will tell the application how to handle the routes
|
||
|
|
:::
|
||
|
|
|
||
|
|
|
||
|
|
### Testing in Development
|
||
|
|
For testing the build locally, you can use the following command:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# we use default config file, so we assume you have already set the routerBasename to /my-awesome-viewer in the default config as an example
|
||
|
|
PUBLIC_URL=/my-awesome-viewer/ APP_CONFIG=config/default.js yarn dev
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
### Testing in Build (production)
|
||
|
|
You need to build the viewer with the following command:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
PUBLIC_URL=/my-awesome-viewer/ APP_CONFIG=config/default.js yarn build
|
||
|
|
```
|
||
|
|
|
||
|
|
We can use the `npx serve` to serve the build folder. There are two things you need to consider however,
|
||
|
|
1. You need to change the public/serve.json file to reflect the new routerBasename in the destination (see the example below)
|
||
|
|
|
||
|
|
|
||
|
|
```json
|
||
|
|
// final serve.json
|
||
|
|
{
|
||
|
|
"rewrites": [{ "source": "*", "destination": "my-awesome-viewer/index.html" }],
|
||
|
|
"headers": [
|
||
|
|
{
|
||
|
|
"source": "**/*",
|
||
|
|
"headers": [
|
||
|
|
{ "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" },
|
||
|
|
{ "key": "Cross-Origin-Opener-Policy", "value": "same-origin" }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
```bash
|
||
|
|
cd platform/app;
|
||
|
|
|
||
|
|
# rename the dist folder to my-awesome-viewer
|
||
|
|
mv dist my-awesome-viewer
|
||
|
|
|
||
|
|
# serve the folder with custom json, note that we are using ../public/serve.json and NOT public/serve.json
|
||
|
|
npx serve -c ./public/serve.json
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
:::note
|
||
|
|
When you want to authenticate against a sub path, there are a few things you should keep in mind:
|
||
|
|
|
||
|
|
1. Set the `routerBasename` to the sub path and also update the `PUBLIC_URL` to match the sub path.
|
||
|
|
2. Don't forget to modify the `serve.json` file as mentioned earlier.
|
||
|
|
3. Ensure that the sub path is included in the list of allowed callback URLs. For example, in the Google Cloud dashboard, you can set it in the `Authorized redirect URIs` field under the `Credentials` section of the `APIs & Services` menu.
|
||
|
|
:::
|