Vite
Peak ships with a simple Vite config file to compile your assets and hot serve your website. When you want to use self-signed certificates and Browsersync to test your local website on local mobile devices, you can expand the config.
Vite advanced config
Install Browser Sync:
npm i vite-plugin-browser-sync
1
Add a sync
option to your scripts in package.json
:
"scripts": {
"dev": "vite",
"watch": "vite",
"sync": "VITE_BROWSERSYNC=true vite",
"build": "vite build",
"production": "vite build"
},
1
2
3
4
5
6
7
2
3
4
5
6
7
Update your vite.config.js
:
import laravel from 'laravel-vite-plugin'
import { defineConfig, loadEnv } from 'vite'
import { networkInterfaces } from 'os'
import VitePluginBrowserSync from 'vite-plugin-browser-sync'
/** @type {import('vite').UserConfig} */
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '')
const ip = Object.values(networkInterfaces()).flat().find((i) => i.family === 'IPv4' && !i.internal)?.address
const isSecuredSite = env.APP_URL.startsWith('https://')
const url = env.APP_URL
const host = url.replace(/^https?:\/\//, '')
const useBrowserSync = env.VITE_BROWSERSYNC && ip
if (useBrowserSync && isSecuredSite) {
console.log('\x1b[31m%s\x1b[0m', 'Sorry, we didn\'t manage to get BrowserSync working with secured sites.');
console.log('\x1b[31m%s\x1b[0m', 'If you can provide a solution, please enlighten us (https://github.com/studio1902/statamic-peak/pulls).');
process.exit(1)
}
return {
plugins: [
laravel({
refresh: true,
valetTls: isSecuredSite ? host : false,
input: [
'resources/css/site.css',
'resources/js/site.js',
]
}),
(() => {
return useBrowserSync ? VitePluginBrowserSync({
dev: {
bs: {
proxy: url,
notify: false,
open: 'external',
},
},
}) : null;
})()
],
server: {
host: useBrowserSync ? ip : host,
open: useBrowserSync ? false : url,
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48