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.
- use a config (e.g.
config/myConfig.js
) file that is using therouterBasename
of your choice/my-awesome-viewer
(note there is only one / - it is not /my-awesome-viewer/). - 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:
# 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:
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,
- You need to change the public/serve.json file to reflect the new routerBasename in the destination (see the example below)
// 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" }
]
}
]
}
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:
- Set the
routerBasename
to the sub path and also update thePUBLIC_URL
to match the sub path. - Don't forget to modify the
serve.json
file as mentioned earlier. - 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 theCredentials
section of theAPIs & Services
menu.