Developing the Harbor Frontend

If you already have a harbor backend environment, you can build a frontend development environment with the following configuration.

  1. Open the terminal and run the following command to copy “proxy.config.mjs.temp” file to “proxy.config.mjs”.

    cd harbor/src/portal
    cp proxy.config.mjs.temp proxy.config.mjs

    NOTE: You should specify an available Harbor hostname. And you can specify the agent if you work behind a corporate proxy.

import HttpsProxyAgent from 'https-proxy-agent';
// Define the proxy configuration
const HarborProxyConfig = [
    "context": [
    "target": "${A Harbor server}",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
// Define if you use agent
const useAgent = false;
// Specify an agent server, if empty, will read it from environment variable http_proxy or HTTP_PROXY
const specifiedAgentServer = "${An agent server}";

function setupForCorporateProxy(proxyConfig) {
  if (useAgent) {
    const agentServer = process.env.http_proxy || process.env.HTTP_PROXY || specifiedAgentServer;
    if (agentServer) {
      const agent = new HttpsProxyAgent(agentServer);
      console.log('Using corporate agent server: ' + agentServer);
      proxyConfig.forEach(function (entry) {
        entry.agent = agent;
  return proxyConfig;

export default setupForCorporateProxy(HarborProxyConfig);  
  1. Install npm packages and 3rd-party dependencies.

    npm install
  2. Execute the following command´╝îserve Harbor locally.

    npm run start
  3. Then you can visit the Harbor by address: https://localhost:4200.