{"id":30012616,"url":"https://github.com/haochuan/create-express-react","last_synced_at":"2025-08-05T14:06:26.315Z","repository":{"id":71715252,"uuid":"98372855","full_name":"haochuan/create-express-react","owner":"haochuan","description":"Easily create web project with express and create-react-app","archived":false,"fork":false,"pushed_at":"2017-11-17T20:20:13.000Z","size":76,"stargazers_count":6,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-02T07:16:40.400Z","etag":null,"topics":["bolierplate","cli","express","frontend","javascript","react","redux"],"latest_commit_sha":null,"homepage":null,"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/haochuan.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":"2017-07-26T03:00:50.000Z","updated_at":"2020-06-24T06:27:53.000Z","dependencies_parsed_at":"2023-02-28T17:16:11.662Z","dependency_job_id":null,"html_url":"https://github.com/haochuan/create-express-react","commit_stats":{"total_commits":5,"total_committers":2,"mean_commits":2.5,"dds":0.4,"last_synced_commit":"06c98c5459d9645a2932e2dfd960391f2528c76b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/haochuan/create-express-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haochuan%2Fcreate-express-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haochuan%2Fcreate-express-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haochuan%2Fcreate-express-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haochuan%2Fcreate-express-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/haochuan","download_url":"https://codeload.github.com/haochuan/create-express-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haochuan%2Fcreate-express-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268412581,"owners_count":24246498,"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-02T02:00:12.353Z","response_time":74,"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":["bolierplate","cli","express","frontend","javascript","react","redux"],"created_at":"2025-08-05T14:06:25.148Z","updated_at":"2025-08-05T14:06:26.300Z","avatar_url":"https://github.com/haochuan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# create-express-react\n\nGet started with [create-react-app](https://github.com/facebookincubator/create-react-app) and your own [express](https://expressjs.com/) server for development and production.\n\n## Features\n\n- CLI to generate project structure\n- Fully ES6 support\n- Pre-written npm scripts to help development, testing, linting, building and deployment process\n- [Eslint](https://eslint.org/) for both frontend and backend\n- [Jest](https://facebook.github.io/jest/) for both frontend and backend\n\n## Prerequisites\n\n- [Node.js](https://nodejs.org/en/), from v0.12.x to the latest version. Using any version of v6.x.x or above is preferred.\n\n## Installing\n\nFirst of all, you should install `create-express-react` via npm as a global package, this is the CLI to generate the template for you to get started.\n\n```\nnpm install create-express-react -g\n```\n\nOnce you have `create-express-react`, then run it to create the template. The command below will generate a folder named `myApp` in `Desktop`.\n\n```\ncd ~/Desktop\ncreate-express-react myApp\n```\n\nThen you need to grab `create-react-app` by running:\n\n```\ncd ~/myApp\nnpm install\nnpm run setup\n```\n\nFinally, you can start your app:\n\n```\nnpm start\n```\n\n## How to touch webpack config inside `create-react-app`\n\nFor example to install ANTD\n\nin project root:\n```\nnpm install antd --save\nnpm install babel-plugin-import --save-dev\n```\n\n``` \ncd frontend\n```\n\n```\nnpm install react-app-rewired --save-dev\n```\n\nReplace\n```\n\"start\": \"react-scripts start\",\n\"build\": \"react-scripts build\",\n\"test\": \"react-scripts test --env=jsdom\",\n```\n\nWith:\n```\n\"start\": \"react-app-rewired start\",\n\"build\": \"react-app-rewired build\",\n\"test\": \"react-app-rewired test --env=jsdom\",\n```\n\ninside frontend folder:\n```\ntouch config-overrides.js\n```\n\nadd code:\n```\nconst { injectBabelPlugin } = require(\"react-app-rewired\");\n\nmodule.exports = function override(config, env) {\n\tconfig = injectBabelPlugin(\n\t\t[\"import\", { libraryName: \"antd\", style: \"css\" }],\n\t\tconfig\n\t);\n\treturn config;\n};\n```\n\nYou are all set for modular import of ANTD, follow the docs and add LocaleProvider for EN\n\nGo back to your project root and you can run as usual with\n```\nnpm start\n```\n\nIf you encounter an error:\n```\n Error: Cannot find module 'react-scripts/package.json'\n```\n\nfix with:\n\n```\ncd frontend\nnpm install\n``` \n\n## Scripts\n\nThere are a lot of pre-written npm scripts to help you speed up the development and deployment process.\n\n- `npm run setup`\n\nUsing official `create-react-app` to generate a folder `root/frontend` for all frontend development. Also adding the proxy setting in `root/frontend/package.json` to pass request to express server.\n\n- `npm run start`   \n\nConcurrently starting webpack-dev-server for react running on port `3000`, and express backend server on port `4000`. HOC will be enabled for all react related code and also the server will be restarted by [nodemon](https://github.com/remy/nodemon) if there is any change made for the backend code.\n\n- `npm run test-server`  \n\nRunning server tests via Jest, which are in `root/server/__test__`\n\n- `npm run test-react`   \n\nRunning react tests via Jest. There is no test file by default, you may create a folder `/root/frontend/__test__` and put all test files there.\n\n- `npm run lint`\n\nRun ESLint on all backend code. The config files can be found in `root/.eslintrc` and `root/.eslintignore`. __Please note that the linting for react will be auto-enabled when you run `npm run start`__\n\n- `npm run build`\n\nBuild all the server side code into `root/dist`, then build react and move all built files (index.html, javascript, css, images, etc.) to `root/dist/public` for production \n\n- `npm run deploy`\n\nDeploy the server via pm2, you can find the config file in `root/deploy.json`.\n\n__There are also some helper npm scripts, see more details in `root/package.json`.__\n\n## Communication\n\n### Dev\nFor Development, the webpack-dev-server is running on port 3000 serving react app, and the backend express server is running on port 4000. All of the requests sent by frontend app will be passed to express server via proxy.\n\nWeb App \u003c--- Webpack-dev-server \u003c---\u003e Proxy \u003c---\u003e Express Server\n\n### Production\nFor Production, all the frontend code will be compiled and moved into a static directory inside express server. Now there is just one express server running, which is serving both the frontend app and backend endpoints.\n\nEndpoints \u003c--- Express Server ---\u003e Web App\n\n## Project Structure\nTBD\n\n## TODO\n- Should we put some of the common used react libraries into `root/frontend`?\n- Need to discuss the details about how to stucture express code.\n\n\n## Contributing\n\nPlease read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.\n\n## Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags). \n\n## Authors\n\n* **Haochuan Liu** - *Initial work* - [_haochuan](https://haochuan.io)\n\n## License\n\nThis project is licensed under the MIT License.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaochuan%2Fcreate-express-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhaochuan%2Fcreate-express-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaochuan%2Fcreate-express-react/lists"}