{"id":23255204,"url":"https://github.com/xuanhoa88/react-ssr","last_synced_at":"2026-04-07T08:01:34.807Z","repository":{"id":268861044,"uuid":"829063545","full_name":"xuanhoa88/react-ssr","owner":"xuanhoa88","description":"React web app boilerplate, powered by Express web framework as backend","archived":false,"fork":false,"pushed_at":"2024-07-15T17:21:51.000Z","size":27,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-22T01:33:04.021Z","etag":null,"topics":["babel","expressjs","hrm","jest","reactjs","sass","ssr","webpack"],"latest_commit_sha":null,"homepage":"https://trackify.today","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/xuanhoa88.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-15T17:21:11.000Z","updated_at":"2024-07-16T06:58:49.000Z","dependencies_parsed_at":"2024-12-19T11:19:14.449Z","dependency_job_id":"14a4a58d-f38b-4772-be82-5649b39304d8","html_url":"https://github.com/xuanhoa88/react-ssr","commit_stats":null,"previous_names":["xuanhoa88/react-ssr"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/xuanhoa88/react-ssr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xuanhoa88%2Freact-ssr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xuanhoa88%2Freact-ssr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xuanhoa88%2Freact-ssr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xuanhoa88%2Freact-ssr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xuanhoa88","download_url":"https://codeload.github.com/xuanhoa88/react-ssr/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xuanhoa88%2Freact-ssr/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31504897,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","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":["babel","expressjs","hrm","jest","reactjs","sass","ssr","webpack"],"created_at":"2024-12-19T11:18:51.947Z","updated_at":"2026-04-07T08:01:34.778Z","avatar_url":"https://github.com/xuanhoa88.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## react-ssr\n\nReact web app boilerplate, powered by Express web framework as backend.\n\n## Features\n\n- Server-rendered [`react`](https://github.com/facebook/react) + [`react-frontload`](https://github.com/davnicwil/react-frontload) for async data loading.\n- [`Express`](https://github.com/expressjs/express) - Node.js framework for backend work.\n- Code splitting for server rendered components via [`loadable-components`](https://github.com/gregberge/loadable-components) library.\n- Combination of [`babel`](https://github.com/babel/babel) and [`webpack`](https://github.com/webpack) enables writing next generation JavaScript and code optimization.\n- [`webpack-hot-server-middleware`](https://github.com/60frames/webpack-hot-server-middleware) - hot reload for bundled file on server-side.\n- Static route configuration with [`react-router-dom`](https://github.com/remix-run/react-router/tree/main/packages/react-router-dom) for React Router.\n- Sass as extension of CSS and [`PostCSS`](https://github.com/postcss/postcss) for transforming styles, as well as [CSS modules](https://github.com/css-modules/css-modules) implementation out of the box.\n- Enforce convention and avoid errors with code linter and formatter. ([`eslint`](https://github.com/eslint/eslint), [`prettier`](https://github.com/prettier/prettier), [`stylelint`](https://github.com/stylelint/stylelint))\n- Implement security good practices with Express [`helmet`](https://github.com/helmetjs/helmet) and [`hpp`](https://github.com/analog-nico/hpp) middlewares.\n- Using [`webpack-bundle-analyzer`](https://github.com/webpack-contrib/webpack-bundle-analyzer) to visualize size of webpack output files.\n- Delightful testing with [`jest`](https://github.com/facebook/jest) framework for React components.\n- SEO ready with [`react-helmet`](https://github.com/nfl/react-helmet) component to manage document head.\n- [`husky`](https://github.com/typicode/husky) for better git commits experience.\n- [`babel-watch`](https://github.com/kmagiera/babel-watch) to monitor changes made on server-side and automatically restart server.\n\n## Requirement\n\nBefore you proceed, please make sure your machine has met the following requirements:\n\n| Dependency |   Version   |\n| ---------- | :---------: |\n| Node       | \u003e= v12.13.0 |\n| NPM        | \u003e= v6.12.0  |\n\n## Installation\n\n```bash\n# cloning git repository into `react-ssr` folder\ngit clone --depth=1 https://github.com/xuanhoa88/react-ssr.git react-ssr\n\n# install project dependencies\ncd react-ssr \u0026\u0026 npm install\n```\n\n## Running\n\nFor **development**:\n\nCreate `.env.development` for development usage:\n\n```bash\ncp .env.defaults .env.development\n```\n\nChange environment variables to serve your app.\n\n```bash\nnpm run dev\n```\n\nFor **production**:\n\nChange environment variables in `.env.defaults` to serve your app.\n\n```bash\nnpm run build # or,\nnpm run build:analyze # to analyze built bundles\n\nnpm start\n```\n\nFor **test**:\n\nCreate `.env.test` for staging usage:\n\n```bash\ncp .env.defaults .env.test\n```\n\nChange environment variables to serve your app.\n\n```bash\nnpm test\n```\n\n## Project Structure\n\nBelow is overview of project folder structure in this starter along with the short descriptions, respectively:\n\n\u003cdetails\u003e\u003csummary\u003eCLICK ME\u003c/summary\u003e\n\u003cp\u003e\n\n```\n├── assets                      # contains other resources\n|  ├── images                   # contains images for the app\n├── coverage                    # generated test coverage folder\n├── shared                      # util files for the app\n|  ├── env.js                   # environment util\n|  └── paths.js                 # project defined paths\n├── src                         # contains all app source files\n|  ├── components               # contains React components\n|  ├── ssr                      # contains server components\n|  ├── pages                    # contains page components\n|  ├── routes                   # contains react route's configuration\n|  ├── services                 # services registered for react frontload api\n|  ├── static                   # contains static files that used in components\n|  └── theme                    # contains app styels and variables\n|  ├── client.js                # webpack's client entry\n|  ├── server.js                # Express http server of the app\n├── tools                       # contains webpack bundler config files\n|  ├── webpack.client.js        # webpack config for client\n|  ├── webpack.common.js        # webpack common config for both client/server\n|  └── webpack.server.js        # webpack config for server\n├── babel.config.js             # default babel configuration object\n├── jest.config.js              # jest testing framework config file\n├── package.json                # required dependencies, scripts, etc\n├── postcss.config.js           # PostCSS config file\n├── prettier.config.js          # Prettier formatter config file\n├── stylelint.config.js         # stylelint config file\n```\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n## NPM Scripts\n\n- The following are available scripts in the project to perform respective tasks;\n- We can execute script by running: `npm run \u003cscript name here\u003e`\n\n\u003cdetails\u003e\u003csummary\u003eCLICK ME\u003c/summary\u003e\n\u003cp\u003e\n\n| Script Name     | Description                                                                                                   |\n| --------------- | ------------------------------------------------------------------------------------------------------------- |\n| `clean`         | Remove `dist` folder and respective built files.                                                              |\n| `build`         | Remove previous built files and build production ready files to be served.                                    |\n| `build:analyze` | Same with `build` script, except it comes with webpack bundle analyzer to visualize size of the output files. |\n| `dev`           | Start app server in development environment.                                                                  |\n| `start`         | Start app server in production environment.                                                                   |\n| `test`          | Perform tests execution.                                                                                      |\n| `test:update`   | Running tests with snapshots get updated on.                                                                  |\n| `test:watch`    | Running tests with watch mode turned on.                                                                      |\n| `test:coverage` | Running tests with coverage report output.                                                                    |\n| `lint`          | Perform source code lint checks for JS, React and styles based on the ESLint and stylelint config.            |\n| `lint:style`    | Perform lint checks for Sass style.                                                                           |\n| `lint:js`       | Perform lint checks for JS and React.                                                                         |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\u003cbr\u003e\n\n**Environment Variables**\n\nThe .env file is loaded based on the defined `process.env.NODE_ENV` value:\n\n| File name          | NODE_ENV    |    In Source Control    |\n| ------------------ | ----------- | :---------------------: |\n| `.env.test`        | test        |           Yes           |\n| `.env.development` | development |           Yes           |\n| `.env.defaults`    | production  | No (Need to create new) |\n\nDefined custom environment variables can be accessed via `process.env.[VARIABLE_NAME]`, for in instance:\n\n```js\nprocess.env.PORT; // this will give us PORT value\n```\n\n## Changelog\n\nAll notable changes made to the project will be documented on [release page](https://github.com/xuanhoa88/react-ssr/releases). For new project, always using the latest version. This project adheres to [Semantic Versioning](http://semver.org/).\n\n## License\n\n[MIT](https://raw.githubusercontent.com/xuanhoa88/react-ssr/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxuanhoa88%2Freact-ssr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxuanhoa88%2Freact-ssr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxuanhoa88%2Freact-ssr/lists"}