brandcom / cakephp-vite Goto Github PK

At the moment in ViteScriptsHelper the development doman is fixed to localhost and the protocol to http, however not everybody uses localhost.

Would be nice to be able to change this value

Can't seem to add this plugin to a Cake 5 app, showing incompatibility between 5.0 and 5.x-dev versions. Any help?

See title. I have:

        'development' => [
            'scriptEntries' => ['scripts/main.ts'],
            'styleEntries' => ['styles/main.css'],
            'url' => 'http://localhost:5173',
        ],

It can find the main.ts but not the main.css, also I think you should be able to not set styleEntries at all and not have it give the error There are no valid entry points for the dev server. Be sure to set the ViteHelper.development.scriptEntries config. or if you decide to keep it change the error for styles to Be sure to set the ViteHelper.development.styleEntries config.

Known issue: The browser gets a http 426 response ("Upgrade required") and there are CORS-warnings logged in the Console.
The problem occurs from vite version 2.9.0 onwards.

Quickfix: Lock vite to 2.8.6.

See vitejs/vite#8602

Development under Safari is currently not possible, a [Warning] [blocked] The page at https://my-domain.local was not allowed to run insecure content from http://localhost:3000/webroot_src/main.ts. etc. warning will be logged.

When switching the vite config to wss like so:

    server: {
        hmr: {
            protocol: 'wss',
            host: 'localhost',
            port: 3000,
        },
    },

... and changing http://localhost: to https://localhost: in the ViteScriptsHelper, it still won't work due to SSL errors/certificate mismatches.

Just a small QoL idea.

This:

$this->ViteScripts->script([
    // files that are entry files during development and that should be served during production
    'files' => [
        'webroot_src/main.ts',
    ],
]);

should be equal with this:

$this->ViteScripts->script('webroot_src/main.ts');

Yay or Nay?

In branch future/v1 I get 404's trying to read files from manifest with 'forceProductionMode' => true,. This is my vite.config.js build object:

build: {
      manifest: true,
      rollupOptions: {
        input: {
          // Styles
          styles: 'resources/styles/main.css',
          critical: 'resources/styles/critical.css',
          storybook: 'resources/styles/storybook.css',

          // Scripts
          main: 'resources/scripts/main.ts',
        },
        output: {
          entryFileNames: 'assets/[name]-[hash].js',
          chunkFileNames: 'assets/[name]-[hash].js',
          assetFileNames: 'assets/[name]-[hash].[ext]',
        },
      },
      outDir: '../webroot/dist',
      emptyOutDir: true,
    },

Which results in this build structure:

As you can see the manifest.json gets put inside the dist folder by vite. This is the generated manifest.json:

{
  "styles/main.css": {
    "file": "assets/main-e7a50703.css",
    "src": "styles/main.css",
    "isEntry": true
  },
  "styles/storybook.css": {
    "file": "assets/storybook-3b78efcc.css",
    "src": "styles/storybook.css",
    "isEntry": true
  },
  "styles/critical.css": {
    "file": "assets/critical-a9e7c1bb.css",
    "src": "styles/critical.css",
    "isEntry": true
  },
  "scripts/components/t-button/t-button.ce.vue": {
    "file": "assets/t-button.ce-9bcdf683.js",
    "src": "scripts/components/t-button/t-button.ce.vue",
    "isDynamicEntry": true,
    "imports": [
      "scripts/main.ts"
    ]
  },
  "scripts/main.ts": {
    "file": "assets/main-a077a8fb.js",
    "src": "scripts/main.ts",
    "isEntry": true,
    "dynamicImports": [
      "scripts/components/t-button/t-button.ce.vue"
    ]
  }
}

Because it says return '/' in ManifestRecord.php lines 94 and 112 it will return http://project.test/assets/main-a077a8fb.js but I want it to return http://project.test/dist/assets/main-a077a8fb.js.

Setting build.outDirectory to dist does nothing because outDir isn't used anywhere in ManifestRecord.php. I would expect build.outDirectory to prefix all url's read from the manifest, can you fix this?

Vite config:

build: {
        emptyOutDir: true,
        outDir: './webroot/dist',
        manifest: true,
        rollupOptions: {
            input: {
                main: './webroot_src/main.ts',
            },
        },
    },

Generated html:

The green scripts are inserted by the plugin, but the red above come from vite. Vite expects the outDir to be the root which is accessible by apache etc.

So there is no /dist prefix and dynamic modules cannot be loaded.

A solution would be to set outDir to ./webroot. But then, vite will remove all files in webroot if emptyOutDir is true.

Does anyone have an idea how to fix that? If not, emptyOutDir would not work if you have static assets in webroot that don't come from vite.

You would have to delete the /assets folder before building manually here and there (not a big deal though).

In my vite.config.js I have styles: './resources/styles/main.css' as an input entry. When I build, it becomes "styles/main.css": { "file": "assets/main-186c74ee.css", "src": "styles/main.css", "isEntry": true }, in the manifest. Yet when I load my page and the manifest gets read, I get a 404 on it because it tries to get http://localhost/assets/main-186c74ee.css.js. Why does it add the .js suffix? If this is a bug, can you fix it?

I'm using PHP 8.0.24 and cakePHP 4.4.10

Code splitting is currently only possible in production mode through filters (helper), or dynamic imports within js.

see this issue:
#7

Hello, first at all - thank you for your time you used to develop this plugin. Unfortunately today I spotted one problem when I was trying to use it "production" mode.

Generally on Windows environments DS is equal to "\" which should not be used in URLs which are produced by e.g. getLinkFromOutDirectory method.

Like mentioned above, DS is used in e.g. getLinkFromOutDirectory method from ManifestRecord class:

to build path to assets like js or css files. This, on Windows, creates following, incorrect URLs like http://test.localhost/js/%5Cassets/main-5de7cc61.js which of course does not load.

Here is my cakephp-vite plugin configuration:

'ViteHelper' => [
    'development' => [
        'scriptEntries' => ['webroot_src/main.js'],
    ],
]

Here is vite.confg.js I am using:

import {defineConfig} from 'vite'

export default defineConfig({
    build: {
        emptyOutDir: false,
        outDir: './webroot',
        manifest: true,
        rollupOptions: {
            input: './webroot_src/main.js',
        },
    },
    server: {
        port: 3000,
        strictPort: true,
        hmr: {
            protocol: 'ws',
            host: 'localhost',
        },
    },
});

It seems the newest version of Vite loads the client automatically, can you confirm?
If confirmed, please delete:

        $this->Html->script(
            $config->read('development.url', ConfigDefaults::DEVELOPMENT_URL)
            . '/@vite/client',
            [
                'type' => 'module',
                'block' => $options['cssBlock'],
            ]
        );

in ViteScriptsHelper.php