PACKAGE.JSON

Ex: package.json | Line 20

1. Update ucd-theme-tasks dependency to ^5.1.0 

2. Remove "--no-serve" from the dev command in "scripts"

   "ucd-theme-tasks dev --no-serve" to just "ucd-theme-tasks dev"

*.LIBRARIES.YML

Ex sf1subtheme.libraries.yml | Line 4

1. Add vite: true to any library that needs processing by vite.

2. Change the path from "/dist" to wherever the source file is. Also change "css" to "scss" if using sass.

   Change dist/style.css to sass/style.scss
   Change dist/main.js to js/main.js

VITE.CONFIG.MJS

Ex: vite.config.mjs

1. Create a vite.config.mjs in the root of your theme.

2. Add the following code into it:

   export { default } from 'ucd-theme-tasks/vite.config.mjs'

SETTINGS.LOCAL.PHP

This file exists at /docroot/sites/default/settings.local.php

1. To watch and reload files during development, add the following config to the bottom of the file.

$settings['vite'] = [
  'useDevServer' => TRUE,
  // Disable the base sitefarm_one theme watch.
  'overrides' => [
    'sitefarm_one' => [
      'useDevServer' => FALSE,
    ]
  ],
];

REMOVE THE FILES NO LONGER NEEDED

• hmr/index.html directory and file
• snowpack.config.js file

UPDATE ANY SASS USING BREAKPOINT

1. Change @use "breakpoint" as *; to @use "breakpoint-sass" as *;

INSTALL NODE PACKAGES

1. Run npm install

TROUBLESHOOTING

If the dev server does not appear to be watching changes. Check that the url is using is http://localhost:5173. If it is something other than this, you can tell drupal to look to that url in settings.local.php

# Vite dev server url, by default http://localhost:5173. 
$settings['vite'] = [ 
  'devServerUrl' => 'http://127.0.0.1:5173', 
];