Laravel, artisan serve, and HTTPS

If you are working on a project with Laravel, you have more than one way to run it locally. You can use:

• Laravel Valet: runs Nginx in the background and using DnsMasq, Valet proxies all requests on the *.test domain to point to sites installed on your local machine";
• A web server with FPM (FastCGI Process Manager); in this case, you have to configure the web server manually;
• Laravel Sail: using the Docker approach, Sail is a light-weight command-line interface for interacting with Laravel Docker images. Sail provides a great starting point for building a Laravel application using PHP, MySQL, Redis, and Swoole (useful for Laravel Octane) using Docker images.
• Artisan Serve command: Use the php artisan serve command to start the Artisan development server. The Laravel development server under the hood uses the PHP built-in web server.

The Artisan development server

The Artisan development server uses the PHP built-in web server for running a process that listens to new HTTP connection and executes and runs PHP code.
You can start the HTTP listener with the command php artisan serve.
The HTTP listener default accepts connection from localhost and listens to connection on port 8000 and protocol HTTP (not HTTPS).
If you want to change the port, you can set in the .env file (in the directory of your project) the parameter SERVER_PORT.
For example, if you want to use port 8004:

SERVER_PORT=8004

Or, you can use the --port option in the command line:

php artisan serve --port=8004

If you want to accept connection from all the remote hosts (instead of only from localhost), you can set the host option as 0.0.0.0:

php artisan serve --port=8004 --host=0.0.0.0

But what if you want to start the local web server with HTTPS support?
The command php artisan serve doesn't support the HTTPS protocol.
But there is excellent news for us Laravel developers.

Vite

One of the tools distributed with Laravel is Vite.
Vite is a JavaScript development environment tool that helps to build and run web projects quickly. It is a lightweight alternative to tools like webpack, and it uses the native ES modules feature of modern browsers to perform hot-reloading during development. Vite also provides a built-in development server, which allows developers to start a local development server and preview their projects in a browser with minimal setup.
When building a Laravel Web application, Vite manages (build, preview) your Frontend files (Javascript, CSS).
One of the cool features of Vite is that it has the Hot Module Replacement, so while you are changing your layout or CSS or JavaScript file, Vite automatically detects the changes and reloads the front end. You don't have to wait to manually refresh the page in the browser to see the changes you are making to the code.

As mentioned in the Laravel official Web site about the Asset Bundling Vite : "Laravel integrates seamlessly with Vite by providing an official plugin and Blade directive to load your assets for development and production."

Now we are using Vite and Laravel with a special configuration.
We are going to run Vite, which listens the HTTP connection from the browser on port 5173. Then Vite will serve directly the static files managed by Vite (typically CSS, JS, etc.). For the other resources, Vite will forward (as a proxy) the requests to the Laravel web server (running on port 8000).

The command to execute Vite webserver is npm run dev.
With this configuration, we can use Vite to serve the response and accept the requests with HTTPS protocol.
So now we are going to do two things:

• setup Vite as a proxy for Laravel
• setup HTTPS for Vite.

Installing SSL Vite plugin

In order to activet the HTTPS protocol you have to generate and load local SSL certificates.
With Vite we have a plugin for HTTPS setup using an automatically generated self-signed certificate.
The plugin is vitejs/plugin-basic-ssl.
You can install it via npm:

npm install @vitejs/plugin-basic-ssl 

Configuring Vite

Now we have to focus on the file vite.config.js in the root folder of the Laravel project. You can set the content in this way:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
// 001 import the basicSsl Vite plugin
import basicSsl from '@vitejs/plugin-basic-ssl'

// 002 set the Laravel host and the port
const host = '127.0.0.1';
const port = '8000';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        // 003 load the basicSsl plugin
        basicSsl()
    ],
    // 004 set the server section
    server: {
        // 005 enabling the HTTPS
        https: true,
        // 006 setting the proxy with Laravel as target (origin)
        proxy: {
            '^(?!(\/\@vite|\/resources|\/node_modules))': {
                target: `http://${host}:${port}`,
            }
        },
        host,
        port: 5173,
        // 007 be sure that you have the Hot Module Replacement
        hmr: { host },
    }
});

Where you have to:

• 001 import the basicSsl Vite plugin
• 002 set the Laravel host and the port
• 003 load the basicSsl plugin
• 004 set the server section
• 005 enabling the HTTPS (https: true)
• 006 setting the proxy with Laravel as target (origin) (target)
• 007 be sure that you have the Hot Module Replacement (hmr)

Adjusting the Blade template

In the routes/web.php you can set a route for loading the index view:

Route::get('/', function () {
    return view('index');
});

In the index view resources/views/index.blade.php you can use the vite directives for loading the Vite assets:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    @vite('resources/css/app.css')
</head>

<body class="antialiased">
    Test HTTPS
</body>

</html>

Launching the services

Now you can launch two services:

• npm run dev for starting the Vite (with HTTPS thanks to the basicSsl plugin and the configuration we did;
• php artisan serve for starting the Laravel web server

Finally, you can open your browser to the page: https://localhost:5173
Probably the first time you accessed the page (a self-signed certificate serves that), you could see a warning page in your browser that asks you to accept access to a page with a self-signed certificate. So you can proceed and access your Laravel index page.

Icing on the cake: tmux

If you have installed tmux and you want to start both services in one terminal tab, you can setup a start.sh file:

tmux \
    new-session  'php artisan serve' \; \
    split-window 'npm run dev' \; \
    detach-client
tmux a

That's all :) now you can develop your project locally served by HTTPS, and if you change something in the frontend part, the browser will reload the page automatically.

If you have feedback or suggest some improvement, feel fee for writing a comment!
More HTTPS for everyone!