Laravel, artisan serve, and HTTPS
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:
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:
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 >, > >); - 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:
lang="getLocale()) >>"> charset="utf-8"> name="viewport" content="width=device-width, initial-scale=1"> Test @vite('resources/css/app.css') class="antialiased"> Test HTTPS 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!