[Support] How to resolved static assets path imported in react components while dev server running

[watarutmnh]

Question

I'm trying out craft-vite with react component.
The assets path which imported in react components are resolved fine in production build, but they aren't while dev server running.
Is there any way I can solve it?

Thanks,

Example

#app.tsx

import React, { useState } from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello Vite + React!!</p>

[watarutmnh]

Additional Info

The image src url 404 error got is https://appexample.test/src/logo.svg
But I can access the asset to https://localhost:3001/src/logo.svg

[khalwat]

One way is to put the image in the /public dir in the Vite root. https://vitejs.dev/guide/assets.html#the-public-directory

Beyond that I'm not sure -- this is more of a ViteJS question though, so head over here: https://github.com/vitejs/vite/issues

[khalwat]

Come to think of it, it could be related to this: vitejs/vite#2196

[watarutmnh]

@khalwat Thank you sharing the issue thread.
I'm using valet so the @haytor 's comment are very helpful.
I created Local driver and put it on root directory of the project.

LocalValetDriver.php

<?php

class LocalValetDriver extends LaravelValetDriver
{
    /**
     * Determine if the driver serves the request.
     *
     * @param  string  $sitePath
     * @param  string  $siteName
     * @param  string  $uri
     * @return bool
     */
    public function serves($sitePath, $siteName, $uri)
    {
        // The host and port of the Vite dev server.
        $host = 'localhost';
        $port = 3001;

        $timeout = 6;

        // Use fsockopen to ping the server to determine if the driver will handle the request.
        $fsock = @fsockopen($host, $port, $errno, $errstr, $timeout);
        return is_resource($fsock) ? true : false;

    }
    /**
     * Determine if the incoming request is for a static file.
     *
     * @param  string  $sitePath
     * @param  string  $siteName
     * @param  string  $uri
     * @return string|false
     */
    public function isStaticFile($sitePath, $siteName, $uri)
    {  
        // Application root directory resource loading, resource reference in node_modules
        if (file_exists($staticFilePath = $sitePath . '/' . $uri)
            && is_file($staticFilePath)) {
            return $staticFilePath;
        }
        if (file_exists($staticFilePath = $sitePath . '/web' . $uri)
            && is_file($staticFilePath)) {
            return $staticFilePath;
        }
        return false;
    }
    /**
     * Get the fully resolved path to the application's front controller.
     *
     * @param  string  $sitePath
     * @param  string  $siteName
     * @param  string  $uri
     * @return string
     */
    public function frontControllerPath($sitePath, $siteName, $uri)
    {
        return $sitePath . '/web/index.php';
    }
}

It seems to be working ok so far.

[khalwat]

@watarutmnh I think we have a better solution as detailed here:

https://nystudio107.com/blog/using-vite-js-next-generation-frontend-tooling-with-craft-cms#vite-processed-assets

Issue ref: vitejs/vite#2394

[watarutmnh]

@khalwat Good to know that! Thanks!