Can I display react dist folder's 'index.html' info as plugin shortcode in wordpress

I want to make a wordpress plugin and display content using shortcode. The project is made with react vite and konva. I make a dist folder through build command. Now I want to display the dist folder’s content in a wordpress page through shortcode. Is it possible to do this. If anyone have any idea pls share.

Yes you can. For this you first need to take an empty div into your shortcode callback function and then give it an id. Then you need to run React bite project with the same ID from the index of the src folder, then when the react job is finished, copy the javascript file from the dist folder to the plugin and enqueue it.

1 Like

Thank you Habib vai for reply. Already enqueue js and css files and make empty div in the plugin files but showed Unexpected Application Error! ### 404 Not Found. Can you help me to solve this issue…

BR
Arif

First of all: Check the Path to Your Asset The plugin’s plugin_dir_url(__FILE__) function is supposed to give the correct URL to the dist/assets/ directory, but if the file doesn’t exist or the path is incorrect, it will result in a 404 error.

Browser Developer Tools: Use the browser’s developer tools (press F12) and check the “Network” tab. Look for the enqueued files and verify if they are being loaded correctly. If the files show a 404 error in the browser’s network logs, this confirms that the files are not found at the specified URL.

Modify code
function triad_enqueue() {
wp_enqueue_style( ‘triad’, plugin_dir_url( FILE ) . ‘dist/assets/index-CgtXP5GC.css’, array(), ‘1.0’, ‘all’ );
wp_enqueue_script( ‘triad’, plugin_dir_url( FILE ) . ‘dist/assets/index-CgtXP5GC.js’, array(‘jquery’), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘triad_enqueue’ );

if not please what exactly error you go it

1 Like