How to inject react (webpack's) bundle path into wordpress scripts functions

Question

I'm building a WordPress theme using olympos theme template and react (with create-react-app) as my front-end tool to complete the application views.

Problem is I need a React bundle path to supply to Wordpress as it loads my scripts so I can work better with the app in both builds Development & Production.

The first problem is with development builds there is no direct way to get a path to the React bundle (or at least I cannot find one, Webpack noob).

Second when I run yarn build to make production builds with paths they keep having an ID'ish looking string between them and this forces me to keep changing that random generated ID every time I make a build.

Example:

path/to/wp-theme/build/static/js/main.i3i391.js

path/to/wp-theme/build/static/css/styles.91k1j2.css

Aim

To have a path that wont change and then place it in my Wordpress function and use it in development builds (and production if possible) so when I experience Webpack's hot reload it happens from inside my Wordpress configurations.

Kinda like this:

function theme_register_scripts() {
    wp_enqueue_style( 'styles', get_stylesheet_uri() . 'build/static/css/styles.css' );
    wp_enqueue_script( 'scripts', esc_url(trailingslashit( get_template_directory_uri()) . 'build/static/js/main.js' ), NULL, '1.0', true);
}

I'm ready to configure my webpack configurations, as I have already done

npm run eject

to show my webpack and other behind the scene configurations but it was pretty confussing to know what button to press and what to avoid.

Answer 1

After some more reading, I understood my misconceptions and thought I should post an answer to help others.

Wordpress 4.7 and higher comes integrated with Rest API features and thus no need for a plugin installation.

Just after starting your Wordpress a quick hit on

http://localhost/wp-json/

will give you the json body if not then

http://localhost/binladen/?rest_route=/

Will do.

If you are using create-react-app (or Webpack for that matter) for your react theme development and you want to keep your HMR as you write your React front-end without creating the bundle everytime then don't worry about Wordpress. It can safely stay on one tab and your front-end in another.

You'll be using the WP Rest API to call for Wordpress resources on your React's logic and until your front-end is finished or you are satisfied with it is when you can include it in your Wordpress bundle and ship your Wordpress site with that React theme.

Building your front-end production bundle (with create-react-app)

npm run build

and included the created React bundle produced by the above code in Wordpress theme functions file.

function theme_register_scripts() {
    wp_enqueue_style( 'styles', get_stylesheet_uri() . 'build/static/css/styles.1k9s92.css' );
    wp_enqueue_script( 'scripts', esc_url(trailingslashit( get_template_directory_uri()) . 'build/static/js/bundle.i1929a.js' ), NULL, '1.0', true);
}

Sources.

create-react-app: Source

Multiple WP Rest API & React integration source & articles: Source

Multiple routes to WP Rest API: Source

Olypos WP template theme: Source