{"id":17561984,"url":"https://github.com/goldstack/react-ssr","last_synced_at":"2025-04-19T18:39:11.704Z","repository":{"id":65098561,"uuid":"548037115","full_name":"goldstack/react-ssr","owner":"goldstack","description":"React Server-Side Rendering (SSR)","archived":false,"fork":false,"pushed_at":"2025-04-07T06:14:03.000Z","size":441924,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T06:31:29.442Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/goldstack.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":"2022-10-08T20:07:16.000Z","updated_at":"2025-04-07T06:14:07.000Z","dependencies_parsed_at":"2025-04-07T06:37:27.104Z","dependency_job_id":null,"html_url":"https://github.com/goldstack/react-ssr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldstack%2Freact-ssr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldstack%2Freact-ssr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldstack%2Freact-ssr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldstack%2Freact-ssr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/goldstack","download_url":"https://codeload.github.com/goldstack/react-ssr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249766512,"owners_count":21322608,"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":[],"created_at":"2024-10-21T12:10:17.599Z","updated_at":"2025-04-19T18:39:11.682Z","avatar_url":"https://github.com/goldstack.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"right\"\u003e\u003cimg src=\"https://cdn.goldstack.party/img/202203/goldstack_icon.png\" height=\"12\"\u003e Generated with \u003ca href=\"https://goldstack.party\"\u003eGoldstack\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://goldstack.party/templates/static-website\"\u003e\n    \u003cimg src=\"https://cdn.goldstack.party/img/202210/reactjs.svg\" height=\"80\"\u003e\n    \u003ch1 align=\"center\"\u003eReact Server-Side Rendering\u003c/h1\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# React Server-Side Rendering (SSR)\n\nExample project for developing **truly serverless** React Server-Side rendering (SSR).\n\nThis boilerplate has been automatically generated using the template:\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003cp align=\"center\"\u003e\u003ca href=\"https://goldstack.party/templates/server-side-rendering\"\u003e\u003cimg width=\"50\" src=\"https://cdn.goldstack.party/img/202210/reactjs.svg\"\u003e\u003c/a\u003e\u003c/p\u003e\n        \u003cp\u003e\u003ca href=\"https://goldstack.party/templates/server-side-rendering\"\u003eServer-Side Rendering\u003c/a\u003e\u003c/p\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\nFeel free to fork this repository and modify it for your needs, or use the [Goldstack project builder](https://goldstack.party/build) to generate a boilerplate specifically configured for your project.\n\n# Getting Started\n\nThank you for using this boilerplate. For any questions or feedback, please be welcome to [raise an issue on GitHub](https://github.com/goldstack/goldstack/issues) 🤗 .\n\n## 1. Fork and clone the repository\n\n[Fork this repository](https://docs.github.com/en/get-started/quickstart/fork-a-repo) and then [clone](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) the fork your local machine.\n\n## 2. Install required local dependencies\n\nA few dependencies need to be available in your development system. Please verify they are present or install them.\n\n- Node v20+\n- Yarn v1.22.5+\n- Docker v20+\n\nOpen a terminal and run the following commands:\n\n```bash\nnode -v\nyarn -v\ndocker --version\n```\n\nThis should produce the following output:\n\n![Confirming versions in the console](https://cdn.goldstack.party/img/202203/confirm_versions.png)\n\nIf you need to install or update any of the dependencies, please see the following guides:\n\n- [Downloading and installing Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n- [Yarn Installation](https://yarnpkg.com/getting-started/install)\n- [Install Docker for Windows](https://docs.docker.com/docker-for-windows/install/) / [Install Docker for Mac](https://docs.docker.com/docker-for-mac/install/)\n\n## 3. Initialise project and install NPM Dependencies\n\nRun `yarn` in your project directory to install and download all dependencies.\n\nThe installation process should take around 3-10 minutes depending on the dependencies that need to be downloaded.\n\n![Installing project dependencies](https://cdn.goldstack.party/img/202203/install_project.gif)\n\nYou can confirm everything was installed correctly by running `yarn -v`. This should show a yarn version of `3.0.0+`.\n\n![Confirming Yarn Version after install](https://cdn.goldstack.party/img/202203/confirm_yarn_version_after_install.png)\n\n## 4. Build modules\n\nMake sure that the project compiles correctly by running `yarn build` your project directory:\n\n![Building your project](https://cdn.goldstack.party/img/202203/build_project.gif)\n\nNote that this command also ensures that all TypeScript project references are configured correctly.\n\n## 5. Configure VSCode\n\nIn order to setup VSCode, open the project in VSCode.\n\nVSCode may prompt you to ask if you trust the authors of the workspace. Respond with Yes.\n\n\u003cimg src=\"https://cdn.goldstack.party/img/202201/trust_authors.png\" width=\"300\" alt=\"VSCode Prompt trust authors\"\u003e\n\nYou may also be asked if you want to install recommended extensions for this workspace. We recommend to do so since the template will be optimised to work with the suggested extensions.\n\n![VSCode Prompt install extensions](https://cdn.goldstack.party/img/202201/install_extensions.png)\n\nIf you want to install the necessary extensions manually, here are links to the extensions required:\n\n- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n- [ZipFS](https://marketplace.visualstudio.com/items?itemName=arcanis.vscode-zipfs) (optional)\n\n## 6. Initialise TypeScript\n\nLocate a `.ts` or `.tsx` file in the workspace and open it. When asked whether to use the workspace TypeScript version, click _Allow_.\n\n\u003cimg src=\"https://cdn.goldstack.party/img/202201/allow_typescript.gif\"  alt=\"VSCode Locate TypeScript\"\u003e\n\nIn the status bar on the bottom right-hand corner of the VSCode editor you should now see _TypeScript_.\n\n![TypeScript status icon in VSCode](https://cdn.goldstack.party/img/202203/typescript_init.png)\n\n## 7. Local Development\n\nGo the the folder `packages/server-side-rendering` and run `yarn watch`.\n\nCreate new routes by creating files in the `packages/server-side-rendering/src/routes`.\n\n## 8. Deploy to AWS\n\nIf you want to deploy your project to AWS, you will need to make some changes to the configuration files included in this project.\n\nSpecifically, the `goldstack.json` file in the `packages/server-side-rendering` folder.\n\n```json\n{\n  \"$schema\": \"./schemas/package.schema.json\",\n  \"name\": \"server-side-rendering\",\n  \"template\": \"server-side-rendering\",\n  \"templateVersion\": \"0.1.5\",\n  \"configuration\": {},\n  \"deployments\": [\n    {\n      \"name\": \"dev\",\n      \"configuration\": {\n        \"lambdas\": {},\n        \"lambdaNamePrefix\": \"myapp\",\n        \"domain\": \"myapp.com\",\n        \"hostedZoneDomain\": \"myapp.com\"\n      },\n      \"awsUser\": \"awsUser\",\n      \"awsRegion\": \"us-east-2\"\n    }\n  ]\n}\n```\n\nThe key properties you will need to update are:\n\n- `deployments[0].configuration.hostedZoneDomain`\n- `deployments[0].configuration.websiteDomain`\n\nAlso you need to _delete_ `deployments[0].tfStateKey` entry if it exists.\n\nFor more information on these configuration options, see [Goldstack Documentation / Server-Side Rendering Template / Configure](https://docs.goldstack.party/docs/templates/server-side-rendering#configure).\n\nYou will also need to ensure that you have a valid AWS user configure to deploy to AWS. For this, create a file in `/config/infra/config.json` (relative to project root).\n\n    {\n      \"users\": [\n        {\n          \"name\": \"goldstack-dev\",\n          \"type\": \"apiKey\",\n          \"config\": {\n            \"awsAccessKeyId\": \"...\",\n            \"awsSecretAccessKey\": \"...\",\n            \"awsDefaultRegion\": \"us-west-2\"\n          }\n        },\n        {\n          \"name\": \"goldstack-prod\",\n          \"type\": \"apiKey\",\n          \"config\": {\n            \"awsAccessKeyId\": \"...\",\n            \"awsSecretAccessKey\": \"\",\n            \"awsDefaultRegion\": \"us-west-2\"\n          }\n        }\n      ]\n    }\n\nFor more information on configuring your local AWS users, please see [Goldstack Documentation / AWS Configuration](https://docs.goldstack.party/docs/goldstack/configuration#aws-configuration).\n\nOnce your AWS user is configured you can run `yarn infra up prod` in the `/packages/server-side-rendering` folder. For more information on the infrastructure commands for this project, see [Goldstack Documentation / Server-Side Rendering Template / Infrastructure](https://docs.goldstack.party/docs/templates/server-side-rendering#infrastructure).\n\n## 9. Contribute to Goldstack\n\nHave questions or ideas or want to contribute to the project? Please head over to [github.com/goldstack/goldstack](https://github.com/goldstack/goldstack).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoldstack%2Freact-ssr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoldstack%2Freact-ssr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoldstack%2Freact-ssr/lists"}