Can't get the react app to render on the WP page.

[oozie]

Hey Marco,

I'm using

• ReactPress version 1.2.0 on
• Bitnami's WordPress 5.7.1 that comes with AWS Lightsail.

Whether I create the react app within the instance (running CRA in /opt/bitnami/apps/wordpress/htdocs/wp-content/plugins/reactpress/apps) and build - development mode - or copy pre-built build directory to /opt/bitnami/apps/wordpress/htdocs/wp-content/plugins/reactpress/myappbuild - deployment mode, the assigned slug (under /app1/) does render the root div as follows:

<!-- Please don't change. Block is needed for React app. -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

but doesn't include the related CSS/JS, which results in a blank page.

Can you please help me troubleshoot what goes wrong? I followed the instructions as well as youtube video to the T, and verified that shell_exec is available.

[rockiger]

Thanks for reporting this.

First, just to be sure, however you create the app on your Lightsail instance the built directory needs to be in /opt/bitnami/apps/wordpress/htdocs/wp-content/plugins/reactpress/apps/[appname]/build.

Second, you created a react app in your localhost inside WordPress and gave it a name and a page slug and it worked? It is located in [path/to/devserver]/htdocs/wp-content/plugins/reactpress/apps/[appname]/build?

Now in the page source you refered to are there any html tags with an id starting with rp-react-app-asset? If yes, could you please post them here?

[oozie]

I appreciate your quick response.

1) I believe the answer is yes:

bitnami@ip-172-26-5-97:/opt/bitnami/apps/wordpress/htdocs/wp-content/plugins/reactpress/apps/app1$ ls
build  node_modules  package.json  package-lock.json  public  README.md  src

2) I created the react app on a WP instance (not localhost), gave it the name app1 / slug app1 and when I go to the /app1/ URL and view source, I see the root div, but no other assets. I created an app2 by copying the build directory from app1, to /opt/bitnami/apps/wordpress/htdocs/wp-content/plugins/reactpress/apps/app2/build. Going to /app2/ gives the same behavior as /app1/: root div present, no assets.

3) As per above, no assets in view-source.

[rockiger]

Yeah this look good. I don't know what the problem is. This seems very odd.

Do have a debug log in WP instance?

[oozie]

I added log statements to the code and stepped through it. The code expects entrypoints in asset-manifest.json: https://github.com/rockiger/reactpress/blob/86d2c5170ccb740043a24cdf3211e37fc26b6d2e/public/class-reactpress-public.php#L150-L151

but my asset-manifest.json looks like this:

{
  "main.css": "static/css/main.40b4a62f.css",
  "main.css.map": "static/css/main.40b4a62f.css.map",
  "main.js": "static/js/main.b55ed1a8.js",
  "main.js.map": "static/js/main.b55ed1a8.js.map",
  "static/media/logo.svg": "static/media/logo.5d5d9eef.svg"
}

[oozie]

I must have used an old version of CRA. A rebuild on the more recent version is starting to work, but my SVG is missing.

[oozie]

Essentially, it's working though - I'll replace it with a static asset from somewhere else.

Thanks for this awesome plugin, @rockiger.

[rockiger]

Glad it works for you.

It seems to me, that something with your PUBLIC_URL is of. ReactPress changes the build command in the package.json in every React app.

The build line should looke like:

"build": "PUBLIC_URL=/wp-content/plugins/reactpress/apps/[app-name]/build react-scripts build",