{"id":19782450,"url":"https://github.com/steadylearner/react_with_servers","last_synced_at":"2026-04-07T22:31:08.876Z","repository":{"id":37179000,"uuid":"251015263","full_name":"steadylearner/React_with_servers","owner":"steadylearner","description":"React login example with Webpack and various servers.","archived":false,"fork":false,"pushed_at":"2022-12-12T08:21:09.000Z","size":9821,"stargazers_count":2,"open_issues_count":47,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T12:57:28.701Z","etag":null,"topics":["actix-web","django","express","golang","react","react-example","react-example-app","react-examples","react-with-servers","react-with-webpack","reactjs","restify","restifyjs","rocket-rs","steadylearner","vibora","warp","webpack","webpack-configuration","webpack-dev-server"],"latest_commit_sha":null,"homepage":"https://www.steadylearner.com/blog","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/steadylearner.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}},"created_at":"2020-03-29T11:24:36.000Z","updated_at":"2023-06-29T18:53:26.000Z","dependencies_parsed_at":"2023-01-27T16:15:39.537Z","dependency_job_id":null,"html_url":"https://github.com/steadylearner/React_with_servers","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/steadylearner/React_with_servers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2FReact_with_servers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2FReact_with_servers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2FReact_with_servers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2FReact_with_servers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steadylearner","download_url":"https://codeload.github.com/steadylearner/React_with_servers/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2FReact_with_servers/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31532153,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["actix-web","django","express","golang","react","react-example","react-example-app","react-examples","react-with-servers","react-with-webpack","reactjs","restify","restifyjs","rocket-rs","steadylearner","vibora","warp","webpack","webpack-configuration","webpack-dev-server"],"created_at":"2024-11-12T06:05:11.025Z","updated_at":"2026-04-07T22:31:08.859Z","avatar_url":"https://github.com/steadylearner.png","language":"JavaScript","readme":"[How to use React with Rust Actix]: https://www.steadylearner.com/blog/read/How-to-use-React-with-Rust-Actix\n[How to use Docker commands]: https://www.steadylearner.com/blog/read/How-to-use-Docker-commands\n[How to use Docker with Rust]: https://www.steadylearner.com/blog/read/How-to-use-Docker-with-Rust\n\n# React Full Stack Example\n\nReact and various servers to test it. React, Webpack, Formik, Jest, React-Testing-Library, Cypress etc are used here.\n\n[If you need a React developer, you can contact me.](https://www.linkedin.com/in/steady-learner-3151b7164/)\n\n![user-signup](/src/images/screenshot/user-signup.png)\n\n## Test React part only with Webpack\n\n```console\n$nvm install 12.3.1\n$nvm use 12.3.1\n$yarn\n$yarn start\n```\n\n## How to use it with servers\n\nYou can compare the performance with **$./loadtest.bash**.\n\nI would use Express normally or Restify for simple Rest JavaScript projects.\n\nIf I care for speed, the choice will be among Actix, Golang, Vibora. \n\nActix shows the performance as expected. Golang was way better than I though.\n\nRocket, Django are not adequate for many concurrent requests without Nginx or Apache proxy.(When they are used alone.)\n\n### Express\n\nWebpack Dev server is based on Express. Therefore, prototype with it first. We will use it to learn how to deploy these web server to AWS. Only ports and frameworks will be different.\n\n```console\n./express.bash\n```\n\n1. The result form loadtest \n\n```console\n// No errors but mean latency is problem?\n\nINFO Requests: 0, requests per second: 0, mean latency: 0 ms\nINFO Requests: 1769, requests per second: 354, mean latency: 578.9 ms\nINFO Requests: 5636, requests per second: 774, mean latency: 786.2 ms\nINFO Requests: 10162, requests per second: 906, mean latency: 1392.7 ms\nINFO \nINFO Target URL:          http://0.0.0.0:8000/\nINFO Max time (s):        20\nINFO Concurrency level:   10\nINFO Agent:               keepalive\nINFO Requests per second: 2000\nINFO \nINFO Completed requests:  14669\nINFO Total errors:        0\nINFO Total time:          20.001914555 s\nINFO Requests per second: 733\nINFO Mean latency:        1012.1 ms\nINFO \nINFO Percentage of the requests served within a certain time\nINFO   50%      1052 ms\nINFO   90%      1537 ms\nINFO   95%      1629 ms\nINFO   99%      1974 ms\nINFO  100%      8906 ms (longest request)\n```\n\n2. Memory usage(**113 MB**)\n\n### Warp\n\n```console\n./warp.bash\n```\n\n1. The result from loadtest\n\n```console\n// The best result considering its low memory usage compared to Golang\n\nINFO Requests: 0, requests per second: 0, mean latency: 0 ms\nINFO Requests: 3832, requests per second: 767, mean latency: 8.3 ms\nINFO Requests: 11189, requests per second: 1473, mean latency: 5.2 ms\nINFO Requests: 19382, requests per second: 1638, mean latency: 4.8 ms\nINFO\nINFO Target URL:          http://0.0.0.0:8000/\nINFO Max time (s):        20\nINFO Concurrency level:   10\nINFO Agent:               keepalive\nINFO Requests per second: 2000\nINFO\nINFO Completed requests:  27364\nINFO Total errors:        0\nINFO Total time:          20.001672077 s\nINFO Requests per second: 1368\nINFO Mean latency:        5.5 ms\nINFO\nINFO Percentage of the requests served within a certain time\nINFO   50%      4 ms\nINFO   90%      8 ms\nINFO   95%      10 ms\nINFO   99%      16 ms\nINFO  100%      82 ms (longest request)\n```\n\n2. Memory usage(**37.44 Mb**)\n\n### Rocket\n\nUse it to test you can deploy React Rocket application to AWS. Then, you should separate the project. Use **/static/\u003cfile..\u003e** instead of current **/\u003cfile..\u003e** in **routes/static_files.rs** to serve static files. It will help the Rocket server not to show errors from it.\n\n```console\n./rocket.bash\n```\n\n### Actix\n\n[How to use React with Rust Actix]\n\n```console\n./actix.bash\n```\n\n1. The result from loadtest\n\n```console\n// No errors and fast with the lowest memory usage.\n\nINFO Requests: 0, requests per second: 0, mean latency: 0 ms\nINFO Requests: 1797, requests per second: 360, mean latency: 43.2 ms\nINFO Requests: 4855, requests per second: 612, mean latency: 34.4 ms\nINFO Requests: 9126, requests per second: 833, mean latency: 29.6 ms\nINFO\nINFO Target URL:          http://0.0.0.0:8000/\nINFO Max time (s):        20\nINFO Concurrency level:   10\nINFO Agent:               keepalive\nINFO Requests per second: 2000\nINFO\nINFO Completed requests:  13300\nINFO Total errors:        0\nINFO Total time:          20.005901511 s\nINFO Requests per second: 665\nINFO Mean latency:        32.4 ms\nINFO\nINFO Percentage of the requests served within a certain time\nINFO   50%      26 ms\nINFO   90%      59 ms\nINFO   95%      64 ms\nINFO   99%      75 ms\nINFO  100%      110 ms (longest request)\n```\n\n2. Memory usage(**13 Mb**)\n\n### Restify\n\n```console\n./restify.bash\n```\n\n### Golang\n\n```console\n./golang.bash\n```\n\n1. The reults from loadtest \n\n```console\n// It is one of the fastest and no errors. It is made for this.\n\nINFO Requests: 0, requests per second: 0, mean latency: 0 ms\nINFO Requests: 3820, requests per second: 772, mean latency: 9 ms\nINFO Requests: 11529, requests per second: 1541, mean latency: 5 ms\nINFO Requests: 20169, requests per second: 1729, mean latency: 4.0 ms\nINFO \nINFO Target URL:          http://0.0.0.0:8000/\nINFO Max time (s):        20\nINFO Concurrency level:   10\nINFO Agent:               keepalive\nINFO Requests per second: 2000\nINFO \nINFO Completed requests:  27881\nINFO Total errors:        0\nINFO Total time:          20.002745433 s\nINFO Requests per second: 1394\nINFO Mean latency:        5.4 ms\nINFO \nINFO Percentage of the requests served within a certain time\nINFO   50%      4 ms\nINFO   90%      8 ms\nINFO   95%      10 ms\nINFO   99%      19 ms\nINFO  100%      339 ms (longest request)\n```\n\n2. Memory usage(**231 Mb**)\n\n### Vibora\n\nYou should use **$python3.6 -m venv python** and include Vibora folder in it.\n\n```console\n./vibora.bash\n```\n\n### Django\n\nSome Python frameworks requires you to include all the static files in /static folder and not /. So it was not easy fo make it work.\n\nThis will be the last framework to compare for a while.\n\nYou should use **$python -m venv python** and include Django folder in it.\n\n```console\n./django.bash\n```\n\n## Blog posts\n\n1. [How to use Webpack with React](https://www.steadylearner.com/blog/read/How-to-use-Webpack-with-React)\n2. [How to use Cypress with React](https://www.steadylearner.com/blog/read/How-to-use-Cypress-with-React)\n3. [How to use gRPC with Rust Tonic and Postgresql database](https://www.steadylearner.com/blog/read/How-to-use-gRPC-with-Rust-Tonic-and-Postgresql-database)\n4. [How to use Docker commands]\n5. [How to use Docker with Rust]\n\n## What left\n\nI should edit each bash files to make every servers copy src/images instead of current implementation to have less folder size.\n\n## Screenshots\n\n![user-result](/src/images/screenshot/user-result.png)\n![user-list](/src/images/screenshot/user-list.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteadylearner%2Freact_with_servers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteadylearner%2Freact_with_servers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteadylearner%2Freact_with_servers/lists"}