Usage with Homestead about craft-vite HOT 6 CLOSED

BOOM! You sir, have made my day!

Thanks so much for your help!

from craft-vite.

As I'm running it via Homestead, do I need to use the devServerInternal and checkDevServer options? I'm not really sure what to put in there or what I'd need to configure on the Homestead VM.

No, you don't.

'devServerPublic' => 'http://localhost:3000/',

This probably should be whatever your Homestead VM is IP, it's listed in your Homestead.yaml file. Mine is 192.168.10.10 so my settings would be:

'devServerPublic' => 'http://192.168.10.10:3000/',

...or if you set up hostnames, you can use them too.

Also you'll want to make one small change to the vite.config.js to be compatible with the latest Vite 2.3.0 on Homestead, which is to add this:

  server: {
    host: '0.0.0.0',
  },

So it'd look like this:

import legacy from '@vitejs/plugin-legacy'
import ViteRestart from 'vite-plugin-restart';

// https://vitejs.dev/config/
export default ({ command }) => ({
  base: command === 'serve' ? '' : '/dist/',
  build: {
    manifest: true,
    outDir: './web/dist/',
    rollupOptions: {
      input: {
        app: '/src/js/app.ts',
      }
    },
  },
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    }),
    ViteRestart({
      reload: [
          './templates/**/*',
      ],
    }),
  ],
  server: {
    host: '0.0.0.0',
  },
});

The article has been updated with this information: https://nystudio107.com/blog/using-vite-js-next-generation-frontend-tooling-with-craft-cms

Also make sure you are running all of your vite commands inside of your Homestead VM.

from craft-vite.

Thanks a lot - that's great and makes sense re the devServerPublic. 🙏

If I run the npm run dev command inside Homestead, it runs, and going to my local domain in the browser loads the page with the styles etc. However, changing and saving the js, css, or twig file from my code editor does nothing.

If I SSH into Homestead and change the files in the terminal using nano it reloads as expected. Is this likely to be something wrong with my setup or with my config?

Here is my folder structure (I'm running all commands from the root (my-site) dir.

my-site/
├── craft/
│   ├── config/
│   │   └── vite.php
│   ├── templates/
│   |   └── index.twig
|   └── web/
├── src/
│   └── js/
│       └── app.js
└── vite.config.js

Appreciate any pointers but if this is nothing to do with the plugin, feel free to send me on my way 😅

from craft-vite.

Oh - for Homestead, you have to turn polling on (it's the same with webpack or anything that uses chokidar to watch files).

Something like this:

import legacy from '@vitejs/plugin-legacy'
import ViteRestart from 'vite-plugin-restart';

// https://vitejs.dev/config/
export default ({ command }) => ({
  base: command === 'serve' ? '' : '/dist/',
  build: {
    manifest: true,
    outDir: './web/dist/',
    rollupOptions: {
      input: {
        app: '/src/js/app.ts',
      }
    },
  },
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    }),
    ViteRestart({
      reload: [
          './templates/**/*',
      ],
    }),
  ],
  server: {
    host: '0.0.0.0',
    watch: {
        usePolling: true,
    },
  },
});

refs: https://vitejs.dev/config/#server-watch & https://github.com/paulmillr/chokidar#api

from craft-vite.

I'm having a similar issue w/Homestead. Can't get the npm run dev to load the site https://localhost:3000/ inside the homestead box. I get the following error:

This site can’t be reached. localhost refused to connect.

Running npm run build to generate the build files, changing 'useDevServer' => false' and accessing the Craft project via hostname (https://domain.test') shows the craft vite plugin working properly.

Under the server block in vite.config.js I have the following:

server: {
  host: '0.0.0.0',
  https: true,
  watch: {
    usePolling: true,
  },
}

and config/vite.php is set to

<?php

use craft\helpers\App;

return [
   'useDevServer' => App::env('ENVIRONMENT') === 'dev',
   'manifestPath' => '@webroot/dist/manifest.json',
   'devServerPublic' => App::env('DEFAULT_SITE_URL'),
   'serverPublic' => App::env('DEFAULT_SITE_URL') . '/dist/',
   'errorEntry' => 'src/js/app.js',
   'cacheKeySuffix' => '',
   'devServerInternal' => '',
   'checkDevServer' => false,
   'includeReactRefreshShim' => false,
   'includeModulePreloadShim' => true,
   'criticalPath' => '@webroot/dist/criticalcss',
   'criticalSuffix' =>'_critical.min.css',
];

Switching devServerPublic to https://localhost:3000/ makes no difference

from craft-vite.

@siebird port 3000 is the port that the devServer runs off of. You load your website from the normal URL you always do.

The idea is that combined with the Vite plugin, your website will load your JS/CSS, etc. from the devServer

See this comment: #3 (comment)

from craft-vite.