Combell webhosting

TIP

As a student of Thomas More, you are entitled to free web hosting and a free .be domain name at combell.com

Login at https://www.academicsoftware.eu/ and select Combell Web hosting ( Linux)
Request a License and follow the instructions on the page
(IMPORTANT: only .be domain names are free!)

Update PHP settings

Login to your Combell dashboard: https://my.combell.com/
Click on Manage website
Click on PHP settings
- General: select the same PHP version as the PHP version on your local environment (PHP 8.3)
- php.ini directives: the default settings are ok, but if your project requires some extra's, you can change them here

Add a subdomain

Create a new subdomain for your Laravel site, e.g. https://vinylshop.yourDomain.be (replace yourDomain.be with your real domain name)

Click on Websites & SSL
Domain name: vinylshop.yourDomain.be
Uncheck: Use the /subsites/vinylshop.yourDomain.be folder as the home directory of your website
Folder on the server: /vinylshop/public
Update your SSL settings
Click on the button Enable Let's Encrypt and then activate Forcing HTTPS

Put your website online

Compile your assets for production

The assets app.css and app.js are not production ready and should be minified/optimized using the command npm run build.
See also Config -> Laravel Vite -> Compile for production.

html

<head>
    <meta charset="UTF-8">
    ...
    <link rel="stylesheet" href="https://vinylshop.it-fact.be/build/assets/app.9d96761f.css" />
    <script type="module" src="https://vinylshop.it-fact.be/build/assets/app.ab93cf8a.js"></script>
</head>

Configure PhpStorm for deployment

Open the SSH settings for your site (you need the SSH settings in PhpStorm)
In PhpStorm, go to the menu Tools -> Deployment -> Configuration
- Click on the + sign to add a new configuration
- Choose SFTP as the type of connection and name the configuration Combell
Click on the ... button next to the SSH configuration
Fill in the SSH configuration with the data you can find in your dashboard under SSH access
- Click on Test SFTP connection to check if the connection is working
- Click on OK to save the configuration
Back on the Connection tab:
- Set the Root path to the vinylshop folder on your hosting (you can use the Browse button to find the correct folder)
- Add the Web server URL for your site (e.g. https://vinylshop.yourDomain.be)
Click on the Mappings tab:
- Set the Deployment path to / (the root of your hosting)
- Set the Web path to the / folder of your Laravel project
Click on OK to save the configuration

Upload the files to your hosting

Click on the Remote Host icon in the right toolbar of PhpStorm and connect to the Combell host
Select all folders in your Laravel project (except the node_modules and tests folders)
Right-click on the selected folders and choose Deployment -> Upload to Combell
Wait until all files are uploaded to your hosting (this can take a while)
Select the .env and composer.json files and upload them to the hosting as well

Clean up the database and the public folder

Open the REMOTE database folder and delete all files and folders, except the database.sqlite file
Open the REMOTE public folder and delete the hot file and the storage folder (the storage folder must be a symlink to the storage folder and not a real folder)

Create a symlink for the covers

Open you local web.php file and add a route to create a symlink

php

Route::get('/symlink', function () {
    Artisan::call('storage:link');
});

Upload web.php to your hosting
Open the route vinylshop.yourDomain.be/symlink in your browser
(You only see a blank page, but the symlink will be created)
Remove the route from web.php and upload web.php to your hosting
Open one of the pages relying on the database (e.g. the shop master page) to test the remote database connection and the symlink

Update the remote .env file

Double-click the REMOTE .env file to open it in PhpStorm

Disable debugging on the production server and set the correct APP_URL

bash

APP_NAME="The Vinyl Shop"
APP_ENV=production                                  # change from local to production
APP_KEY=base64:e77jPGGcqZ4sNADHI5f/icC+LFnBw34hpRJKSf2ftnI=
APP_DEBUG=false                                     # change from true to false
APP_TIMEZONE=Europe/Brussels
APP_URL=https://vinylshop.yourDomain.be             # set the URL to your domain

By setting APP_DEBUG=false, visitors will get a 500 | Server Error (instead of detailed error information) if something goes wrong

TIP

Set the variable APP_DEBUG TEMPORARILY to true if you need to solve errors in your production environment (as then more info on the errors will be shown, just as in your local development environment)

Configure a real mail server

TIP

From now on it's best to use REAL mail addresses (to send your mail from), as fake sender mail addresses (like @example.com or @mailinator.com) will probably show up in your spam folder
Your application (contact page, reset password page) needs a real outgoing mail server (SMTP server) to send out the emails

Go to https://my.combell.com/en/product/email
Add a new mailbox, e.g. admin@yourDomain.be
The values of the MAIL_... variables can be found at just created mailbox

bash

MAIL_MAILER=smtp
MAIL_HOST=smtp-auth.mailprotect.be      # change from 127.0.0.1 to smtp-auth.mailprotect.be
MAIL_PORT=465                           # change form 1025 to 465
MAIL_USERNAME=admin@yourDomain.be       # your email address
MAIL_PASSWORD=xxxxx                     # your email password
MAIL_ENCRYPTION=ssl                     # change from null to ssl
MAIL_FROM_ADDRESS=admin@yourDomain.be   # your email address
MAIL_FROM_NAME="${APP_NAME}"

Save the remote .env file by clicking on the Upload Current Remote File button from the toolbar

WARNING

If you have not already done so, add a new user with a REAL email address (your Thomas More mail address, Gmail, Hotmail, etc.) to the users table of your remote database

Try to reset the password for your real mail address
Check your mailbox

TIP

You can set your primary mailbox as a catch-all mailbox (so that all emails sent to your domain will be forwarded to your primary mailbox)

Updates and maintenance

A Laravel application is a never ending story ...
- When you delete a local file, don't forget to delete the file from your remote host as well
- When you add/update a file like a controller, middleware, web routes, ... you can upload them individually to your remote host
- When you update your composer packages (with composer update), it's best to delete the whole external _ vendor_ folder and upload it again
- When you add/update resources/js/app.js, resources/css/app.css or files in resources/views/ folder, read the IMPORTANT NOTE below!

IMPORTANT

When you add/update resources/js/app.js, resources/css/app.css or files in the resources/views/ folder:

Stop the development server
Rebuild the assets (run npm run build) for production
Delete the folder public/build and on the remote server
Upload the new public/build to the remote server
Upload the added/updated files in the resources/views folder to the remote server
IMPORTANT: if the file public/hot exists on the remote server, delete it!!!
Restart the development server

More about the hot-file

When running in development mode (npm run dev) on your local machine, the public/hot-file is automatically created and contains an IP address of the localhost (e.g. http://127.0.0.1:5173)
- Now look at the source code of one of the files in the browser
- All scripts and stylesheets are loaded from this IP address

html

<head>
    <meta charset="UTF-8">
    ...
    <script type="module" src="http://127.0.0.1:5173/@vite/client"></script>
    <link rel="stylesheet" href="http://127.0.0.1:5173/resources/css/app.css"/>
    <script type="module" src="http://127.0.0.1:5173/resources/js/app.js"></script>
</head>

When running the production script (npm run build), the public/hot-file will be removed
- Now look again at the source code of the file in the browser
- All scripts and stylesheets are loaded from the URL (vinyl_shop.test) and de stylesheet and JavaScript files are minified
  (The hashes 9d96761f and ab93cf8a in the filename changes every time the script runs)

html

<head>
    <meta charset="UTF-8">
    ...
    <link rel="stylesheet" href="https://vinyl_shop.test/build/assets/app.9d96761f.css" />
    <script type="module" src="https://vinyl_shop.test/build/assets/app.ab93cf8a.js"></script>
</head>

REMARK

That's the reason why you should delete the public/hot file on the remote server and upload the new public/build folder whenever you run npm run build and publish the update to the remote server.

Caching problems

When you update your application, you may have some caching problems like the old version of a file is still loaded
To solve this problem, you have to delete the cache on the remote server
- Open the folder bootstrap/cache on the remote server
- Delete all files in this folder
- DON'T delete the folder bootstrap/cache itself!

Combell webhosting ​

Update PHP settings ​

Add a subdomain ​

Put your website online ​

Compile your assets for production ​

Configure PhpStorm for deployment ​

Upload the files to your hosting ​

Clean up the database and the public folder ​

Create a symlink for the covers ​

Update the remote .env file ​

Disable debugging on the production server and set the correct APP_URL ​

Configure a real mail server ​

Updates and maintenance ​

More about the hot-file ​

Caching problems ​

Combell webhosting

Update PHP settings

Add a subdomain

Put your website online

Compile your assets for production

Configure PhpStorm for deployment

Upload the files to your hosting

Clean up the database and the public folder

Create a symlink for the covers

Update the remote .env file

Disable debugging on the production server and set the correct APP_URL

Configure a real mail server

Updates and maintenance

More about the hot-file

Caching problems