Configuration Option Base Ignored

porl commented 1 year ago

I am trying to use this bundle in a Sulu CMS project. In order to do so and not overwrite the admin assets (that are built in /public/build/admin) I am trying to set the pentatrion_vite.base option to "/build/website".

If I run bin/console debug:container vite --show-arguments and select vite.entrypoints_lookup I get the appropriate path /public/build/website/entrypoints.json, however the generated html from the {{ vite_entry_link_tags('app') }} (and script tag) shows the default /public/build/ paths (no /website).

This seems to be the case even if changing build to something like app (so it is not to do with being a subdirectory).

Vite itself is placing the files in the correct place, so I believe the vite-plugin-symfony config is working correctly (pasted relevant option below for reference):

symfonyPlugin({
    buildDirectory: "/build/website/"
}),

mario-fehr commented 1 year ago

Planning to try the same. Hope we can find a solution together.

porl commented 1 year ago

For now I'm just leaving the settings as default and rebuilding the admin assets after building the frontend assets. This is obviously only a short-term workaround though. Let me know if you have the same problem as me so I know I've not just done something silly!

lhapaipai commented 1 year ago

hi @porl, can you try with the final slash ?

# config/packages/pentatrion_vite.yaml
pentatrion_vite:
-    base: /build/website
+    base: /build/website/

//vite.default.config.js
export default defineConfig({
  plugins: [
    symfonyPlugin({
      buildDirectory: 'build/website'

...

lhapaipai commented 1 year ago

I wanted to save a few lines but it's not really intuitive... it would be worth making some changes

https://github.com/lhapaipai/vite-bundle/blob/7cd8acc6eac2f5ab402736c249ec430e67b1745e/src/Resources/config/services.yaml#L6

porl commented 1 year ago

Hi @lhapaipai

hi @porl, can you try with the final slash ?

Same issue unfortunately.

The vite side of things works fine but the twig part does not change from the default /build for the generated urls. Even if I change build to something completely different it is reset to the default for the twig tags.

porl commented 1 year ago

I wanted to save a few lines but it's not really intuitive... it would be worth making some changes

https://github.com/lhapaipai/vite-bundle/blob/7cd8acc6eac2f5ab402736c249ec430e67b1745e/src/Resources/config/services.yaml#L6

I think this part works (as shown by the output of bin/console debug:container vite --show-arguments) but it does not seem to be used when generating the twig tags.

lhapaipai commented 1 year ago

can you show the all content of your vite.config.js, entrypoints.json (public/build/website/entrypoints.json) and pentatrion_vite.yaml (config/packages/pentatrion_vite.yaml) ?

porl commented 1 year ago

/vite.config.js

import { defineConfig } from "vite";
import symfonyPlugin from "vite-plugin-symfony";

export default defineConfig({
    plugins: [
        symfonyPlugin({
            buildDirectory: "/build/website/"
        }),
      // symfonyPlugin()
    ],
    build: {
        rollupOptions: {
            input: {
                app: "./assets/website/app.ts"
            },
        },
        outDir: "build/website"
    },
    base: "/build/website/"
});

Tried with outDir and base set to match the plugin's option but this made no difference.

/public/build/website/entrypoints.json

{
  "isProd": false,
  "viteServer": {
    "origin": "http://127.0.0.1:5173",
    "base": "/build/website/"
  },
  "entryPoints": {
    "app": {
      "js": [
        "http://127.0.0.1:5173/build/website/assets/website/app.ts"
      ]
    }
  },
  "assets": null,
  "legacy": false

The console output of vite shows the following:

1:49:32 pm [vite] vite.config.js changed, restarting server...
Forced re-optimization of dependencies
1:49:33 pm [vite] server restarted.

  ➜  Local:   http://127.0.0.1:5173/build/website/
  ➜  Network: use --host to expose

Is it vite or the plugin that generates the entrypoints.json file?

/config/packages/pentatrion_vite.yaml:

pentatrion_vite:
  # Base public path when served in development or production
  base: /build/website/
  # path to the web root relative to the Symfony project root directory
  public_dir: /public

  script_attributes:
  # you can define your attributes that you want to apply
  # for all your script tags

  link_attributes:
  # you can define your attributes that you want to apply
  # for all your link tags

lhapaipai commented 1 year ago

Hi @porl, Sorry I'm not sure to identify your issue.

be careful your configuration is wrong and produces a build/website folder at the root of the project and not in the public folder

Here are some answers.

User either

export default defineConfig({
    plugins: [
        symfonyPlugin({
            buildDirectory: "/build/website/"
        }),
    ],
    build: {
        rollupOptions: {
            input: {
                app: "./assets/website/app.ts"
            },
        },
    },
});

or

export default defineConfig({
    plugins: [
        symfonyPlugin(),
    ],
    build: {
        rollupOptions: {
            input: {
                app: "./assets/website/app.ts"
            },
        },
        // pay attention to your outdir
        // which is wrong in your example
        outDir: "./public/build/website"
    },
    base: "/build/website/"
});

but not both at the same time (in this case it will be the second configuration that will take over)

the file entrypoints.json seems ok for me,

{
  "isProd": false,
  "viteServer": {
    "origin": "http://127.0.0.1:5173",
    "base": "/build/website/"
  },
  "entryPoints": {
    "app": {
      "js": [
+        "http://127.0.0.1:5173/build/website/assets/website/app.ts"
      ]
    }
  },
  "assets": null,
  "legacy": false
}

there is the prefix website.

the bundle renders the contents of this line http://127.0.0.1:5173/build/website/assets/website/app.ts https://github.com/lhapaipai/vite-bundle/blob/7cd8acc6eac2f5ab402736c249ec430e67b1745e/src/Asset/EntrypointRenderer.php#L65 so you must have the expected content with website ?

I can't understand your problem, it's in dev mod ? or after build ?

I don't know Sulu CMS but your documentRoot is inside the public folder?

If you still can't find a solution can you provide me :

rendering of your twig tags
entrypoints.json associated after npm run dev and npm run build (i.e. 2 pairs of files)

porl commented 1 year ago

Hi @lhapaipai

I modified the vite.config.js file to match your second example (the first one I had tried previously). Thanks for the correction of the outDir line.

As before, vite creates the public/build/website/entrypoints.json file with the below contents:

{
  "isProd": false,
  "viteServer": {
    "origin": "http://127.0.0.1:5173",
    "base": "/build/website/"
  },
  "entryPoints": {
    "app": {
      "js": [
        "http://127.0.0.1:5173/build/website/assets/website/app.ts"
      ]
    }
  },
  "assets": null,
  "legacy": false

This appears to have the correct entrypoint line.

Unfortunately the twig template is still rendered out with the incorrect tags:

<script src="http://127.0.0.1:5173/build/@vite/client" type="module"></script>
<script src="http://127.0.0.1:5173/build/assets/website/app.ts" type="module"></script>

I tried to use a fresh sulu install with this vite bundle and nothing else to test but ran into the same problems. I've documented my steps below for ease of replicating:

# Base Sulu Install

- created project
  `composer create-project sulu/skeleton <dir>`
  `cd <dir>`

- rename and edit `config/webspaces/example.xml` (not needed for testing vite)

- set up `.env.local` with db url etc

- set up db etc
  `bin/adminconsole sulu:build dev`

# Add Vite Bundle
- install bundle
  `composer require pentatrion/vite-bundle`

- add `config/packages/pentatrion_vite.yaml`
  - change `base` entry to `/build/website/`

- create `/assets/website` dir

- move `/assets/app.*` to `/assets/website` dir

- add `buildDirectory: "/build/website/"` to symfonyPlugin config and set build `app.js` path in vite.config.js

- install js deps
  `yarn install`

- add ` {{ vite_entry_link_tags('app') }} ` and ` {{ vite_entry_script_tags('app') }} ` to base template

- run vite
  `vite` (dev) or
  `vite build` (prod)

# Not working
- tried changing `vite.config.js` to use `outDir` and `base` options instead of symfonyPlugin `buildDirectory` config option
  - no change
- removed above options to allow vite to use `/build/` directory directly
  - works fine (though has original issue of removing /build/admin assets)

porl commented 1 year ago

Update!

Looks like there is an issue with Sulu and the cache. running bin/console cache:clear (or its admin equivalent) don't seem to help, but manually clearing the cache files /var/cache/website/{prod,dev}/* seems to be functioning.

My apologies for the noise here as it looks like the problem is not with this bundle.

I'll close the issue.

lhapaipai / vite-bundle

Configuration Option Base Ignored #34