Problem after running npm start

Resolved johnmcneil
(@johnmcneil)

4 years, 2 months ago
This plugin seems like just what I need, but I run into a problem getting going. I set up WordPress locally on my Ubuntu desktop and installed the plugin. Then I ran

npx create-react-app ghg

and set up the page slug. Now I can visit http://localhost/index.php/ghg/ to see that WordPress page, but without the react app. When I run

npm start

to get the react app started, the browser attempts to open the app at http://localhost:3001 but I get a 404 error:

Not Found

The requested URL was not found on this server.
Apache/2.4.48 (Ubuntu) Server at localhost Port 80

Help! Thanks very much,
John
- This topic was modified 4 years, 2 months ago by johnmcneil.

Viewing 12 replies - 1 through 12 (of 12 total)

Plugin Author rockiger
(@rockiger)

4 years, 2 months ago

Hm, this is odd.

npm start should only start the dev server for React app. Could you look into public/index.htlm. How does this file look like? The idea is, that when you are setting the slug the index.html gets updated to look like your WP site.

And as a site note, I would use localWP as a dev server for WordPress. This is an easy to maintain proven dev environment.
Thread Starter johnmcneil
(@johnmcneil)

4 years, 2 months ago
Is this what you mean? This is the content of
/srv/www/wordpress/wp-content/reactpress/apps/ghg/public/index.html

<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 2.0//EN”>
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL was not found on this server.</p>
<hr>
<address>Apache/2.4.48 (Ubuntu) Server at localhost Port 80</address>
</body></html>

I didn’t know about localWP, thanks for the recommendation. I set up a local wordpress environment using these instructions for Ubuntu: https://ubuntu.com/tutorials/install-and-configure-wordpress#1-overview

I don’t know if this is relevant, but I have also been using create-react-app with node.js to develop react apps locally. I’d like to have one foot in each world. Could that be interfering?
- This reply was modified 4 years, 2 months ago by johnmcneil.
Plugin Author rockiger
(@rockiger)

4 years, 2 months ago
No, this shouldn’t be a problem. You should start with create-react-app in you local system. But your react-app needs to be in the apps folder of your WordPress dev system. Otherwise, it can’t work. Please check with the instructions.

You need to follow them to the letter:
1. Install ReactPress on your local WordPress installation
2. Use create-react-app from the command line in the apps folder shown in ReactPress
3. Reload ReactPress page and give the app a slug
4. Develop your React
5. Build the app
6. Install ReactPress on live WordPress site
7. Create the same folder there (no need for create-react-app) there
8. Upload the build folder of your React app into the created folder.<br>
  Reload ReactPress page and give the app the SAME slug.
bnrogers
(@bnrogers)

4 years, 2 months ago

I am having this problem as well. When I try to setup an app, I get a 404 error on the page the app is supposed to be on. In the wordpress pages it shows the page with the correct slug, I can click on the permalink there to go to the page and still get a 404 error. I have updated the permalinks by going to the permalink page and clicking on save as well.

bnrogers
(@bnrogers)

4 years, 2 months ago

It appears to be a permissions issue, but I can’t get any errors in the error log. If I copy the build folder into another app folder it works correctly.

Plugin Author rockiger
(@rockiger)

4 years, 2 months ago

Can you post a screenshot?
Thread Starter johnmcneil
(@johnmcneil)

4 years, 2 months ago
No, this shouldn’t be a problem. You should start with create-react-app in you local system. But your react-app needs to be in the apps folder of your WordPress dev system. Otherwise, it can’t work. Please check with the instructions.

You need to follow them to the letter:

Install ReactPress on your local WordPress installation
Use create-react-app from the command line in the apps folder shown in ReactPress
Reload ReactPress page and give the app a slug
Develop your React
Build the app
Install ReactPress on live WordPress site
Create the same folder there (no need for create-react-app) there
Upload the build folder of your React app into the created folder.<br>
Reload ReactPress page and give the app the SAME slug.

Actually I did follow the instructions. I did run create-react-app in the apps folder of my local WordPress development environment. It led to the problem I already described.

However, I found a work-around. I can develop a React app locally using node.js, rather than a local WordPress environment. Then when I am ready to deploy, I run npm build and then sftp the build folder to wp-content/reactpress/apps/ on the live WordPress website in production. This works, but is not what your instructions say.
- This reply was modified 4 years, 2 months ago by johnmcneil.
- This reply was modified 4 years, 2 months ago by johnmcneil.
Plugin Author rockiger
(@rockiger)

4 years, 2 months ago

Odd, there seems to be some problem for ReactPress to connect to your local WordPress installation. Which is very odd, because ReactPress is running on that installation.

Did you try it with LocalWP?
Thread Starter johnmcneil
(@johnmcneil)

4 years, 2 months ago
Yes. Same problem.
- This reply was modified 4 years, 2 months ago by johnmcneil.
Plugin Author rockiger
(@rockiger)

4 years, 2 months ago

Could you look into the debug.log, something in there, that gives a reason why it doesn’t work?
Thread Starter johnmcneil
(@johnmcneil)

4 years, 2 months ago
I don’t see a file by that name. Maybe you mean this? ~/Local Sites/johnmcneilme/logs/nginx/error.log

2022/02/26 01:30:46 [error] 41292#0: *489 recv() failed (104: Connection reset by peer) while reading response header from upstream, client: 127.0.0.1, server: , request: “GET /ghg HTTP/1.0”, upstream: “fastcgi://unix:/home/jam/.config/Local/run/AhYKJ94o1/php/php-fpm.socket:”, host: “johnmcneilme.local”, referrer: “http://johnmcneilme.local/ghg”
2022/02/26 01:30:46 [error] 41292#0: *539 recv() failed (104: Connection reset by peer) while reading response header from upstream, client: 127.0.0.1, server: , request: “GET / HTTP/1.0”, upstream: “fastcgi://unix:/home/jam/.config/Local/run/AhYKJ94o1/php/php-fpm.socket:”, host: “johnmcneilme.local”
2022/02/26 01:30:46 [error] 41292#0: *541 recv() failed (104: Connection reset by peer) while reading response header from upstream, client: 127.0.0.1, server: , request: “GET / HTTP/1.0”, upstream: “fastcgi://unix:/home/jam/.config/Local/run/AhYKJ94o1/php/php-fpm.socket:”, host: “johnmcneilme.local”
2022/02/26 01:30:46 [error] 41292#0: *543 recv() failed (104: Connection reset by peer) while reading response header from upstream, client: 127.0.0.1, server: , request: “GET /wp-admin/ HTTP/1.0”, upstream: “fastcgi://unix:/home/jam/.config/Local/run/AhYKJ94o1/php/php-fpm.socket:”, host: “johnmcneilme.local”
2022/02/26 01:30:46 [error] 41292#0: *545 recv() failed (104: Connection reset by peer) while reading response header from upstream, client: 127.0.0.1, server: , request: “GET / HTTP/1.0”, upstream: “fastcgi://unix:/home/jam/.config/Local/run/AhYKJ94o1/php/php-fpm.socket:”, host: “johnmcneilme.local”

If that’s the wrong log, where would I find the correct one?
Thanks for your help!
- This reply was modified 4 years, 2 months ago by johnmcneil.
Plugin Author rockiger
(@rockiger)

4 years, 1 month ago
You need to activate debugging in your wp-config.php:
```
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'SCRIPT_DEBUG', true );
define( 'SAVEQUERIES', true );
```
Then errors should be written to debug.log in your wp-content directory.

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Problem after running npm start’ is closed to new replies.