{"id":21606269,"url":"https://github.com/zaydek/react-ssg","last_synced_at":"2025-04-11T04:05:00.820Z","repository":{"id":51308665,"uuid":"318605861","full_name":"zaydek/react-ssg","owner":"zaydek","description":"Server-generated React","archived":false,"fork":false,"pushed_at":"2021-05-16T15:28:32.000Z","size":853,"stargazers_count":20,"open_issues_count":11,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-11T04:04:56.096Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/zaydek.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":"2020-12-04T18:39:54.000Z","updated_at":"2024-07-08T05:00:28.000Z","dependencies_parsed_at":"2022-08-26T12:34:05.967Z","dependency_job_id":null,"html_url":"https://github.com/zaydek/react-ssg","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/zaydek%2Freact-ssg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaydek%2Freact-ssg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaydek%2Freact-ssg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaydek%2Freact-ssg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zaydek","download_url":"https://codeload.github.com/zaydek/react-ssg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248339287,"owners_count":21087215,"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-11-24T20:20:11.290Z","updated_at":"2025-04-11T04:05:00.803Z","avatar_url":"https://github.com/zaydek.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"When was the last time you felt joy developing web apps _and_ deeply understood your stack?\n\nThis repo is meant to:\n\n- Engage you intellectually: You should understand your tools and your tools should understand you\n- Provide the necessary structure to kickstart your next server-generated React app\n\n## Why?\n\nCurrently, if you want to build a server-generated React app, your choices are somewhat bleak. You can use Gatsby.js or\nNext.js, or you can roll your own server.\n\nSo what’s wrong with Gatsby.js and Next.js? Nothing — really. They work. But for me, _I want more for less_. I want to\nunderstand my tools without exhausting myself in the process. And I want my tools to understand me. What does that mean\nmaterially? I don’t want to marry myself to a modern monolith only to have the industry move on in a few years / months.\nAll things considered, I would rather _invest in myself_. Who wouldn’t want to be more competent and autonomous?\n\nWhat about rolling your own server? Well, that _is_ what this is, but without a lot of the hassle you might otherwise\nencounter. As you’ll discover by reading on, this configuration requires no custom express server, no Babel, and no\nwebpack. 🤭\n\n## How does this work?\n\nIt’s important to understand that this development environment has minimal dependencies:\n\n**Dependencies**\n\n- React\n- React DOM\n- React Router DOM\n\n**Developer dependencies**\n\n- (Types for typed dependencies)\n- TypeScript\n- ts-node\n- esbuild\n- watch (rebuilds our app)\n- serve (serves our app)\n\n_That’s it._ So consider this, with this configuration _you don’t need to think or worry or configure Babel_. Because\nyour app is compiled via the TypeScript compiler, Babel becomes obsolete. Huh? Babel transpiles JSX to JS so browsers\ncan actually understand your code. Just in case this wasn’t clear to you, browsers can’t actually interpret JSX on their\nown. So Babel is a tool that provides a translation layer between your code and standard JS so everyone’s happy. But\nguess what? You don’t actually need Babel if you use TypeScript, because the TypeScript compiler can compile TSX and JSX\ndown to JavaScript, and therefore the browsers are happy. 😄\n\nUsing TypeScript is also a good idea because it means our apps are type-safe by default. No, you don’t have to use\nTypeScript, but should you? It depends. But yeah, TypeScript pays for itself once you get over the learning curve. So\nwhy not? Full disclosure: It took me like 4-5 tries to really value TypeScript. So if you don’t get it at first, don’t\nbe discouraged.\n\nOK what about ts-node? The thing is, while the TypeScript compiler can compile your code, it actually can’t / doesn’t\n_run_ your code. What? Well browsers run your code, or Node can run your code, but if you want to run your TypeScript\ncode, you can use ts-node as a mechanism to invoke Node to run your TypeScript server-side. Alternatively, you can just\nuse Node if TypeScript isn’t for you.\n\nAnd what’s the deal with esbuild? We need a way to bundles our code for the browser, not just compile down from TSX /\nJSX to JS. Instead of learning / configuring webpack, we can actually just use esbuild. esbuild is an amazing tool that\nbundles your code for the browser. What does that mean? Generally, you want to be able to use `import` and `export` to\ncompose your apps logically, and you want to ship one script file (if possible) to the browser. This is exactly what\nesbuild enables us to do: We don’t need to concern ourselves with anything besides app development because esbuild\nbundles our code for the browser. Best of all, esbuild is actually written in Go and is wicked fast.\n\nSo what happens when we create a development environment around these tools?\n\n- No Babel\n- No webpack\n- Build times are measured in milliseconds-seconds\n- We understand our tools and their scope\n- We are more competent and more autonomous\n\nAt worst, this is a fanciful experiment that demonstrates the power of thinking from first principles, as applied to\nserver-side generated React, and at best this is the new baseline for how I develop all future web apps.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzaydek%2Freact-ssg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzaydek%2Freact-ssg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzaydek%2Freact-ssg/lists"}