vitejs / vite

Next generation frontend tooling. It's fast!
http://vite.dev
MIT License
68.14k stars 6.14k forks source link

Hot reloading server with php application #1751

Closed kobeaerts closed 3 years ago

kobeaerts commented 3 years ago

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

Describe the bug

I have the following vite.config.js

import includePaths from 'rollup-plugin-includepaths';

export default {
    base: '/resources/',
    build: {
        emptyOutDir: true,
        outDir: '../public/resources',
        assetsDir: './',
        manifest: true,
        rollupOptions: {
            input: './src/index.js',
            plugins: [
                includePaths({
                    paths: ['./src'],
                }),
            ],
        },
    },
};

And the following folder structure:

Project
-- public (php app starting point)
-- -- resources
-- -- -- index.css, index.js, manifest.json, ... (compiled files)
-- -- index.php
-- theme
-- -- src
-- -- -- index.js (entrypoint)
-- -- vite.config.js

My app gets server trough Homestead (Vagrant) at local.duplosaurus.be and I'm referencing the scripts in twig like this:

{% if getenv('ENVIRONMENT') == 'production' %}
    <script type="module" src="{{ craft.jsUrl }}"></script> (this outputs /resources/index.hash.js and works)
{% else %}
    <script type="module" src="http://localhost:3000/@vite/client"></script>
    <script type="module" src="http://localhost:3000/resources/index.js"></script>
{% endif %}

In build mode everything works but when I start dev mode I get the following errors in my browser console:

[vite] connecting...
WebSocket connection to 'ws://local.duplosaurus.be:3000/resources/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
[vite] server connection lost. polling for restart...

I've tried probably every possible combination of server.host, server.hmr.host, ... but I can't seem to find the issue ☹️ It's probably something stupid I'm doing wrong but I could really use some help haha :D

System Info

Logs (Optional if provided reproduction)

▲ /Users… duplosaurus/theme | master yarn run dev
yarn run v1.22.4
$ npx vite --debug --clearScreen false
  vite:config bundled config file loaded in 54ms +0ms
[dotenv][DEBUG] did not match key and value when parsing line 2: 
[dotenv][DEBUG] did not match key and value when parsing line 4: 
[dotenv][DEBUG] did not match key and value when parsing line 8: 
[dotenv][DEBUG] did not match key and value when parsing line 11: 
[dotenv][DEBUG] did not match key and value when parsing line 15: 
[dotenv][DEBUG] did not match key and value when parsing line 20: 
[dotenv][DEBUG] did not match key and value when parsing line 25: 
[dotenv][DEBUG] did not match key and value when parsing line 28: 
  vite:config using resolved config: {
  vite:config   base: '/resources/',
  vite:config   clearScreen: false,
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge16', 'firefox60', 'chrome61', 'safari11' ],
  vite:config     polyfillDynamicImport: true,
  vite:config     outDir: '../public/resources',
  vite:config     assetsDir: './',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { input: './src/index.js', plugins: [Array] },
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: true,
  vite:config     manifest: true,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false
  vite:config   },
  vite:config   server: {},
  vite:config   configFile: '/Users/kobeaerts/Sites/duplosaurus/theme/vite.config.js',
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: false,
  vite:config     server: {}
  vite:config   },
  vite:config   root: '/Users/kobeaerts/Sites/duplosaurus/theme',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   optimizeCacheDir: '/Users/kobeaerts/Sites/duplosaurus/theme/node_modules/.vite',
  vite:config   alias: [
  vite:config     {
  vite:config       find: /^\/@vite\//,
  vite:config       replacement: '/Users/kobeaerts/Sites/duplosaurus/theme/node_modules/vite/dist/client/'
  vite:config     }
  vite:config   ],
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   env: {
  vite:config     BASE_URL: '/resources/',
  vite:config     MODE: 'development',
  vite:config     DEV: true,
  vite:config     PROD: false
  vite:config   },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   }
  vite:config } +6ms
  vite:optimize Hash is consistent. Skipping. Use --force to override. +0ms

  Vite dev server running at:

  > Local:    http://localhost:3000/resources/
  > Network:  http://192.168.0.138:3000/resources/
  > Network:  http://192.168.10.1:3000/resources/

  ready in 197ms.
yyx990803 commented 3 years ago

You should be linking to src/index.js during dev instead. Vite is not a bundler during dev!

kobeaerts commented 3 years ago

Perfect thanks!