1. LARAVEL 10 - LARAGON - VITE - Introduction
Let me show you how to configure VITE in your LARAVEL 10 projects to make them work seamlessly with a LARAGON local web development server and make your projects available on every device in your LAN.
2. LARAVEL 10 - LARAGON - VITE - Problem description
When developing LARAVEL projects on a local development server like XAMPP or LARAGON on a Microsoft Windows machine, you’ll have no problems accessing your projects on the local development machine itself.
But what if you want to access those projects from all other devices inside your local area network, even tablets and smartphones? And what if you need those project to be served using SSL (https), maybe because your project wants to access a smartphone camera (wich is only possible in https served applications)?
Let’s explore a possible solution. It contains 2 parts :
- create a DNS record
- configure Vite
3. LARAVEL 10 - LARAGON - VITE - DNS in your LAN
a. The problem
Because development servers like XAMPP and LARAGON can serve multiple projects at the same time from the IP address of your local development machine, you’ll need to fiddle around with serving them on different ports on that machine to make them available in a LAN. This is not the proper way of doing things and makes configuring your local development server and your individual projects a real mess.
The best way to access your projects from the LAN is by using the domain names provided by the development server. In LARAGON they look like my-project-1.test, myproject-2.test, demo.test, etc.
b. The solution
Development servers like LARAGON and XAMPP use host files to map your individual projects to the IP address of your local development machine.
127.0.0.1 my-project-1.test
127.0.0.1 my-project-2.test
127.0.0.1 my-project-3.test
But this works only on that specific machine itself. Ofcourse you could addept the host files on all other machines in your LAN, but this becomes difficult on tablets and smartphones.
The best solutions is to use a DNS server in your LAN.
Most routers allow you to add DNS records. You could add them there.
Me myself, I use a permanent Pi-hole server to block adds in my LAN. Because I configured the IP address of the Pi-hole server as the primary DNS server in my router, all devices in my LAN will pass through my Pi-hole server.
So I ended up adding the needed DNS records to my Pi-hole server.
This way all my projects will be accessible from every device in the LAN through their domain names, wich all point to the IP address of my local development machine (where LARAGON can take care of regulating the traffic to the correct application).
4. LARAVEL 10 - LARAGON - VITE - Configuration
a. .env
Suppose the domain name of your project name is my-project-1.test.
In your LARAVEL my-project-1 project, open the file .env and adjust the following at the top :
APP_URL=https://my-project-1.test/Be aware to specify https instead of http!
Then add the following at the bottom :
VITE_ASSET_HOST="my-project-1.test"
VITE_ASSET_PORT=5173
VITE_PRIVKEY_PATH="c:/laragon/etc/ssl/laragon.key"
VITE_CERT_PATH="c:/laragon/etc/ssl/laragon.crt"If needed, adjust the path to your LARAGON installation.
Read my previous post on how to enable SSL and integrate a SSL certificate in LARAGON.
b. vite.config.js
Open the file vite.config.js.
In a fresh LARAVEL 10 project, it looks like this:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});
Now adjust the file like this :
import { defineConfig, loadEnv } from 'vite';
import laravel from 'laravel-vite-plugin';
import fs from 'fs';
const env = loadEnv('all', process.cwd());
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
server: {
host: true,
port: env.VITE_ASSET_PORT,
strictPort: true,
hmr: {
host: env.VITE_ASSET_HOST,
port: env.VITE_ASSET_PORT,
},
https: {
key: fs.readFileSync(env.VITE_PRIVKEY_PATH),
cert: fs.readFileSync(env.VITE_CERT_PATH),
},
},
});
Notice that we changed the following :
- we added loadEnv to the ‘vite’ import (to be able to access the .env file)
- we import fs (to be able to access the filesystem)
- we load loadEnv and assign it to the constant env
- we added a server object containing the values we previously added to the .env file
5. LARAVEL 10 - LARAGON - VITE - Finalisation
In this configuration, there’s no need to run the command php artisan serve because LARAGON will do the web hosting instead.
a. npm run dev
When you run the command npm run dev, your application wil compile all assets dynamically (HMR or Hot Module Replacement) to your LARAGON webserver. This means that everything you change in your IDE (for instance Visual Studio Code) will be automatically pushed live to your LARAGON server. The project website, opened in your browser, will then even refesh automatically every time you save a file in your IDE.
Use the URL https://my-project-1.test/ to access your application from any device in your LAN.
No need to access the project through the webserver IP address.
b. npm run build
When you run the command npm run build, your application will compile all assets once and serve them directly (static) in your LARAGON webserver.
Use the URL https://my-project-1.test/ to access your application from any device in your LAN.
