Installing Statamic + Peak into an existing Laravel application

[iuriemalai]

We can install a fresh Statamic together with Peak or we can install Peak into an existing, clean, Statamic installation. Statamic itself can be installed as a separate application or into an existing Laravel application. In the second scenario, followed by the installation of Peak, a small discrepancy appears at the level of the vite.config.js file - it does not contain/removes the files 'resources/css/app.css' and 'resources/js/app.js', required for the existing Laravel application, and the CORS and WATCH configs. To avoid manually editing vite.config.js, it would be very nice if these were included by default (perhaps through a separate option when installing Peak).

P.S. The problem is reversed when Statamic is installed without Peak (files 'resources/css/app.css' and 'resources/js/app.js' appear, but files 'resources/css/site.css' and 'resources/js/site.js' do not), but that does not matter, as long as Peak adds its own version of vite.config.js.

$ laravel new laravel-test.test --livewire

import {
    defineConfig
} from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        tailwindcss(),
    ],
    server: {
        cors: true,
        watch: {
            ignored: ['**/storage/framework/views/**'],
        },
    },
});

$ statamic new statamic-test.test

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/site.css', 'resources/js/site.js'],
            refresh: true,
        }),
        tailwindcss(),
    ],
    server: {
        watch: {
            ignored: ['**/storage/framework/views/**'],
        },
    },
});

$ statamic new statamic-peak.test studio1902/statamic-peak
OR
$ php please starter-kit:install studio1902/statamic-peak

import laravel from 'laravel-vite-plugin'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
    const env = loadEnv(mode, process.cwd(), '')
    return {
        build: {
            rollupOptions: {
                output: {
                    manualChunks: (id) => {
                        if (id.includes('node_modules')) return id.toString().split('node_modules/')[1].split('/')[0].toString();
                    }
                }
            }
        },
        plugins: [
            tailwindcss(),
            laravel({
                refresh: true,
                input: [
                    'resources/css/site.css',
                    'resources/js/site.js',
                ]
            })
        ],
        server: {
            open: env.APP_URL
        }
    }
});

vite.config.js combined/desired

import laravel from 'laravel-vite-plugin'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
    const env = loadEnv(mode, process.cwd(), '')

    return {
        build: {
            rollupOptions: {
                output: {
                    manualChunks(id) {
                        if (id.includes('node_modules')) {
                            return id
                                .toString()
                                .split('node_modules/')[1]
                                .split('/')[0]
                                .toString()
                        }
                    }
                }
            }
        },

        plugins: [
            tailwindcss(),
            laravel({
                refresh: true,
                input: [
                    'resources/css/app.css',
                    'resources/js/app.js',
                    'resources/css/site.css',
                    'resources/js/site.js',
                ],
            }),
        ],

        server: {
            cors: true,
            open: env.APP_URL,
            watch: {
                ignored: ['**/storage/framework/views/**'],
            },
        },
    }
})

[robdekort]

If I were to do that you'd get errors when you install Peak in a default way as app.css and app.js don't exist. What does the cors option do? We could include that by default if it it's useful.

[iuriemalai]

Ok, I'll have to do this manually if there's no other way. 😩😊

cors seems to be related to loading assets cross-origin. I don't know how important it is, but Laravel has it set to true.

[robdekort]

Afraid so, sorry :-)

[iuriemalai]

I just came across this, so if you're thinking about including cors in vite.config.js, maybe you shouldn't. 🙂

DANGER

Setting server.cors to true allows any website to send requests to your dev server and download your source code and content. We recommend always using an explicit list of allowed origins.

https://vite.dev/config/server-options#server-cors

[robdekort]

Hah good to know. I didn’t just wanna add it luckily.