Cockpit on Heroku, any success stories?

[WebShapedBiz]

Hi. I'm trying to install Cockpit on Heroku and had all sorts of trouble. At the end I've managed to get my login page without CSS and with Authenticate button not working :-( There is a nice tutorial on SnipCart + Cockpit here that I'm trying to achieve.

Cheers.

[WebShapedBiz]

Update: After poking around I realized that there is a difference in the assets paths between my local Vagrant installation and Heroku git commit installation. Local assets head section:

<script src="/assets/polyfills/dom4.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/polyfills/document-register-element.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/polyfills/URLSearchParams.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/moment.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/jquery.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/lodash.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/riot/riot.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/riot/riot.bind.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/riot/riot.view.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/uikit/js/uikit.min.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/uikit/js/components/notify.min.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/uikit/js/components/tooltip.min.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/uikit/js/components/lightbox.min.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/uikit/js/components/sortable.min.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/uikit/js/components/sticky.min.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/mousetrap.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/storage.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/i18n.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/app/js/app.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/app/js/app.utils.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/app/js/codemirror.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/modules/Cockpit/assets/components.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/modules/Cockpit/assets/cockpit.js?ver=0.8.2" type="text/javascript" ></script>
<link href="/assets/app/css/style.css?ver=0.8.2" type="text/css" rel="stylesheet">
<script src="/assets/lib/uikit/js/components/form-password.min.js?ver=0.8.2" type="text/javascript" ></script>

Heroku assets head section:

<script src="/assets/polyfills/dom4.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/polyfills/document-register-element.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/polyfills/URLSearchParams.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/moment.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/jquery.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/lodash.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/riot/riot.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/riot/riot.bind.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/riot/riot.view.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/uikit/js/uikit.min.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/uikit/js/components/notify.min.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/uikit/js/components/tooltip.min.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/uikit/js/components/lightbox.min.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/uikit/js/components/sortable.min.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/uikit/js/components/sticky.min.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/mousetrap.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/storage.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/lib/i18n.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/js.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/js.utils.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/assets/js/codemirror.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/modules/Cockpit/assets/components.js?ver=0.8.2" type="text/javascript" ></script>
<script src="/modules/Cockpit/assets/cockpit.js?ver=0.8.2" type="text/javascript" ></script>
<link href="/assets/css/style.css?ver=0.8.2" type="text/css" rel="stylesheet">
<script src="/assets/lib/uikit/js/components/form-password.min.js?ver=0.8.2" type="text/javascript" ></script>

As you can see the paths /assets/lib/ and /assets/polyfills/ are rendered OK but everything inside /assets/app/ is missing the app part when git commited to Heroku.

Could anyone try to explain to me what has happened here? How come that only certain part of assets path gets corrupted while others are working fine?

Thank you for your time and effort.

[TheComputerM]

@agentejo @WebShapedBiz I have exactly the same problem and I still have not found the solution, have you?

[vaibhavv4re]

Move all your files and directories under app folder in the asset folder and you will be sorted

[sh1r00]

I just managed to get cockpit up and running on Heroku using the docker file

FROM php:7-apache

RUN apt-get update \
    && apt-get install -y \
        wget zip unzip \
        libzip-dev \
        libfreetype6-dev \
        libjpeg62-turbo-dev \
        libpng-dev \
        sqlite3 libsqlite3-dev \
        libssl-dev \
    && pecl install mongodb \
    && pecl install redis \
    && docker-php-ext-configure gd --with-freetype --with-jpeg \
    && docker-php-ext-install -j$(nproc) iconv gd pdo zip opcache pdo_sqlite \
    && a2enmod rewrite expires

RUN echo "extension=mongodb.so" > /usr/local/etc/php/conf.d/mongodb.ini
RUN echo "extension=redis.so" > /usr/local/etc/php/conf.d/redis.ini

RUN chown -R www-data:www-data /var/www/html

VOLUME /var/www/html

COPY ./docker/run-apache2.sh /usr/local/bin/run-apache2.sh
COPY . /var/www/html/

CMD [ "run-apache2.sh" ]

I just added the last three lines and the ./docker/run-apache2.sh so that i can expose a specific port, Heroku kept failing deploy because of it, and to copy all files into /var/www/html/.

#./docker/run-apache2.sh
#!/usr/bin/env bash

sed -i "s/Listen 80/Listen ${PORT:-80}/g" /etc/apache2/ports.conf
apache2-foreground "$@"

If you need any more help with using Docker with Heroku just go to your app and under Deploy click Container Registry and follow the steps.

[malinkaphann]

Here is my solution.

• composer.json

Make sure ext-pdo_sqlite is there if you use sqlite. Whenever composer.json is updated, you must do composer update so that the composer.lock is updated as well. Heroku requires both composer.json and composer.lock.

{
    "name": "agentejo/cockpit",
    "type": "project",
    "description": "Cockpit Headless CMS",
    "keywords": ["cms", "headles", "api", "cockpit"],
    "homepage": "https://getcockpit.com/",
    "license": "MIT",
    "authors": [
        {
            "name": "Artur Heinze",
            "email": "artur@agentejo.com"
        }
    ],
    "require": {
        "php": "^7.4.0",
        "ext-json": "*",
        "ext-mbstring": "*",
        "ext-pdo_sqlite": "*",
        "ext-sqlite3": "*",
        "phpmailer/phpmailer": "^6.0",
        "claviska/simpleimage": "^3.6",
        "ksubileau/color-thief-php": "^1.3",
        "league/flysystem": "^1.0",
        "firebase/php-jwt": "^5.0",
        "mongodb/mongodb": "^1.3",
        "erusev/parsedown": "^1.7",
        "erusev/parsedown-extra": "^0.7.1",
        "maennchen/zipstream-php": "^0.5.2",
        "colinodell/json5": "^2.1"
    },
    "config": {
        "vendor-dir": "lib/vendor",
        "optimize-autoloader": true
    }
}

• Procfile

web: heroku-php-nginx -C nginx_app.conf

• nginx_app.conf

The importance parts are the aliases created for /assets/ and /lib/. These are needed by Cockpit CMS.

location / {
    # try to serve file directly, fallback to rewrite
    try_files $uri @rewriteapp;
}

# cockpit cms needs this to work.
location /assets/ {
    alias /app/assets/app/;
    autoindex off;
}

# cockpit cms needs this to work.
location /lib/ {
    alias /app/assets/lib/;
    autoindex off;
}

location @rewriteapp {
    # rewrite all to index.php
    rewrite ^(.*)$ /index.php/$1 last;
}

location ~ ^/index\.php(/|$) {
    try_files @heroku-fcgi @heroku-fcgi;
    # ensure that /index.php isn't accessible directly, but only through a rewrite
    internal;
}

[abernh]

Old thread, still the same issues.

Heroku places the app in a directory that reads to CP as "document_root" /app and I guess this somehow messes with the path resolution for the assets.

These are my redirects via mod_rewrite when using Apache

## HEROKU APP DIR /app causes a bug where assets get wrong requested -> rewriting paths as quick fix

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^assets\/js([^/]*)$     assets/app/js/app$1 [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^assets\/(\w+\/.*)$  assets/app/$1 [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^lib\/(\w+\/.*)$  assets/lib/$1 [L]

## HEROKU APP fix - END

[abernh]

Remark: When deploying CP not in root but in a directory e.g. "/cp" and then setting this directory as document root via the Procfile the issue with the wrong referenced assets is not occurring.

 |- \cp
 |    |- /* cp here */
 |- Procfile
 |- composer.json
 |- composer.lock

Procfile:

web: vendor/bin/heroku-php-apache2 cp/

composer.json

{
  ...
  "scripts": {
    "post-install-cmd": [
      "cd cp && composer install --no-dev --prefer-dist --optimize-autoloader --no-interaction"
    ]
  },
  "require": {
    "php": "^7.4.0",
    "ext-json": "*",
    "ext-mbstring": "*",
    "ext-pdo_sqlite": "*",
    "ext-mongodb": "*",
    "ext-gd": "*"
  }
}