{"id":13480096,"url":"https://github.com/joernb/react-scripts-with-ssr","last_synced_at":"2025-03-27T10:31:03.227Z","repository":{"id":57344204,"uuid":"167555016","full_name":"joernb/react-scripts-with-ssr","owner":"joernb","description":"Adds server-side rendering to create-react-app projects","archived":false,"fork":false,"pushed_at":"2019-02-19T20:22:19.000Z","size":3839,"stargazers_count":14,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T13:21:19.424Z","etag":null,"topics":["create-react-app","react-scripts","server-side-rendering","ssr","webpack"],"latest_commit_sha":null,"homepage":"","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/joernb.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":"2019-01-25T13:51:33.000Z","updated_at":"2023-06-26T15:37:13.000Z","dependencies_parsed_at":"2022-09-12T06:30:38.161Z","dependency_job_id":null,"html_url":"https://github.com/joernb/react-scripts-with-ssr","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joernb%2Freact-scripts-with-ssr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joernb%2Freact-scripts-with-ssr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joernb%2Freact-scripts-with-ssr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joernb%2Freact-scripts-with-ssr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joernb","download_url":"https://codeload.github.com/joernb/react-scripts-with-ssr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245826784,"owners_count":20678854,"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":["create-react-app","react-scripts","server-side-rendering","ssr","webpack"],"created_at":"2024-07-31T17:00:34.536Z","updated_at":"2025-03-27T10:31:02.776Z","avatar_url":"https://github.com/joernb.png","language":"JavaScript","readme":"# react-scripts-with-ssr [![Build Status](https://travis-ci.org/joernb/react-scripts-with-ssr.svg?branch=master)](https://travis-ci.org/joernb/react-scripts-with-ssr)\n\nThis is a fork of [react-scripts](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts), which adds support for server-side rendering (SSR).\n\n`react-scripts` is a part of [Create React App](https://github.com/facebook/create-react-app), which can be used with a customized version of `react-scripts`.\n\n## Getting Started\n\nInstall create-react-app:\n```sh\nnpm i -g create-react-app\n```\n\nGenerate a new project (add `--typescript` for TypeScript support):\n```sh\nnpx create-react-app my-app --scripts-version react-scripts-with-ssr\ncd my-app\n```\n\nStart a local webpack dev server with integrated server-side rendering:\n```sh\nnpm start\n```\n\nBuild a production version and test server-side rendering locally:\n```sh\nnpm run build\nnpm run serve\n```\n\n## How it works\n\n### SSR entry point\n\nThe script will generate an additional entry point for server-side rendering in `src/index.ssr.js` (or `src/index.ssr.tsx`). It exports an express-style request handler, that looks like this:\n\n```js\nexport default (request, response) =\u003e {\n  // ...\n  response.status(200).send(\"...\");\n};\n```\n\nWebpack will compile this entry point as a separate library `build/ssr.js`. In production, that library may be imported by an executable node script, which sets up an express server and plugs in the request handler. Such a script is provided as an example at `react-scripts-with-ssr/scripts/serve.js`, which you may start with `npm run serve` to test your production builds. That script however is not part of the compilation. It is up to you to integrate the request handler into your server-side runtime environment.\n\nDuring development, the request handler will be integrated into the local webpack dev server. Start it with `npm start` and open `http://localhost:3000` to see the server-side rendered output.\n\nIf `src/index.ssr.js` exports a function called `devServerHandler`, it will be invoked and its return value will be used as a request handler during development instead. This gives your entry point the possibility to make environment-specific adjustments. For example, all assets are compiled in-memory during development and should not be served from the real file system.\n\n### Relative Urls, PUBLIC_URL and BASE_HREF\n`create-react-app` provides a variable called `PUBLIC_URL`, which is accessible via `process.env.PUBLIC_URL` in JavaScript or by using the placeholder `%PUBLIC_URL%` in HTML to reference assets. This variable is determined at **compile time** and must be specified before compilation, which makes your compiled web app dependant on the specified location.\n\nFor projects with server-side rendering however, there is another way to deal with this. Instead of hardcoding the public url, HTML assets can be referenced with a relative url and the server-side renderer can read a specified base url at **runtime** and render it into a base tag. `react-scripts-with-ssr` supports using `PUBLIC_URL` but also allows the `BASE_HREF` approach:\n* Define a `BASE_HREF` environment variable in your server runtime environment containing your base url (e.g. `https://example.com/folder`).\n* Add `\u003cbase href=\"%BASE_HREF%/\" /\u003e` to your index.html template. Notice the trailing slash.\n* Replace `%BASE_HREF%` with the value of `process.env.BASE_HREF` in your server-side request handler.\n* Make all asset references in HTML relative. Do not use `%PUBLIC_URL%` in URLs or server-relative URLs (e.g. `/some/url`).\n* Make the build scripts emit relative paths by providing `PUBLIC_URL` as environment variable with the value `.` during compile time or setting the `homepage` field in `package.json` to `.`.\n* If you need access to BASE_HREF in JavaScript, read it from `document.getElementsByTagName(\"base\")[0].href;`.\n\n### Environment variables\n\n`create-react-app` embeds environment variables prefixed with REACT_APP in the build during **compile time** and provides them with a simulated `process.env` object using Webpack's DefinePlugin.\n\nWhile embedding is necessary on the client-side, the ssr request handler runs in a Node.js context with real environment variables. `react-scripts-with-ssr` allows accessing external environment variables in the ssr request handler during **runtime**. However, all variables contained in the client-side build are also embedded into the ssr request handler as default values if they are not provided by the runtime environment.\n\nIf you want to make your server's **runtime** environment variables available on the client-side, you can do this with a `clientEnv` variable:\n* Add a variable assignment script `\u003cscript\u003eclientEnv=%CLIENT_ENV%\u003c/script\u003e` to the head section in `public/index.html`.\n* Replace the placeholder in the ssr request handler with `.replace(/%CLIENT_ENV%/g, JSON.stringify({ FOO: process.env.FOO }))`.\n* Access the value on the client-side with `clientEnv.FOO`.\n* For TypeScript: Declare the global variable `declare const clientEnv: NodeJS.ProcessEnv;`.\n\nYou might also use this mechanism to transfer preloaded state to the client.\n\n\n## Contribute\n\n### Merge react-scripts updates\n\nClone create-react-app and create a subtree branch for react-scripts:\n\n```sh\ngit clone git@github.com:facebook/create-react-app.git create-react-app\ncd create-react-app\ngit checkout react-scripts@2.1.3\ngit subtree split -P packages/react-scripts -b react-scripts-v2.1.3\n```\n\nMerge the subtree branch into this project:\n\n```sh\ngit remote add upstream ../create-react-app\ngit merge upstream react-scripts-v2.1.3\n```\n\n## Sponsors\n\n\u003ca href=\"http://newcubator.com\" target=\"_blank\"\u003e\u003cimg src=\"sponsor-logo.png\"\u003e\u003c/a\u003e\n","funding_links":[],"categories":["React Scripts Versions"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoernb%2Freact-scripts-with-ssr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoernb%2Freact-scripts-with-ssr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoernb%2Freact-scripts-with-ssr/lists"}