search

fullstackreact / food-lookup-demo

A demonstration of using `create-react-app` with a server
MIT License
1.19k stars 373 forks source link

Please explain what the 'start-client.js' script is doing? #51

Closed I-keep-trying closed 6 years ago

I-keep-trying commented 6 years ago

I have had nothing but trouble getting other, similar demos to work, yours is the first one that has worked (almost) immediately, I just had to tweak a couple of things and it was up and running!

The one thing that is noticeably different than all of the (probably up to 12) other demos I have downloaded and gave up in frustration, is the start-client.js file. I can tell it is doing something critical to the proxy, and that is where my problem always was in the other demos, so I really want to understand exactly how this piece works.

I was confused at first because the naming of things in the package.json - we have concurrently calling npm run server and npm run client, which makes sense, because two lines down there is a client script that is calling a start-client.js script. But that seems to be pointing back to the client in one of the parameters, which at first looks like a closed circuit.

But then, I saw that there is a top-level directory named client as well, with its own package.json, and a start script... is the client being pointed to in the start-client.js script? Does it not need any more information than that, just the directory name?

Also, what are all the other params in that script doing? Mostly this part here: {stdio: 'inherit', cwd: 'client', shell: true} ?

Thank you for doing such a great job with this! Extremely well documented and commented throughout the code, very helpful!

acco commented 6 years ago

Hey @I-keep-trying

Great to hear this worked for you! What were the tweaks that you had to make to get it up and running? Would be great to incorporate so that this works out-of-the-box on a variety of machines.

The start-client.js is a little complex just so that this works on multiple platforms (Mac/Linux/Windows). If we were only running on a mac, this is all that we would need:

$ cd client && npm start

Because that command doesn't work the same on Windows, we need to take another route. So we use child_process#spawn to give us a multi-platform command for executing the start command in a child directory. The opts in start-script are mostly working with the child_process#spawn API. We "change the working directory" (cwd) to client and then run start in there.

If you're on Windows, it's possible the other demos you encountered were built with Mac/Linux-only strategies.

Hope this helps. Feel free to re-open / comment if you have more questions

A

I-keep-trying commented 6 years ago

Hi,

I honestly could not remember, at first, what the issue was, and then I remembered that I replied to another person who had the exact same issue I had in the early stages of setup here and I described to him exactly what my problem was, and how I solved it.

I am on Windows, but most of the time, the Mac/Linux instructions don't get in the way. Anything they can do, I can do with my setup. If there is a problem, it's usually just a npm package I need or something easy to fix - in fact, I don't worry unless I see a whole separate "For Windows..." section, lol!