{"id":18487546,"url":"https://github.com/esausilva/example-create-react-app-express","last_synced_at":"2025-04-05T17:09:25.102Z","repository":{"id":27721778,"uuid":"110692977","full_name":"esausilva/example-create-react-app-express","owner":"esausilva","description":"Example on using create-react-app with a Node Express Backend","archived":false,"fork":false,"pushed_at":"2023-01-07T04:08:31.000Z","size":2917,"stargazers_count":374,"open_issues_count":20,"forks_count":141,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-29T16:10:17.815Z","etag":null,"topics":["create-react-app","express","node","react"],"latest_commit_sha":null,"homepage":"https://esausilva.com/2017/11/14/how-to-use-create-react-app-with-a-node-express-backend-api/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/esausilva.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-14T13:20:46.000Z","updated_at":"2024-07-30T13:24:15.000Z","dependencies_parsed_at":"2023-01-14T08:30:49.122Z","dependency_job_id":null,"html_url":"https://github.com/esausilva/example-create-react-app-express","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esausilva%2Fexample-create-react-app-express","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esausilva%2Fexample-create-react-app-express/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esausilva%2Fexample-create-react-app-express/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esausilva%2Fexample-create-react-app-express/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/esausilva","download_url":"https://codeload.github.com/esausilva/example-create-react-app-express/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369953,"owners_count":20927928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["create-react-app","express","node","react"],"created_at":"2024-11-06T12:50:32.094Z","updated_at":"2025-04-05T17:09:25.074Z","avatar_url":"https://github.com/esausilva.png","language":"JavaScript","readme":"# create-react-app React Project with Node Express Backend\r\n\r\n\u003e Example on using create-react-app with a Node Express Backend\r\n\r\n## Usage\r\n\r\nInstall [nodemon](https://github.com/remy/nodemon) globally\r\n\r\n```\r\nnpm i nodemon -g\r\n```\r\n\r\nInstall server and client dependencies\r\n\r\n```\r\nyarn\r\ncd client\r\nyarn\r\n```\r\n\r\nTo start the server and client at the same time (from the root of the project)\r\n\r\n```\r\nyarn dev\r\n```\r\n\r\nRunning the production build on localhost. This will create a production build, then Node will serve the app on http://localhost:5000\r\n\r\n```\r\nNODE_ENV=production yarn dev:server\r\n```\r\n\r\n## How this works\r\n\r\nThe key to use an Express backend with a project created with `create-react-app` is on using a **proxy**. We have a _proxy_ entry in `client/package.json`\r\n\r\n```\r\n\"proxy\": \"http://localhost:5000/\"\r\n```\r\n\r\nThis tells Webpack development server to proxy our API requests to our API server, given that our Express server is running on **localhost:5000**\r\n\r\n## Tutorial\r\n\r\nVisit my [blog post](https://esausilva.com/2017/11/14/how-to-use-create-react-app-with-a-node-express-backend-api/) entry for a detailed step-by-step guide.\r\n\r\n[Deployed app](https://cra-express.herokuapp.com/)\r\n\r\n## Giving Back\r\n\r\nIf you would like to support my work and the time I put into making tutorials, consider getting me a coffee by clicking on the image below. I would really appreciate it!\r\n\r\n[![Buy Me A Coffee](https://www.buymeacoffee.com/assets/img/custom_images/black_img.png)](https://www.buymeacoffee.com/esausilva)\r\n\r\n-Esau\r\n","funding_links":["https://www.buymeacoffee.com/esausilva"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fesausilva%2Fexample-create-react-app-express","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fesausilva%2Fexample-create-react-app-express","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fesausilva%2Fexample-create-react-app-express/lists"}