Versions Compared

Old Version 1

changes.mady.by.user Pierre-Marcel Gnilka

Saved on

compared with

New Version Current

changes.mady.by.user Marilena Müller

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Fork it!

Note

To get access, please contact our support. https://

...

support.apiida.com

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
In the README.dm you will find further instructions on how to start and configure your developer portal locally.

...

Info

Remember to regularly sync your fork with the upstream repository to incorporate updates and improvements.

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.

Code Block
git clone https://github.com/your-username/developer-portal.git

Replace your-username with your GitHub username.

2. Adjust the Environment Variables

Info

Before proceeding, make sure that you have created an instance of the developer portal in the API Control Plane Administration Portal. There you must enter the URL of the developer portal and retrieve the token that must be entered in the environment variables of your developer portal.

  • Adjust the environment variable defaults in src/config.ts and docker/build/setEnvVarsOnContainerStartup.sh.

Important Environment Variables:

...

ENV

Default

More Info

VERSION

DevelopmentVersion

Set during deployment.

BACKEND_URL

https://localhost:8080

The URL of the backend. <yourSubDomain>.backend.apiida.io

SUPPORT_URL

support.apiida.com

...

DEV_PORTAL_TOKEN

0qPG7xXzm65SnioUM2fK

The token of the Developer Portal. You can find this in the Administration Portal.

INSERT_TENANT_ID

addTenantIdToBackendUrl

To disable the insertion of the tenant ID, the string must not contain 'addTenantIdToBack'.

NGINX_PORT_SSL

443

The inner port of the container. The port of the web server nginx with SSL.

NGINX_PORT

80

The inner port of the container. The port of the web server nginx without SSL.

TINY_EDITOR_API_KEY

<token>

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:

    Code Block
    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:

    Code Block
    npm run license-file

How to Get the Developer Portal Running

Develop Locally

For local development:

  1. Run npm install to install dependencies.

  2. 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.