Dev Portal Migration Guide
This documentation is for the preview version of the Dev Portal. If you aren't part of the preview program, please refer to the current Dev Portal docs.
This guide walks you through migrating your existing documentation from the current Dev Portal to the new Dev Portal powered by Zudoku. Follow these steps sequentially for a smooth transition.
Migration Process
-
Prepare Your Environment
Clone your existing Zuplo project locally. We recommend trying this in a branch and deploying to a preview environment first.
bashCurrently, this migration must be done locally. It cannot be done in the Zuplo Portal.
-
Create Directory Structure
Set up your new directory structure by creating the following files and folders:
- Create
docs/zudoku.config.ts
as an empty file, the contents will be added later. - Create
docs/package.json
as an empty file, the contents will be added later. - Create
docs/tsconfig.json
as an empty file, the contents will be added later. - Create a directory
docs/pages
for your markdown files - Create a directory
docs/public
for images and other static assets
Once these files are created your directory structure should look like this. Note, that the old dev portal files are still in place. You will delete them later.
txt - Create
-
Update Typescript Configuration File
If you haven't already, create a
tsconfig.json
file in thedocs
folder and update the file with the following content.docs/tsconfig.jsonjson -
Update
package.json
FileIf you haven't already, create a
package.json
file in thedocs
folder and update the file with the following content.docs/package.jsonjson -
Update Root Package.json
Add the
workspaces
configuration to your rootpackage.json
file. Optionally, add a new scriptdocs
to run the dev portal.package.jsonjson -
Migrate Dev Portal Configuration
If you haven't already done so, create a new
zudoku.config.ts
file in thedocs
directory to replace your existingdev-portal.json
.Here's how several fields map from old to new format. See the configuration documentation for a complete list of options.
Old ( dev-portal.json
)New ( zudoku.config.ts
)pageTitle
site.title
faviconUrl
site.favicon
enableAuthentication
Implied by presence of authentication
propertyauthentication.provider
authentication.type
authentication.authority
Provider-specific properties (from sidebar.json) sidebar
Example configuration:
docs/zudoku.config.tstsEnvironment variables are now referenced using
process.env
instead of$env()
. -
Migrate Sidebar Configuration
Move your sidebar configuration from
sidebar.json
to thesidebar
property inzudoku.config.ts
:Old format (
sidebar.json
):jsonNew format (in
zudoku.config.ts
):ts -
Move Markdown Files
Move your markdown files to the
docs/pages
directory. The front matter format remains largely the same:md -
Set Up Images and Assets
Create a
docs/public
directory for your images and other static assets. See the documenation for more information on how to use static files in the new dev portal. -
Install Dependencies
Run
npm install
from your project root to install all dependencies for both your API and documentation. -
Test Locally
Start the dev portal locally with
npm run docs
and verify that:- All pages load correctly
- Authentication works (if using it)
- All links between pages work
- API reference section loads your OpenAPI definitions
- Images and assets display properly
-
Delete Legacy Files
After confirming everything works, delete these files:
/config/dev-portal.json
/docs/sidebar.json
/docs/theme.css
It is critical that you delete the
config/dev-portal.json
file after completing the migration. If that file is not deleted, the Zuplo build system will use the legacy dev portal. -
Deploy and Verify
Deploy your changes by either pushing to a git branch or by running
npx zuplo deploy
. After the deployment has completed, perform these final checks:- Test all site navigation paths
- Verify authentication flows work correctly
- Check API reference documentation renders properly
- Test across different browsers and devices
- Verify custom styling and theming is applied correctly
Theming
For instructions on theming the dev portal, see Colors & Theme and Fonts.
Troubleshooting
If you encounter issues during migration, check these common problems:
- Missing dependencies: Ensure you've run
npm install
from the project root. - Authentication issues: Verify your environment variables are correctly set and authentication is properly configured.
- Sidebar not showing: Check your sidebar configuration in
zudoku.config.ts
and make sure file IDs match your markdown files. - Images not loading: Confirm image paths have been updated to point to the new location.
- Environment variables not working: Use
process.env.VARIABLE_NAME
instead of$env(VARIABLE_NAME)
.