Unable to Set Up Vite with Statamic SSG on Netlify

[JoshSalway]

Bug description

When deploying a Statamic site with Vite and SSG on Netlify, Vite assets (CSS/JS) are not properly handled in the final static output. Locally, the build process works perfectly with php please ssg:generate, but on Netlify:

The generated static files either miss Vite assets or fail to link them properly. The build process does not integrate Vite and SSG effectively during deployment. Expected behavior:

Vite-processed assets (CSS/JS) should be correctly linked in the final static files generated by Statamic's SSG.

How to reproduce

How to Reproduce Set up a fresh Statamic site with Vite for asset management. Add the following build command in netlify.toml:

[build]
  command = "npm run build && php please ssg:generate"
  publish = "storage/app/static"

Deploy the site to Netlify. Observe the deployed site—Vite assets are either missing or improperly linked.

Logs

No specific errors in the build logs, but the generated CSS and JS files are missing or not linked in the output files in storage/app/static.

Environment

Environment
Here is the output of php please support:details:

Statamic Version: 5.0
Laravel Version: 11.31
Statamic SSG Version: 3.1
PHP Version: 8.2
Node.js Version: 16
Netlify Build Environment: Default

Installation

Fresh statamic/statamic site via CLI

Additional details

Vite Configuration (vite.config.js):

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/site.css',
                'resources/js/site.js',
            ],
            refresh: true,
        }),
    ],
    build: {
        outDir: 'public/build',
        assetsDir: '',
    },
});

Netlify netlify.toml:

[build]
  command = "npm run build && php please ssg:generate"
  publish = "storage/app/static"

[build.environment]
  NODE_VERSION = "16"
  PHP_VERSION = "8.2"

See related post on Netlify community page: https://answers.netlify.com/t/statamic-ssg-at-netlify-failed-to-load-a-stylesheet-from-a-url/111185

[JoshSalway]

Additional Details and Debugging Efforts

Build Command Variations • I’ve tried multiple variations of the netlify.toml build command, including:

command = "npm run build && php please ssg:generate"
publish = "storage/app/static"

and alternative paths like public/storage/app/static or build/storage/app/static. None resolved the issue.

Asset Manifest Troubleshooting • The manifest.json generated by Vite is consistently missing or not correctly linked in the output files. Even when manually placing the file in the expected location, the links remain broken.

Testing with base Configuration • Adjusting the base in vite.config.js (e.g., /, /storage/app/static/, /public/build) hasn’t changed the outcome. Could this be an issue with how Statamic SSG resolves asset paths?

Comparison with Local Build • Running the exact same build process locally (npm run build && php please ssg:generate) works flawlessly, with all assets linked correctly. The problem only occurs in the Netlify deployment environment.

Questions for Statamic/Vite Developers 1. Statamic Integration with Vite: Could there be an inherent issue with how Statamic’s SSG interacts with Vite’s manifest during deployment on platforms like Netlify? Is there any documentation or best practice for this specific use case? 2. Using Alternative Tools: Would switching to Laravel Mix or another asset bundler resolve this issue? Is there a recommended alternative for managing assets in a Statamic site? 3. Dynamic Asset Paths in SSG: Is there a way to configure dynamic paths for assets during SSG that better match the Netlify hosting environment?

Future Considerations

If no clear resolution is found, I’m considering migrating to Vercel or another platform to see if their build pipeline is more compatible with this setup. Would the Statamic or Vite team have any recommendations on preferred hosting providers for similar setups?

[JoshSalway]

Follow-Up: Asset Duplication and Incorrect Linking Persists

Hi Statamic Team,

I've implemented the following configurations based on earlier suggestions to resolve the asset duplication and linking issues:

1. Vite Configuration (vite.config.js):

• Set base: './' to ensure relative asset paths.
• Configured outDir to public/build and organized assets under assets/.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  base: './',
  plugins: [
    laravel({
      input: [
        'resources/css/site.css',
        'resources/js/site.js',
      ],
      refresh: true,
    }),
  ],
  build: {
    outDir: 'public/build',
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name]-[hash].js',
        chunkFileNames: 'assets/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]',
      },
    },
    chunkSizeWarningLimit: 1000,
  },
});

2. Statamic SSG Configuration (ssg.php):

• Mapped public/build/assets to assets/build to prevent nested duplication.

'copy' => [
    public_path('assets') => 'assets', // For static assets like images, fonts
    public_path('build/assets') => 'assets/build', // For Vite-built assets
    public_path('css') => 'css',
    public_path('js') => 'js',
    public_path('favicon.ico') => 'favicon.ico',
],

3. Template Adjustment:

• Updated templates to use the vite tag with directory="assets/build".

{{ vite src="resources/css/site.css|resources/js/site.js" directory="assets/build" }}

Netlify Configuration (netlify.toml):

• Set build command to "npm run build && php please ssg:generate".
• Set publish directory to "storage/app/static".

[build]
  command = "npm run build && php please ssg:generate"
  publish = "storage/app/static"

[build.environment]
  NODE_VERSION = "16"
  PHP_VERSION = "8.2"

Current Outcome:

• Asset Duplication: Assets are still appearing in both dist/assets/assets/ and dist/assets/build/assets/ on Netlify.
• Incorrect Asset References: index.html is referencing assets using /build/assets/, causing broken links since assets are served from /assets/build/.

Questions:

1. Is this a known bug with Statamic's SSG when integrated with Vite on Netlify?
2. Are there additional configuration steps required to align asset paths correctly and prevent duplication?
3. How does Statamic's SSG handle Vite's manifest.json during deployment, and is there a recommended approach to ensure it's correctly utilized?

Any insights or recommendations would be greatly appreciated. If this is a bug, could you provide guidance on how to proceed or any workarounds?

Thank you for your support!

[JoshSalway]

@duncanmcclean thanks for transferring to SSG codebase. Anyone got any ideas to fix these issues?

[bubblemediauk]

@JoshSalway did you find a resolution for this please? I have exactly the same problem

[JoshSalway]

@JoshSalway did you find a resolution for this please? I have exactly the same problem

It wasn't fixed but got the hosting working but not ideal

[duncanmcclean]

When deploying a Statamic site with Vite and SSG on Netlify, Vite assets (CSS/JS) are not properly handled in the final static output. Locally, the build process works perfectly with php please ssg:generate, but on Netlify:

When you say "Vite assets are not properly handled in the final static output". What are you referring to? The URLs in the <head>?