Skip to content

Commit 069c72e

Browse files
kentcdoddskentcdodds
committed
wip
0 parents  commit 069c72e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+25870
-0
lines changed

‎.github/workflows/validate.yml‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
name: deploy
2+
3+
concurrency:
4+
group: ${{ github.workflow }}-${{ github.ref }}
5+
cancel-in-progress: true
6+
7+
on:
8+
push:
9+
branches:
10+
- 'main'
11+
pull_request: {}
12+
13+
jobs:
14+
setup:
15+
name: 🔧 Setup
16+
timeout-minutes: 10
17+
strategy:
18+
matrix:
19+
os: [ubuntu-latest, windows-latest, macos-latest]
20+
runs-on: ${{ matrix.os }}
21+
steps:
22+
- name: ⬇️ Checkout repo
23+
uses: actions/checkout@v4
24+
25+
- name: ⎔ Setup node
26+
uses: actions/setup-node@v4
27+
with:
28+
node-version: 24
29+
30+
- name: ▶️ Run setup script
31+
run: npm run setup
32+
33+
- name: ʦ TypeScript
34+
run: npm run typecheck
35+
36+
- name: ⬣ ESLint
37+
run: npm run lint
38+
39+
tests:
40+
name: 🧪 Test
41+
timeout-minutes: 10
42+
runs-on: ubuntu-latest
43+
# Use continue-on-error to ensure this job doesn't fail the workflow
44+
continue-on-error: true
45+
46+
steps:
47+
- name: ⬇️ Checkout repo
48+
uses: actions/checkout@v4
49+
50+
- name: ⎔ Setup node
51+
uses: actions/setup-node@v4
52+
with:
53+
node-version: 24
54+
55+
- name: 📦 Install dependencies
56+
run: npm ci
57+
58+
- name: 🧪 Run tests
59+
id: run_tests
60+
run: node ./epicshop/test.js ..s
61+
62+
deploy:
63+
name: 🚀 Deploy
64+
timeout-minutes: 10
65+
runs-on: ubuntu-latest
66+
# only deploy main branch on pushes on non-forks
67+
if:
68+
${{ github.ref == 'refs/heads/main' && github.event_name == 'push' &&
69+
github.repository_owner == 'epicweb-dev' }}
70+
71+
steps:
72+
- name: ⬇️ Checkout repo
73+
uses: actions/checkout@v4
74+
75+
- name: 🎈 Setup Fly
76+
uses: superfly/flyctl-actions/[email protected]
77+
78+
- name: 🚀 Deploy
79+
run:
80+
flyctl deploy --remote-only --build-arg
81+
EPICSHOP_GITHUB_REPO=https://github.com/${{ github.repository }}
82+
--build-arg EPICSHOP_COMMIT_SHA=${{ github.sha }}
83+
working-directory: ./epicshop
84+
env:
85+
FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

‎.gitignore‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
node_modules
2+
3+
workspace/
4+
**/.cache/
5+
**/build/
6+
**/public/build
7+
**/playwright-report
8+
data.db
9+
/playground
10+
**/tsconfig.tsbuildinfo
11+
**/dist
12+
13+
# in a real app you'd want to not commit the .env
14+
# file as well, but since this is for a workshop
15+
# we're going to keep them around.
16+
# .env

‎.npmrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
legacy-peer-deps=true
2+
registry=https://registry.npmjs.org/

‎.prettierignore‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
**/node_modules/**
2+
**/.cache/**
3+
**/build/**
4+
**/dist/**
5+
**/public/build/**
6+
**/package-lock.json
7+
**/playwright-report/**

‎LICENSE.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
This material is available for private, non-commercial use under the
2+
[GPL version 3](http://www.gnu.org/licenses/gpl-3.0-standalone.html). If you
3+
would like to use this material to conduct your own workshop, please contact us
4+
at [email protected]

‎README.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<div>
2+
<h1 align="center"><a href="https://www.epicweb.dev/workshops">React Router RSC 💫</a></h1>
3+
<strong>
4+
React Router's take on React Server Components
5+
</strong>
6+
<p>
7+
React Server Components have changed how we think about building React applications. In this lightning talk, Kent will explore how React Router is embracing RSC and what this means for the future of routing in React applications. This talk will dive into how RSC has simplified React Router's architecture and enables powerful new patterns for data loading, streaming, and code splitting.
8+
9+
We'll see how React Router has evolved to work seamlessly with React Server Components, making it easier than ever to build full-stack React applications with excellent performance and developer experience.
10+
</p>
11+
</div>
12+
13+
<hr />
14+
15+
<div align="center">
16+
<a
17+
alt="Epic Web logo with the words Deployed Version"
18+
href="https://epicweb-dev-react-router-rsc.fly.dev/"
19+
>
20+
<img
21+
width="300px"
22+
src="https://github-production-user-asset-6210df.s3.amazonaws.com/1500684/254000390-447a3559-e7b9-4918-947a-1b326d239771.png"
23+
/>
24+
</a>
25+
</div>
26+
27+
<hr />
28+
29+
<!-- prettier-ignore-start -->
30+
[![Build Status][build-badge]][build]
31+
[![GPL 3.0 License][license-badge]][license]
32+
[![Code of Conduct][coc-badge]][coc]
33+
<!-- prettier-ignore-end -->
34+
35+
## Prerequisites
36+
37+
- Understand the basics of React Server Components
38+
39+
## Pre-workshop Resources
40+
41+
Here are some resources you can read before taking the workshop to get you up to
42+
speed on some of the tools and concepts we'll be covering:
43+
44+
- [React Server Components docs](https://react.dev/reference/rsc/server-components)
45+
- [Epic React Workshop on React Server Components](https://www.epicreact.dev/workshops/react-server-components)
46+
47+
## System Requirements
48+
49+
- [git][git] v2.18 or greater
50+
- [NodeJS][node] v18 or greater
51+
- [npm][npm] v8 or greater
52+
53+
All of these must be available in your `PATH`. To verify things are set up
54+
properly, you can run this:
55+
56+
```shell
57+
git --version
58+
node --version
59+
npm --version
60+
```
61+
62+
If you have trouble with any of these, learn more about the PATH environment
63+
variable and how to fix it here for [windows][win-path] or
64+
[mac/linux][mac-path].
65+
66+
## Setup
67+
68+
This is a pretty large project (it's actually many apps in one) so it can take
69+
several minutes to get everything set up the first time. Please have a strong
70+
network connection before running the setup and grab a snack.
71+
72+
> **Warning**: This repo is _very_ large. Make sure you have a good internet
73+
> connection before you start the setup process. The instructions below use
74+
> `--depth` to limit the amount you download, but if you have a slow connection,
75+
> or you pay for bandwidth, you may want to find a place with a better
76+
> connection.
77+
78+
Follow these steps to get this set up:
79+
80+
```sh nonumber
81+
git clone --depth 1 https://github.com/epicweb-dev/react-router-rsc.git
82+
cd react-router-rsc
83+
npm run setup
84+
```
85+
86+
If you experience errors here, please open [an issue][issue] with as many
87+
details as you can offer.
88+
89+
## The Workshop App
90+
91+
Learn all about the workshop app on the
92+
[Epic Web Getting Started Guide](https://www.epicweb.dev/get-started).
93+
94+
[![Kent with the workshop app in the background](https://github-production-user-asset-6210df.s3.amazonaws.com/1500684/280407082-0e012138-e01d-45d5-abf2-86ffe5d03c69.png)](https://www.epicweb.dev/get-started)
95+
96+
<!-- prettier-ignore-start -->
97+
[npm]: https://www.npmjs.com/
98+
[node]: https://nodejs.org
99+
[git]: https://git-scm.com/
100+
[build-badge]: https://img.shields.io/github/actions/workflow/status/epicweb-dev/react-router-rsc/validate.yml?branch=main&logo=github&style=flat-square
101+
[build]: https://github.com/epicweb-dev/react-router-rsc/actions?query=workflow%3Avalidate
102+
[license-badge]: https://img.shields.io/badge/license-GPL%203.0%20License-blue.svg?style=flat-square
103+
[license]: https://github.com/epicweb-dev/react-router-rsc/blob/main/LICENSE
104+
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
105+
[coc]: https://kentcdodds.com/conduct
106+
[win-path]: https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/
107+
[mac-path]: http://stackoverflow.com/a/24322978/971592
108+
[issue]: https://github.com/epicweb-dev/react-router-rsc/issues/new
109+
<!-- prettier-ignore-end -->

‎epicshop/.npmrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
legacy-peer-deps=true
2+
registry=https://registry.npmjs.org/

‎epicshop/Dockerfile‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
FROM node:24-bookworm-slim as base
2+
3+
RUN apt-get update && apt-get install -y git
4+
5+
# Build argument for GitHub repo URL
6+
ARG EPICSHOP_GITHUB_REPO
7+
ENV EPICSHOP_GITHUB_REPO=${EPICSHOP_GITHUB_REPO}
8+
9+
ENV EPICSHOP_CONTEXT_CWD="/myapp/workshop-content"
10+
ENV EPICSHOP_HOME_DIR="/myapp/.epicshop"
11+
ENV EPICSHOP_DEPLOYED="true"
12+
ENV EPICSHOP_DISABLE_WATCHER="true"
13+
ENV FLY="true"
14+
ENV PORT="8080"
15+
ENV NODE_ENV="production"
16+
17+
# Build argument for commit SHA to bust cache when repo changes
18+
ARG EPICSHOP_COMMIT_SHA
19+
ENV EPICSHOP_COMMIT_SHA=${EPICSHOP_COMMIT_SHA}
20+
21+
WORKDIR /myapp
22+
23+
# Clone the workshop repo during build time, excluding database files
24+
# Clone specific commit to keep image small while ensuring cache busting
25+
RUN git init ${EPICSHOP_CONTEXT_CWD} && \
26+
cd ${EPICSHOP_CONTEXT_CWD} && \
27+
git remote add origin ${EPICSHOP_GITHUB_REPO} && \
28+
git fetch --depth 1 origin ${EPICSHOP_COMMIT_SHA} && \
29+
git checkout ${EPICSHOP_COMMIT_SHA}
30+
31+
ADD . .
32+
33+
RUN npm install --omit=dev
34+
35+
RUN cd ${EPICSHOP_CONTEXT_CWD} && \
36+
npx epicshop warm
37+
38+
CMD cd ${EPICSHOP_CONTEXT_CWD} && \
39+
npx epicshop start

‎epicshop/fix-watch.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import path from 'node:path'
2+
import { fileURLToPath } from 'node:url'
3+
import chokidar from 'chokidar'
4+
import { $ } from 'execa'
5+
6+
const __dirname = path.dirname(fileURLToPath(import.meta.url))
7+
const here = (...p) => path.join(__dirname, ...p)
8+
9+
const workshopRoot = here('..')
10+
11+
// Watch the exercises directory
12+
const watcher = chokidar.watch(path.join(workshopRoot, 'exercises'), {
13+
ignored: [
14+
/(^|[\/\\])\../, // ignore dotfiles
15+
(path) => {
16+
// Only watch directories up to depth 2
17+
const relativePath = path.slice(workshopRoot.length + 1)
18+
return relativePath.split('/').length > 4
19+
},
20+
],
21+
persistent: true,
22+
ignoreInitial: true,
23+
})
24+
25+
const debouncedRun = debounce(run, 200)
26+
27+
// Add event listeners.
28+
watcher
29+
.on('addDir', (path) => {
30+
debouncedRun()
31+
})
32+
.on('unlinkDir', (path) => {
33+
debouncedRun()
34+
})
35+
.on('error', (error) => console.log(`Watcher error: ${error}`))
36+
37+
/**
38+
* Simple debounce implementation
39+
*/
40+
function debounce(fn, delay) {
41+
let timer = null
42+
return (...args) => {
43+
if (timer) clearTimeout(timer)
44+
timer = setTimeout(() => {
45+
fn(...args)
46+
}, delay)
47+
}
48+
}
49+
50+
let running = false
51+
52+
async function run() {
53+
if (running) {
54+
console.log('still running...')
55+
return
56+
}
57+
running = true
58+
try {
59+
await $({
60+
stdio: 'inherit',
61+
cwd: workshopRoot,
62+
})`node ./epicshop/fix.js`
63+
} catch (error) {
64+
throw error
65+
} finally {
66+
running = false
67+
}
68+
}
69+
70+
console.log('Watching exercises directory for changes...')
71+
console.log('running fix to start...')
72+
run()

0 commit comments

Comments
 (0)