To get access, please contact our support. https://support.apiida.com
Don't overlook the step of creating your Developer Portal in the Control Plane Administration Portal. You'll need to input the URL of the developer portal there and retrieve the token, which must be entered into your developer portal environment variables.
Remember to regularly sync your fork with the upstream repository to incorporate updates and improvements.
This guide provides instructions on how to fork and customize the Developer Portal. By creating your own version of the developer portal, you can tailor it to meet your specific requirements and integrate it into your existing processes.
Customizing the Developer Portal allows you to:
Implement custom features not available in the default portal.
Align the portal's appearance with your organization's branding.
Integrate the portal with your internal workflows and backend systems.
Follow the steps below to fork the repository, set up your development environment, and customize the portal according to your needs.
Additional information on forking a repository: https://docs.github.com/en/get-started/quickstart/fork-a-repo
Steps to Fork and Customize the Developer Portal
1. Fork the Repository and Pull It
Navigate to the Developer Portal's GitHub repository and fork it to your own account.
Use Git to clone the forked repository to your local machine.
git clone https://github.com/your-username/developer-portal.git
Replace your-username
with your GitHub username.
2. Adjust the Environment Variables
Before proceeding, ensure you have created a Developer Portal instance in the API Control Plane.
Adjust the environment variable defaults in
src/config.ts
anddocker/build/setEnvVarsOnContainerStartup.sh
.
Important Environment Variables:
ENV | Default | More Info |
---|---|---|
|
| Set during deployment. |
|
| The URL of the backend. |
|
| |
|
| The token of the Developer Portal. You can find this in the Administration Portal. |
|
| To disable the insertion of the tenant ID, the string must not contain 'addTenantIdToBack'. |
|
| The inner port of the container. The port of the web server nginx with SSL. |
|
| The inner port of the container. The port of the web server nginx without SSL. |
|
| The token can be created on the website tiny.cloud. |
Note: Replace
<token>
with your actual API key from Tiny Cloud.
3. Install Dependencies
Run
npm install
in the project root to install all necessary dependencies.
4. Run the Developer Portal Locally
For local development, Vite is used. With "Hot Module Replacement," the developer portal is automatically rebuilt and hosted while you make changes.
Run the development server:
npm run dev
5. Customize the Portal
For example, change the colors in
tailwind.config.js
to match your branding.When adding new templates to the editor:
Avoid using the
hover
directive to prevent the CSS from becoming excessively large.Replace instances of
indigo
with your custom color (e.g.,apiida
).Replace all
<dl>
,<dt>
, and<dd>
tags with<div>
.Add a
<p></p>
at the end of the template to make it easier to find the end of the template.
6. Generate License File for Third-Party Libraries
Run the following command to generate a license file for third-party libraries:
npm run license-file
How to Get the Developer Portal Running
Develop Locally
For local development:
Run
npm install
to install dependencies.Run
npm run dev
to start the development server.
Environment Variables
For local development, adjust the default environment variables in:
src/config.ts
docker/build/setEnvVarsOnContainerStartup.sh
When you run npm run build
, the developer portal is built into a bundle of JavaScript files. During this process, the default values are replaced with those from your environment variables.