Deploying your app

There is no strict way to deploy your app. However, your front-end and your back-end should be hosted as different virtual hosts (preferably on the same server).

caution

In order to make sure sessions are cleaned up, you need to enable cronjobs. Please see Sessions for more info

Building the front-end

Quasar allows you to build your app in multiple ways, for example you can build a desktop app via Elektron.

Building a web version

The most simple way is a web version. Make sure you change your .env files both for back-end and front-end to match the new endpoints.

To build, simply run:

quasar build

Quasar has now published all files to dist/spa

Setting up vhosts

Ngninx

Once you have pulled your back-end and your front-end production build, you may use the following vhosts as an example:

The Laravel back-end: /etc/nginx/sites-enabled/qore-api.qlic.dev:

/etc/nginx/sites-enabled/qore-api.qlic.dev

server {
    listen 80;
    listen [::]:80;

    root /var/www/qore-api.qlic.dev/public;
    index index.php;

    charset utf-8;

    server_name qore-api.qlic.dev www.qore-api.qlic.dev;

    location / {
      try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
      include snippets/fastcgi-php.conf;
      fastcgi_pass unix:/run/php/php8.0-fpm.sock;
      fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;

    error_page 404 /index.php;

    location ~ \.php$ {
      include snippets/fastcgi-php.conf;
      fastcgi_pass unix:/run/php/php8.0-fpm.sock;
      fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
      include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
      deny all;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/qore-api.qlic.dev/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/qore-api.qlic.dev/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

The Quasar frontend: /etc/nginx/sites-enabled/qore-frontend.qlic.dev:

/etc/nginx/sites-enabled/qore-frontend.qlic.dev

server {
    server_name qore-frontend.qlic.dev;

    root /var/www/qore-api.qlic.dev/frontend/dist/spa;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location = /robots.txt  { access_log off; log_not_found off; }

    #access_log off;
    #error_log  /var/log/nginx/qore-frontend.qlic.dev-error.log error;

    location ~ /\.(?!well-known).* {
        deny all;

    listen [::]:443 ssl; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/qore-frontend.qlic.dev/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/qore-frontend.qlic.dev/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
    if ($host = qore-frontend.qlic.dev) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80;
    listen [::]:80;
    server_name qore-frontend.qlic.dev;
    return 404; # managed by Certbot
}

Deploying with Deployer and Shipit

For local deploying your Qore application you can use deployer with shipit, deployer deploys te Api side of the application and Shipit deploys your frontend.

If you wish to use these two tools for deploying your application, here you can find the configuration files:

caution

Please make sure you have ssh access to the server (with pub key added to authorized_keys)

Deployer

deploy.php

<?php
namespace Deployer;

require 'recipe/laravel.php';

// Config
set('application', 'skeleton-v2');
set('deploy_path', '~/{{application}}');
set('repository', 'git@gitlab.qlic.nl:qore/skeleton-v2.git');

add('shared_files', []);
add('shared_dirs', []);
add('writable_dirs', []);

// Hosts
host('qore-api.qlic.nl')
    ->set('user', 'qore-api')
    ->set('hostname', 'qore-api.qlic.nl')
    ->set('deploy_path', '/var/www/vhosts/{{hostname}}/httpdocs');

// Tasks
task('build', function () {
    cd('{{release_path}}');
    run('npm run build');
});

after('deploy:failed', 'deploy:unlock');

Now for deploying your backend you can run:

php vendor/bin/dep deploy

Shipit

frontend/shipitfile.js

module.exports = shipit => {
    // Load shipit-deploy tasks
    require('shipit-deploy')(shipit)

    shipit.initConfig({
        default: {
            deployTo: '/var/www/vhosts/qore-frontend.qlic.nl/httpdocs',
            repositoryUrl: 'git@gitlab.qlic.nl:qore/skeleton-v2.git'
        },
        staging: {
            branch: 'develop',
            servers: 'qore-frontend@qore-frontend.qlic.nl'
        }
    })

    shipit.blTask('install', async () => {
        await shipit.remote(
            'export PATH="$(yarn global bin):$PATH" &&
        cd ${shipit.releasePath} &&
        cd frontend && cd src && git clone git@gitlab.qlic.nl:qore/qore-frontend.git qore && 
        cd .. && yarn && cp.env.staging.env && quasar build`
        )
    })

    shipit.on('updated', async () => {
        await shipit.start('install')
    })
}

For deploying your frontend you can run:

npx shipit staging deploy