search

esausilva / example-create-react-app-express

Example on using create-react-app with a Node Express Backend
https://esausilva.com/2017/11/14/how-to-use-create-react-app-with-a-node-express-backend-api/
MIT License
374 stars 141 forks source link

Building with github repo gives 4040 #7

Closed teretz closed 5 years ago

teretz commented 5 years ago

Hi there.

I tried your repo in hopes of solving create-react-app and node api issues after build. In development, your project worked fine. But after building, I serve the project and it gives a 404 immediately.

esausilva commented 5 years ago

Hi, sorry for the late reply. Not sure if you noticed, but in server.js line 23 I'm looking for NODE_ENV to be production so ti run it locally:

NODE_ENV=production yarn dev:server

Heroku set the environment variable to production automatically.

teretz commented 5 years ago

Esau,

No worries. I didnt think it was a late reply. If thats the case, then I should apologize as well. Regardless, thank you, and I would like to move forward addressing this issue. :)

I adjust the server.js file by changing production to development. No change. I went ahead and created a repo for you to clone and address this issue. It's located at: https://github.com/teretz/example-cra-express-node-api

After cloning, I then run at command-line 'yarn', verify it with 'npm start' (which works great), and then I use 'yarn heroku-postbuild' to create the build, which then I serve with 'serve -s build'. It's at that point that I get a 404.

esausilva commented 5 years ago

Well, heroku-postbuild is really only for Heroku, since you really do not need to install dependencies every time you want to serve the app. Also, you really do not need serve since it is an HTTP Server and you want to run the included Node server (server.js) because it contains the API and serves the built React app.

Instead run dev:server script which builds the React app and serves the static files. Also, since you changed the if condition in server.js to check for development, you would need to prepend NODE_ENV=development to your command, like so

NODE_ENV=development yarn dev:server

By doing that, you are setting NODE_ENV environmental variable to development and entering the if condition, which is where Node is serving the production React app.

During development we do not need to enter theif condition since the Node server is only for the API and React is being served (running) with the CRA development server.

The React app is calling the API in server.js to post and display the field contents.

I hope this helps.

esausilva commented 5 years ago

@teretz Closing the issue. You can re-open it if you have more questions