networkteam/neos-vite

There is no license information available for the latest version (0.3.0) of this package.

Integrate Vite for asset bundling into Neos CMS

0.3.0 2024-04-24 16:25 UTC

Requires

• ext-json: *
• neos/neos: ^8

Unknown License

README

Installation

Go to your site package:

cd DistributionPackages/Your.Site

1. Install the package via composer

composer require networkteam/neos-vite

1. Install Vite via NPM (or Yarn, pnpm):

npm install --save-dev vite

1. Create a vite.config.mjs file in your site package:

import { defineConfig } from "vite";

export default defineConfig((configEnv) => ({
  base: "./",
  build: {
    // generate .vite/manifest.json in outDir
    manifest: true,
    rollupOptions: {
      // overwrite default .html entry
      input: {
        footer: "Resources/Private/Javascript/footer.js",
        header: "Resources/Private/Javascript/header.js",
      },
      output: {
        // If you use this output option the Fusion object will just work™️
        dir: "Resources/Public/Dist",
      },
    },
  },
}));

1. You can now include Vite assets for development / production in your Fusion files:

header = Networkteam.Neos.Vite:Asset {
    entry = 'Resources/Private/Javascript/header.js'
}

This Fusion object will use a different include based on the FLOW_CONTEXT:

• Development: Loads entry from development server configured for the site (defaults to http://localhost:5173/)
• Production: Based on the generated manifest file it will include the hashed assets with CSS and recursive imports

By default the manifest is expected in Resources/Public/Dist, but that can be changed by overriding Fusion properties:

prototype(Networkteam.Neos.Vite:Asset) {
    // ...

    outputPathPattern = 'resource://{sitePackageKey}/Public/Dist'
    manifest = '.vite/manifest.json'
}

Multi-site

Configure individual Vite configurations for each site by adding a Vite setup with a corresponding vite.config.mjs file in each site package. Make sure to run each server on a different port by configuring the server.port option in the Vite configuration.

Add Settings for each site in your Settings.yaml:

Networkteam:
  Neos:
    Vite:
      server:
        # This is the default setting if no configuration part is found for the site package key
        _default:
          url: http://localhost:5173/

        # Specify server configuration for a specific site package key
        MyExample.Site:
          url: http://localhost:5174/

Make sure to run multiple Vite servers for each site package.