←Back

Disclosure: This was the most difficult part. I think this youtube video finally made things work, so I hope the below instructions are complete, otherwise refer to said video or the sources at the end of this note.

Hosting

I use c-panel hosting on hostinger (silver plan if that still exists), with a separate domain for this project (spicemixes.nl). Hostinger also has non-c-panel plans, which work differently.

Steps

Compiling your front-end

  1. Run this in vscode to compile svelte into your public/build folder.
npm run build

  1. Then zip your public folder and extract it to your public_html, a subfolder if that’s what you’re using, or e.g. spicemixes.nl if you added a second domain to your hosting plan (which I did).

  2. zip the rest of the project to your backend folder, in the root of your file management system (e.g. in my case this was ‘spicemixes’). you can remove everything in public, except for build/manifest.json (but leaving everything there doesn’t cause problems I think)

    For example, my folder/file structure (from root) for backend (spicemixes) and frontend (spicemixes.nl), looks like this;

    image.png

    I already included the .htaccess in the git repository in the public folder, but you can change this if you want to lock your site behind a general password before launching, for example. It should be in the public folder contents.

  3. To connect to your online database, edit the .env file in the back-end folder, with the right credentials for your database. Refer to these in cpanel to view databases and create new credentials;

image.png

  1. in your .env, you can also add email credentials, which cpanel allows you to generate. → see how to setup email
  2. choose your log_level in .env, From ‘debug’→ all alerts, to ‘critical’ for only critical issues. (DEBUG – INFO – WARNING – ERROR – CRITICAL) from most to least messages. For production, you probably don’t want to set this to debug.
  3. Now, replace your index.php with something akin to this, depening on your backend folder location and name (replace ‘spicemixes’ with the name of your backend folder).
<?php

use Illuminate\\Http\\Request;

define('LARAVEL_START', microtime(true));

// Determine if the application is in maintenance mode...
if (file_exists($maintenance = __DIR__.'/../spicemixes/storage/framework/maintenance.php')) {
    require $maintenance;
}

// Register the Composer autoloader...
require __DIR__.'/../spicemixes/vendor/autoload.php';

// Bootstrap Laravel and handle the request...
(require_once __DIR__.'/../spicemixes/bootstrap/app.php')
    ->handleRequest(Request::capture());
  1. Now, go to cpanel→advanced→terminal and run the following commands to install dependencies and create and seed databases (im not sure if there were other steps in between, i dont think there were);
cd yourbackendfolder
composer install
php artisan migrate 
php artisan db:seed