andrefelipe / vite-php-setup Goto Github PK

I was using your helpers, thanks btw, and I realized that it didn't collect css file of the imported from main entry

function cssUrls(string $entry): array
{
    $urls = [];
    $manifest = getManifest();

    if (!empty($manifest[$entry]['css'])) {
        foreach ($manifest[$entry]['css'] as $file) {
            $urls[] = '/build/' . $file;
        }
    }

    if (!empty($manifest[$entry]['imports'])) {
        foreach ($manifest[$entry]['imports'] as $imports) {
            if (!empty($manifest[$imports]['css'])) {
                foreach ($manifest[$imports]['css'] as $cssFile) {
                    $urls[] = '/build/' . $cssFile;
                }
            }
        }
    }

    return $urls;
}

Hi!
Can you explain why this would happen, please?

I have tested it with semi success. Works only with legacy codebase not with functional components.
Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201 at Button.jsx:1:1
Have someone had similar problems?

Hi.
I have a problem with fonts path and also for images added throw background-image path in dev mode.
For build it's ok.

I am using vite in wordpress.
inc.vite.php

// enqueue hook
add_action('wp_enqueue_scripts', function () {

  if (defined('IS_VITE_DEVELOPMENT') && IS_VITE_DEVELOPMENT === true) {

    // insert hmr into head for live reload
    function vite_head_module_hook()
    {
      echo '<script type="module" crossorigin src="http://localhost:3000/main.js"></script>';
    }
    add_action('wp_head', 'vite_head_module_hook');
  } else {
    wp_enqueue_style('main', get_template_directory_uri() . '/dist/main.css');
    wp_enqueue_script('main', get_template_directory_uri() . '/dist/main.js', [], null, true);
  }
});

vite.config.js

import { defineConfig } from "vite";
import liveReload from "vite-plugin-live-reload";
import vue from "@vitejs/plugin-vue";

const { resolve } = require("path");
const fs = require("fs");
const path = require("path");

export default defineConfig({
    plugins: [
        vue(),
        liveReload(__dirname + "/**/*.php"),
    ],

    root: "",
    base: process.env.NODE_ENV === "development" ? "/" : "/dist/",

    build: {
        // output dir for production build
        outDir: resolve(__dirname, "./dist"),
        emptyOutDir: true,

        // emit manifest so PHP can find the hashed files
        // manifest: true,
        manifest: false,

        // esbuild target
        target: "es2018",

        // our entry
        rollupOptions: {
            input: {
                main: resolve(__dirname + "/main.js"),
            },

            output: {
                entryFileNames: `[name].js`,
                chunkFileNames: `[name].js`,
                assetFileNames: `[name].[ext]`,
                // manualChunks: {
                //     vendor: ["vue", "pinia"],
                // },
            },
        },

        // minifying switch
        minify: true,
        write: true,
    },

    css: {
        devSourcemap: true,
    },

    server: {
        // required to load scripts from custom host
        cors: true,

        // we need a strict port to match on PHP side
        // change freely, but update in your functions.php to match the same port
        strictPort: true,
        port: 3000,

        // serve over http
        https: false,

        hmr: {
            host: "localhost",
            //port: 443
        },
    },
});

And i have error in dev mode yarn dev

GET http://bs-altuofianco-shop.local/fonts/Comfortaa-Bold.woff2 net::ERR_ABORTED 404 (Not Found)

Thank you so much for sharing your setup, it works great!
I was wondering if it would also be possible to use this in an vanilla js setup without vue?
I get it running but the javascript files aren't updated. I guess I somehow have to build HMR for vanilla js files myself but I'm not sure how to do this.

I have a legacy PHP app where I want to use vite.
I have a standalone project with React+TS that I want to use components from.
Vite works on my react app. and now I want to be able to use components from it in my legacy PHP.

I'm not sure what should be inside vite('..') parameter - can someone elaborate?
My react app is located in mylegacyweb.com/arena, I tried to add to my index.php on legacy site:
vite('index.html');
But nothing is added to my html

Hi, I am using Babel TypeScript. I am new on Vite so I don't understanding clearly how to work with this.

I am getting this error when I ran npm run dev

Is there a specific minimum npm version required?

npm run dev
(node:90716) ExperimentalWarning: The fs.promises API is experimental

> [email protected] dev
> APP_ENV=development vite

internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'worker_threads'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Volumes/SanDisk1TB/Sites/vite-php-setup/vite/node_modules/vite/dist/node/chunks/dep-d13406fa.js:18:24)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
npm ERR! code 1
npm ERR! path /Volumes/#####/Sites/vite-php-setup/vite
npm ERR! command failed
npm ERR! command sh -c APP_ENV=development vite

VITE config deprecated splitVendorChunkPlugin — use build.rollupOptions.output.manualChunks or framework specific configuratio

[email protected] dev C:\wamp64\www\vite-php-setup\vite
APP_ENV=development vite

'APP_ENV' is not recognized as an internal or external command,
operable program or batch file.

Please help. Running npm run gives this issue. Great work by the way and is it possible to make it work with svelte instead of view

I tested the setup but I can't get assets working in development mode when using a php dev server inside public. The vue logo is referenced as /assets/logo.png. So when running a php dev server under localhost:8888 the browser tries to load the image as localhost:8888/assets/logo.png but it should look for localhost:3000/assets/logo.png . Of course I could also mirror all my assets from src to the public folder but this doesn't seem to be the right. Do you have found a workaround for this problem or are using another php server setup?

Hi,

Just set up this project by setting web server's document root to /public folder and running npm install and npm run dev in /vite folder. Why am I getting __vite_ping errors in the Network tab?

Hi, great setup, thank you for preparing this!

I have one issue though - when I set this up in Zend framework (Magento 1), HMR update fails with the following error (ignore the 404 for the image...):

This doesn't happen if I set up the files in the same way as you did (simple php files). Then it works perfectly!

The URL in the framework looks like https://<host>/eng/<page-with-vue-component> but I see no other differences in the setup.

Does anyone have any idea on how to handle this? I saw the workaround with liveReload on the src files, but if possible, I would prefer to use HMR :)

Anyone able to get <style> and <style scroped> tags from Vue SFC working in dev mode?

Hi,

great starter, thank you. I'm using this with wordpress.

This isn't really an issue, but a question: I cannot understand the purpose of the "base" option inside the vite configuration file: if I remove it (and by doing so I always use the default '/'), it works the same, both in development and prodiction, so it looks like that I don't have to specify the dist folder there whenever I am in production, making the APP_ENV=development assignment in the package.json file useless as well.

What am I missing?

Hi there, great setup

Is it possible to compile the vue components just within #app?
Respecting all php content within #app

As within my mix setup, or webpack with vue2 this was possible.
It should be possible with vue3 as well.

https://laracasts.com/series/whats-new-in-vue-3/episodes/14