medianetic webdesign blog – *happy coding*

VueJS/WebPack/NPM-Scripts: Deploy via SFTP

Möchte man bspw. ein VueJS/JS Projekt auf einem Webserver veröffentlichen, hat man in der Regel ein NPM-Script um die Distribution zu erzeugen, in meinem Fall npm run build. In meinem VueJS-Projekt steht in der package.json:

„build“: „vue-cli-service build“,

Nach dem Build-Prozess möchte ich nun die erzeugte Distribution, die im Verzeichnis ‚/dist/‘ erstellt wurde via SFTP auf einen Webserver hochladen.

VueJS: Distribution mit relativen Pfaden

Wenn man ein VueJS Project distributiert werden die Pfade leider standardmäßig absolut angegeben. In der index.html steht also z.B. sowas /js/chunk-vendors.3b8d20eb.js. Möchte man das die Pfade relativ sind, erstellt man im Rootverzeichnis des Projekts eine Konfigurationsdatei ‚vue.config.js‘ mit folgendem Inhalt:

module.exports = { publicPath: ''};

Dann einfach neu distributieren und die Pfade sollten relativ sein, also js/chunk-vendors.3b8d20eb.js

Contao, htaccess Trailing Slash entfernen

Möchte man bei einer Contao Installation den Trailing-Slash einer URL entfernen bzw. umleiten, so dass aus:

http://localhost/home/

http://localhost/home

wird. So kann man in der .htaccess folgenden Block innerhalb eines mod-rewrites Block (falls schon vorhanden) ergänzen:

<IfModule mod_rewrite.c>
    RewriteEngine On

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)/$ /$1 [R=301,L]
...
</IfModule>

VueJS/JS/Axios: Scope

Möchte man via JS/VueJS über Axios einen API-Call machen und anschließend eine Funktion aufrufen, kommt einem unter Umständen der Scope in die Quere. Dazu folgendes Beispiel, so wie ich es im ersten Versuch definieren würde:

axios.post(‚http://localhost:4000/api/customer/get/‘) .
.then(function (response) {
this.customer_data = response.data;
})

Problem ist die Anweisung this.customer_data, denn this bezieht sich auf das Axios Objekt und nicht auf das übergeordnete Objekt/Scope.

Contao: Template / Darstellung im Backend

Weil ich es immer mal wieder vergesse, hier die Erklärung, wie man die Darstellung eines Frontend-Templates im Backend von Contao einfach beeinflussen kann.

Grundsätzlich wird der Code der im Template steht auch im Backend ausgeführt, es sei denn man unterscheidet im Frontend-Template selbst, z.B. auch in einem Custom Element Template, zwischen Front- und Backend und das geht so.

MacOS Sierra: SFTP

Nachdem ich mir neben meinen lokalen Rechnern mit Linux und Windows ein Macbook Air für den mobilen Einsatz zugelegt habe, bleibt es nicht aus seinen Workflow zumindestens zum größten Teil unter MacOS herzustellen. Da ich mittlerweile vorzugsweise via SFTP auf Servern direkt arbeite, musste ich herausfinden, wie man SFTP in den Findern von MacOS integrieren kann. Leider ist das bei MacOS nicht so einfach, wie beispielsweise bei Ubuntu, wo man out-of-the-box SFTP-Verbindungen einrichten kann. MacOS Sierra: SFTP weiterlesen