{"id":15578991,"url":"https://github.com/stmoreau/react-express-mysql","last_synced_at":"2025-08-23T15:41:19.928Z","repository":{"id":102578662,"uuid":"126650085","full_name":"stmoreau/React-Express-MySQL","owner":"stmoreau","description":"👩‍💻 React Web App using Express API and MySQL connection 💻","archived":false,"fork":false,"pushed_at":"2018-03-25T00:07:33.000Z","size":129,"stargazers_count":33,"open_issues_count":0,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-24T01:37:00.561Z","etag":null,"topics":["express","mysql","react","redux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stmoreau.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-24T23:58:18.000Z","updated_at":"2024-08-14T14:32:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"ce0ac891-ef14-4e9f-a610-2825afb868df","html_url":"https://github.com/stmoreau/React-Express-MySQL","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stmoreau/React-Express-MySQL","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stmoreau%2FReact-Express-MySQL","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stmoreau%2FReact-Express-MySQL/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stmoreau%2FReact-Express-MySQL/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stmoreau%2FReact-Express-MySQL/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stmoreau","download_url":"https://codeload.github.com/stmoreau/React-Express-MySQL/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stmoreau%2FReact-Express-MySQL/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271754955,"owners_count":24815330,"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","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["express","mysql","react","redux"],"created_at":"2024-10-02T19:13:32.056Z","updated_at":"2025-08-23T15:41:19.908Z","avatar_url":"https://github.com/stmoreau.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Express-MySQL\n\nThis is a fully working React Web App with the following characteristics:\n\n* Based on [create-react-app](https://github.com/facebookincubator/create-react-app)\n* Node/Express backend\n* MySQL connection\n* [Redux](https://redux.js.org) pattern for handling application-state\n* [ReactRouter](https://github.com/ReactTraining/react-router) for handling routes\n* [Reactstrap](https://reactstrap.github.io) for UI\n* [Redux-Saga](https://github.com/redux-saga/redux-saga) for asynchronous tasks\n\n## Getting this App up and running\n\n1. Clone this repository:\n\n2. Set up testing database\n\nIn the terminal log in as root and used the sample.sql file included in this repo\n\n```\nmysql -u root\nmysql\u003e source sample.sql;\n```\n\nAt this point you can test the actual connection to the database.\n\n```\nmysql\u003e use books;\nmysql\u003e show tables;\n```\n\nYou should get:\n\n```\n+-----------------+\n| Tables_in_books |\n+-----------------+\n| authors         |\n+-----------------+\n1 row in set (0.00 sec)\n```\n\n3. Install server and client packages\n\n```\ncd YOUR_PATH/MyWebApp\nnpm install\ncd client\nnpm install\n```\n\n4. Start both server and client\n\n```\ncd YOUR_PATH/MyWebApp\nnpm start\n```\n\nThe last lines of the output should be\n\n```\nStarting the development server...\n\nCompiled successfully!\n\nThe app is running at:\n\n  http://localhost:3000/\n\nNote that the development build is not optimized.\nTo create a production build, use npm run build.\n```\n\nYou can now point your browser to http://localhost:3000/!\n\n### Set up the SERVER\n\n* MyWebApp/server.js\n\nThe file is an example of what it may look like for a server that:\n_ Serves at port 3001\n_ Uses static index.html when in production mode\n_ Connects to a MySQL pool (pools allow handles reconnecting)\n_ Has a server-api that the client side can talk to\n\n* MyWebApp/package.json\n\nContents where borrowed and slightly modified from [this file](https://github.com/fullstackreact/food-lookup-demo/blob/master/package.json).\n\n* MyWebApp/start-client.js\n\nContents where borrowed from [this file](https://github.com/fullstackreact/food-lookup-demo/blob/master/start-client.js)\n\n### Test the SERVER\n\n* Minimal testing\n\nWithin the top directory\n\n```\nnpm install -s\nnpm run server\n```\n\nAt this point you should see:\n\n```\nNODE_ENV:  undefined\nFind the server at: http://localhost:3001/\n```\n\n* Testing the database\n\nIn the terminal log in as root and used the sample.sql file included in this repo\n\n```\nmysql -u root\nmysql\u003e source sample.sql\n```\n\nAt this point you can test the actual connection to the database.\n\nStart your server again:\n\n```\nnpm run server\n```\n\nThen, submit a query to your db - from another terminal window:\n\n```\ncurl localhost:3001/api/books?firstName=William | jq '.'\n```\n\nYou should see\n\n```\n  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current\n                                 Dload  Upload   Total   Spent    Left  Speed\n100    71  100    71    0     0   2257      0 --:--:-- --:--:-- --:--:--  2290\n[\n  {\n    \"last_name\": \"Shakespeare\",\n    \"first_name\": \"William\",\n    \"middle_name\": null\n  }\n]\n```\n\n### Set up the CLIENT\n\nThat's what we use create-react-app for:\n\n```\ncreate-react-app client\n```\n\n#### Test the CLIENT (bare-bones):\n\n```\ncd client\nnpm start\n```\n\n### Connect CLIENT and SERVER\n\nThe server is ready to receive queries but at this moment, there are no requests sent from the client.\nTo do so, we create a client interface\n\n    * client/Client.js\n\nThe main function in this file doing the query is\n\n```\n    function search(query) {\n      return fetch(`http://localhost:3001/api/books?firstName=${query}`, {\n        accept: 'application/json',\n      }).then(checkStatus)\n        .then(parseJSON);\n      }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstmoreau%2Freact-express-mysql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstmoreau%2Freact-express-mysql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstmoreau%2Freact-express-mysql/lists"}