{"id":13480123,"url":"https://github.com/kriasoft/react-app","last_synced_at":"2025-05-15T03:08:29.362Z","repository":{"id":8507633,"uuid":"58659933","full_name":"kriasoft/react-app","owner":"kriasoft","description":"Create React App with server-side code support","archived":false,"fork":false,"pushed_at":"2022-12-09T15:32:36.000Z","size":2120,"stargazers_count":613,"open_issues_count":34,"forks_count":83,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-05-01T21:21:56.944Z","etag":null,"topics":["babel","boilerplate","create-react-app","graphql","graphql-js","isomorphic","javascript","react","react-starter","react-starter-kit","reactjs","relay","relay-modern","server-side-rendering","single-page-app","ssr","template","webpack"],"latest_commit_sha":null,"homepage":"https://t.me/reactapp","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/kriasoft.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":"2016-05-12T16:51:40.000Z","updated_at":"2025-04-18T20:25:32.000Z","dependencies_parsed_at":"2023-01-13T15:01:03.024Z","dependency_job_id":null,"html_url":"https://github.com/kriasoft/react-app","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kriasoft%2Freact-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kriasoft%2Freact-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kriasoft%2Freact-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kriasoft%2Freact-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kriasoft","download_url":"https://codeload.github.com/kriasoft/react-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253451208,"owners_count":21910670,"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":["babel","boilerplate","create-react-app","graphql","graphql-js","isomorphic","javascript","react","react-starter","react-starter-kit","reactjs","relay","relay-modern","server-side-rendering","single-page-app","ssr","template","webpack"],"created_at":"2024-07-31T17:00:34.890Z","updated_at":"2025-05-15T03:08:29.114Z","avatar_url":"https://github.com/kriasoft.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003e\n  React App SDK\u003cbr\u003e\n  \u003ca href=\"https://npmjs.com/package/react-app-tools\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-app-tools.svg?maxAge=3600\" height=\"20\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://npmjs.com/package/react-app-tools\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/react-app-tools.svg?maxAge=3600\" height=\"20\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://opencollective.com/react-app\"\u003e\u003cimg src=\"https://opencollective.com/react-app/backers/badge.svg?maxAge=3600\" height=\"20\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://twitter.com/ReactSDK\"\u003e\u003cimg src=\"https://img.shields.io/twitter/follow/ReactSDK.svg?style=social\u0026amp;label=Follow\u0026amp;maxAge=3600\" height=\"20\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://t.me/reactapp\"\u003e\u003cimg src=\"https://img.shields.io/badge/chat-Telegram-green.svg?style=social\u0026amp;maxAge=3600\" height=\"20\"\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\nEverything you love about **[Create React App](https://github.com/facebook/create-react-app)** plus\nserver-side code support (SSR, GraphQL API, etc) and config overrides (Babel, Webpack, etc.). See\nthe [demo project](https://github.com/kriasoft/react-firebase-starter).\n\n**React App SDK** is intended to be used as a drop-in replacement for `react-scripts` NPM module.\nIf you want to add server-side code into your application built with Create React App, all you have\nto do is to replace `react-scripts` dev dependency with `react-app-tools` plus provide one more\nentry point for Node.js as demonstrated below:\n\n#### Directory Layout\n\n```bash\n.\n├── build/                      # Compiled output\n├── src/                        # Universal application source code\n│   ├── components/             # Shared React.js components\n│   │   ├── /App/               #   - The top-level React component\n│   │   ├── /Button/            #   - Some other UI element\n│   │   └── ...                 #   - etc.\n│   ├── server/                 # Node.js app\n│   │   ├── ssr.js              #   - Server-side rendering, e.g. ReactDOMServer.renderToString(\u003cApp /\u003e)\n│   │   ├── api.js              #   - GraphQL API endpoint\n│   │   └── index.js            #   - Node.js app entry point\n│   └── index.js                # Client-side app entry point, e.g. ReactDOM.hydrate(\u003cApp /\u003e, container)\n└── package.json                # List of project dependencies and NPM scripts\n```\n\n#### `package.json`\n\n```diff\n{\n  \"main\": \"build/server.js\",\n  \"engines\": {\n    \"node\": \"\u003e=8.10\"\n  },\n  \"dependencies\": {\n+   \"express\": \"^4.6.14\",\n    \"react\": \"^16.8.4\",\n    \"react-dom\": \"^16.8.4\"\n  },\n  \"devDependencies\": {\n-   \"react-scripts\": \"^1.1.1\"\n+   \"react-app-tools\": \"^3.1.0-preview.7\"\n  },\n  \"scripts\": {\n-   \"start\": \"react-scripts start\",\n+   \"start\": \"react-app start\",\n-   \"build\": \"react-scripts build\",\n+   \"build\": \"react-app build\",\n-   \"test\": \"react-scripts test\"\n+   \"test\": \"react-app test\"\n  }\n}\n```\n\n#### `src/index.js` - Client-side rendering\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './components/App';\n\nReactDOM.hydrate(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n#### `src/server/index.js` - Server-side rendering and/or API endpoint\n\n```js\nconst path = require('path');\nconst express = require('express');\nconst React = require('react');\nconst ReactDOMServer = require('react-dom/server');\nconst App = require('../components/App');\nconst stats = require('./stats.json');\n\nconst app = express();\n\napp.get('*', (req, res) =\u003e {\n  res.send(`\n    \u003chtml\u003e\n      \u003cbody\u003e\n        \u003cdiv id=\"root\"\u003e${ReactDOMServer.renderToString(\u003cApp /\u003e)}\u003c/div\u003e\n        ${stats.entrypoints.main.assets.map(\n          src =\u003e `\u003cscript src=\"${src}\"\u003e\u003c/script\u003e`\n        )}\n      \u003c/body\u003e\n    \u003c/html\u003e\n  `);\n});\n\nif (process.env.NODE_ENV === 'production') {\n  app.listen(process.env.PORT || 8080);\n} else {\n  module.exports.default = app;\n}\n```\n\nYou can launch the app in development mode by running:\n\n```sh\n$ npm install\n$ npm start\n```\n\nThen open [http://localhost:3000/](http://localhost:3000/) to see your app.\u003cbr\u003e\nWhen you’re ready to deploy to production, create a minified bundle with `npm run build`.\n\n\u003cp align=\"center\"\u003e\u003cimg src='https://camo.githubusercontent.com/506a5a0a33aebed2bf0d24d3999af7f582b31808/687474703a2f2f692e696d6775722e636f6d2f616d794e66434e2e706e67' width='600' alt='npm start'\u003e\u003c/p\u003e\n\nFor more information refer to Create React App documentation:\n\n- [Getting Started](https://github.com/facebookincubator/create-react-app#getting-started) – How to create a new app.\n- [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.\n\nJoin our Telegram chat for support and feature requests - https://t.me/reactapp\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://www.youtube.com/watch?v=GH3kJwQ7mxM\"\u003e\u003cimg src=\"http://img.youtube.com/vi/GH3kJwQ7mxM/maxresdefault.jpg\" width=\"1187\" alt=\"Server-side rendering with React.js\" /\u003e\u003cbr /\u003e\u003csup\u003eHow fast is React SSR?\u003c/sup\u003e\u003c/a\u003e\u003c/p\u003e\n\n## How to Customize\n\nCreate `webpack.config.js` file in the root of your project that extends the\ndefault Webpack configuration. For example:\n\n```js\nmodule.exports = () =\u003e {\n  const [\n    browserConfig,\n    serverConfig,\n  ] = require('react-app-tools/config/webpack');\n  return [\n    browserConfig,\n    {\n      ...serverConfig,\n      plugins: {\n        ...serverConfig.plugins.concat(\n          new LimitChunkCountPlugin({ maxChunks: 1 })\n        ),\n      },\n    },\n  ];\n};\n```\n\n## Backers\n\nLove **React App SDK**? Help us keep it alive by [donating](https://opencollective.com/react-app)\nfunds to cover project expenses!\n\n\u003ca href=\"https://opencollective.com/react-app/backers/0/website\"\u003e\n  \u003cimg src=\"https://opencollective.com/react-app/backers/0/avatar\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-app/backers/1/website\"\u003e\n  \u003cimg src=\"https://opencollective.com/react-app/backers/1/avatar\" height=\"64\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-app/backers/2/website\"\u003e\n  \u003cimg src=\"https://opencollective.com/react-app/backers/2/avatar\" height=\"64\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-app/backers/3/website\"\u003e\n  \u003cimg src=\"https://opencollective.com/react-app/backers/3/avatar\" height=\"64\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-app/backers/4/website\"\u003e\n  \u003cimg src=\"https://opencollective.com/react-app/backers/4/avatar\" height=\"64\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-app/backers/5/website\"\u003e\n  \u003cimg src=\"https://opencollective.com/react-app/backers/5/avatar\" height=\"64\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-app/backers/6/website\"\u003e\n  \u003cimg src=\"https://opencollective.com/react-app/backers/6/avatar\" height=\"64\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-app/backers/7/website\"\u003e\n  \u003cimg src=\"https://opencollective.com/react-app/backers/7/avatar\" height=\"64\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-app/backers/8/website\"\u003e\n  \u003cimg src=\"https://opencollective.com/react-app/backers/8/avatar\" height=\"64\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-app/backers/9/website\"\u003e\n  \u003cimg src=\"https://opencollective.com/react-app/backers/9/avatar\" height=\"64\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-app/backers/10/website\"\u003e\n  \u003cimg src=\"https://opencollective.com/react-app/backers/10/avatar\" height=\"64\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-app/backers/11/website\"\u003e\n  \u003cimg src=\"https://opencollective.com/react-app/backers/11/avatar\" height=\"64\"\u003e\n\u003c/a\u003e\n\n## Contribute\n\nHelp shape the future of **React App SDK** by joining our [community](https://t.me/reactapp)\ntoday, check out the [open issues](https://github.com/kriasoft/react-app/issues), submit [new\nfeature ideas](https://github.com/kriasoft/react-app/issues/new?labels=enhancement) and [bug\nreports](https://github.com/kriasoft/react-app/issues/new?labels=bug), send us [pull\nrequests](CONTRIBUTING.md#submitting-a-pull-request)!\n\n## License\n\n[MIT](https://github.com/kriasoft/react-app/blob/master/LICENSE) © 2016-present Facebook, Kriasoft.\n","funding_links":["https://opencollective.com/react-app","https://opencollective.com/react-app/backers/0/website","https://opencollective.com/react-app/backers/0/avatar","https://opencollective.com/react-app/backers/1/website","https://opencollective.com/react-app/backers/1/avatar","https://opencollective.com/react-app/backers/2/website","https://opencollective.com/react-app/backers/2/avatar","https://opencollective.com/react-app/backers/3/website","https://opencollective.com/react-app/backers/3/avatar","https://opencollective.com/react-app/backers/4/website","https://opencollective.com/react-app/backers/4/avatar","https://opencollective.com/react-app/backers/5/website","https://opencollective.com/react-app/backers/5/avatar","https://opencollective.com/react-app/backers/6/website","https://opencollective.com/react-app/backers/6/avatar","https://opencollective.com/react-app/backers/7/website","https://opencollective.com/react-app/backers/7/avatar","https://opencollective.com/react-app/backers/8/website","https://opencollective.com/react-app/backers/8/avatar","https://opencollective.com/react-app/backers/9/website","https://opencollective.com/react-app/backers/9/avatar","https://opencollective.com/react-app/backers/10/website","https://opencollective.com/react-app/backers/10/avatar","https://opencollective.com/react-app/backers/11/website","https://opencollective.com/react-app/backers/11/avatar"],"categories":["Alternatives","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkriasoft%2Freact-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkriasoft%2Freact-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkriasoft%2Freact-app/lists"}