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": [
      "/api",
      "/c",
      "/i18n",
      "/chartrepo",
      "/LICENSE",
      "/swagger.json",
      "/devcenter-api-2.0",
      "/swagger-ui.bundle.js"
    ],
    "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.