As a JS Developer I wanted to integrate my (React) App into a Wordpress Site. After researching and trying different solutions I ended up creating my own plugin with a function which handles everything. It also adds a shortcode that can now easily insertet in any WP page or post. As it is a plugin, it is easy to maintain.
This is a slightly generalized version of my plugin im using for my react app:
<?php
/*
Plugin Name: Your-Plugin-Name
*/
// for production:
wp_register_script( 'your-script', "https://your-host.com/path/to/your/script.js" );
// for development:
// wp_register_script( 'your-script', "https://localhost:3000/path/to/your/script.js" );
// [yourshortcode id="some-id"]
function yourshortcode_handler( $atts ) {
// get attributes
$a = shortcode_atts( array(
'id' => '0'
), $atts );
// access attributes thoruugh
// $a['id']
// do some php scripting here if needed i.e. pulling information from WP
// and providing them to your app via a cookie
// load the script
wp_enqueue_script( 'your-script');
// load the styling
wp_enqueue_style( 'your-script-stylesheet', "https://your-host.com/path/to/your/stylesheet.css" );
// return something
return '<div id="root" style="width: 100%;height: 400px;border: 1px solid grey;"></div>'; // returning a target div for my react app
}
add_shortcode( 'yourshortcode', 'yourshortcode_handler' );
?>All you need to do is putting Your-Plugin-Name.php into a /Your-Plugin-Name-Folder and copy it to the WP plugins folder.
Then in wordpress all that needs to be done is activating the plugin and inserting the shortcode at the desired location.
If you don't need remote hosting your app i.e. for standalone use, you can put your JS and CSS files also into your plugin folder and reference them relative to the WP-plugin path with plugin_dir_url( __FILE__ ) . 'assets/foo-styles.css'