Problem after running npm start

  • Resolved johnmcneil

    (@johnmcneil)


    2 years, 9 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 https://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 https://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 2 years, 9 months ago by johnmcneil.
Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author rockiger

    (@rockiger)

    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)

    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 2 years, 9 months ago by johnmcneil.
    Plugin Author rockiger

    (@rockiger)

    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.

    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.

    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)

    Can you post a screenshot?

    Thread Starter johnmcneil

    (@johnmcneil)

    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 2 years, 8 months ago by johnmcneil.
    • This reply was modified 2 years, 8 months ago by johnmcneil.
    Plugin Author rockiger

    (@rockiger)

    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)

    Yes. Same problem.

    • This reply was modified 2 years, 8 months ago by johnmcneil.
    Plugin Author rockiger

    (@rockiger)

    Could you look into the debug.log, something in there, that gives a reason why it doesn’t work?

    Thread Starter johnmcneil

    (@johnmcneil)

    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: “https://johnmcneilme.local/ghg&#8221;
    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 2 years, 8 months ago by johnmcneil.
    Plugin Author rockiger

    (@rockiger)

    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.