Primate - modern role-base progressive UI for Apache CloudStack

Clone this repo:


  1. 195ea5b infra: physical network and traffic type management by Rohit Yadav · 21 hours ago master
  2. 003bfd1 infra: Vmware section in zone details tab (#127) by Ritchie Vincent · 24 hours ago
  3. 224967b infra: fix a-progress warnings by Rohit Yadav · 24 hours ago
  4. d84559c infra: zone resource capacity tab (#128) by Ritchie Vincent · 24 hours ago
  5. e0eaf8d infra: physical network, nsp and traffictypes support by Rohit Yadav · 2 days ago

CloudStack Primate Build Status

A modern role-based progressive CloudStack UI based on VueJS and Ant Design.

Primate Screenshot

Getting Started

Install node: (Debian/Ubuntu)

sudo apt-get install npm nodejs

Install node: (CentOS/Fedora)

curl -sL | sudo bash -
sudo yum install nodejs

For development, install tools and dependencies system-wide:

sudo npm install -g @vue/cli webpack eslint
sudo npm install -g npm@next
sudo npm install -g npm-check-updates


Override the default CS_URL to a running CloudStack management server:

cp .env.local.example .env.local
Change the `CS_URL` in the `.env.local` file

To configure https, you may use .env.local.https.example.

Build and run:

npm start
npm run serve

Upgrade dependencies to the latest versions:

ncu -u

Run Tests:

npm run test
npm run lint
npm run test:unit

Fix issues and vulnerabilities:

npm audit


Fetch dependencies and build:

npm install
npm run build

This creates a static webpack application in dist/, which can then be served from any web server or CloudStack management server (jetty).

To use CloudStack management server (jetty), you may copy the built Primate build to a new/existing webapp directory on the management server host. If the webapp directory is changed, please change the webapp.dir in the /etc/cloudstack/management/ and restart the management server host.

To use a separate webserver, note that the API server is accessed through the path /client, which needs be forwarded to an actual CloudStack instance.

For example, a simple way to serve Primate with nginx can be implemented with the following nginx configuration (to be put into /etc/nginx/conf.d/default.conf or similar):

server {
    listen       80;
    server_name  localhost;
    location / {
        # /src/primate/dist contains the built Primate webpack
        root   /src/primate/dist;
        index  index.html;
    location /client/ {
        # should be replaced your CloudStack management
        # server's actual URI


A production-ready Docker container can also be built with the provided Dockerfile and build script.

Make sure Docker is installed, then run


Change the example configuration in nginx/default.conf according to your needs.

Run Primate:

docker run -ti --rm -p 8080:80 -v $(pwd)/nginx:/etc/nginx/conf.d:ro cloudstack-primate:latest


Learning Resources

Primate Development

  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          /* Less variables, required modifyVars*/
          /* Refer to variables at */
          'primary-color': '#F5222D',
          'link-color': '#F5222D',
          'border-radius-base': '4px',
        javascriptEnabled: true,


Primate uses the following:


The project was created by Rohit Yadav over several weekends during late 2018 and early 2019. During ApacheCon CCCUS19, on 9th September 2019, Primate was introduced and demoed as part of the talk Modern UI for CloudStack (video). Primate was accepted by the Apache CloudStack project on 21 Oct 2019.


Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the “License”); you may not use this file except in compliance with the License. You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.