blonestar / wp-theme-vite-tailwind Goto Github PK

has anyone got hmr working on a remote server?

Hi there,

Thanks for your work and solution of implementing Vite into WordPress. Something I've been wanting do to for a while. I am using your repo as reference to my own setup which is basically a hybrid between Roots Bedrock and Roots Sage. This works fine, although I have a question. With Laravel Mix we used to access our dev sites through http://localhost:3000. In the current setup, this results in a 404. Using Valet we get it to work on the .test domain and this works fine.

However, would it be possible to also proxy through http://localhost:3000? I've seen your comments in vite.config.js about it resulting in 404 so the behaviour is expected, but it would be helpful to also proxy the HMR through the localhost domain.

Any way to achieve this? Thanks a lot!

Hi @blonestar,

thanks for your work. I'm using your setup and it's working great.

I always set a virtual host for my projects (for example name.site) and with my previous configuration, with Gulp and Webpack, I was able to access to the website from external device by using my IP network.

How can I do the same thing with vite and your configuration?

Hello there! Thank you for the nice work you've done here.

I started testing this theme and encountered a problem with yarn build. It seems like the website didn't work well.

I'm using MAMP Pro with SSL, the SSL of my wesite.local was saving on MAMP folder, but i have generated another one to localhost in the theme folder:

Note: the local CA is not installed in the Firefox trust store.
Note: the local CA is not installed in the Java trust store.
Run "mkcert -install" for certificates to be trusted automatically ⚠️

Created a new certificate valid for the following names 📜
 - "localhost"

The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅

It will expire on 13 July 2025

I also tried a fresh installation without SSL, but after running the build command, the website didn't load correctly. Do you think I did something wrong?

hey, what's the best way to deal with images on CSS/SCSS files?
It's not rendering.

Hello,

Thank you for your Boilerplate Wordpress Theme. I found it useful.
Suggestion, please could you consider including the snippets below
defined( 'ABSPATH' ) || exit;
in both functions.php and inc.vite.php for security reasons.

Thank you.

Hi I'm getting these issues with fonts in css

Failed to decode downloaded font

dev.local/:1 OTS parsing error: invalid sfntVersion: 154935620

@font-face {
  font-family: Mezius;
  src:
    url("./font/ppp.ttf") format('truetype');
  font-display: swap;
}

This is the vite config

import { defineConfig } from 'vite'
import liveReload from 'vite-plugin-live-reload'
const { resolve } = require('path')

export default defineConfig({
  plugins: [
    liveReload(__dirname + '/**/*.twig')
  ],
  root: '',
  base: process.env.NODE_ENV === 'development'
    ? '/'
    : '/dist/',
  build: {
    outDir: resolve(__dirname, './dist'),
    emptyOutDir: true,
    manifest: false,
    target: 'es2018',
    rollupOptions: {
      input: {
        main: resolve(__dirname + '/main.js')
      },
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    },
    minify: true,
    write: true
  },
  server: {
    cors: true,
    strictPort: true,
    port: 3000,
    https: false,
    hmr: {
      host: 'localhost'
    },
  },
  resolve: {}
})

First off, huge thanks to blonsetar for putting this together, I got it up and running relatively easily.

With the inc.vite updates in the other issue I have both running good locally, and pushing code to my server set to production mode is working good too.

One thing I haven't been able to do yet is to see css background images while in dev mode locally... Im assuming its a path I have to edit in the config but am new to vite, any suggestions?

[removed by poster]

After installing, I run npm run dev and I've got this, what I'm missing ?

I am getting a console error when running a build. Everything compiles and live reload works as it should in dev, but as soon as I go into production none of the styles compile and I get this console error

Uncaught SyntaxError: Unexpected token '*' (at main-3fb20dfd.css?ver=6.2.2:1:1)

I am on a Windows computer if this makes any difference. Relatively new to all this!

Through main.js, I'm currently importing a stylesheet which is both used on the front & back-end.

Is there a way to separate these imports?

Steps to produce: Install locally, set IS_VITE_DEVELOPMENT to false, run npm run build no styles get compiled and an error is shown on the front end as well. Warning: foreach() argument must be of type array|object, null given in C:\Users\inept\Local Sites\share-the-wonder\app\public\wp-content\themes\share-the-wonder\inc\inc.vite.php on line 55

Same as 13

[blocked] The page at https://mydomain.com/ was not allowed to run insecure content from http://localhost:3000/main.js.

Hi! This theme is looking very interesting. How should I fix this? Nothing is loading, just plain text. This happens only after npm run dev and if this is set to true: define('IS_VITE_DEVELOPMENT', true);

How to include a vue3 app in this theme ?