Skip to content

Commit 153a8f8

Browse files
kentcdoddskentcdodds
committed
init
0 parents  commit 153a8f8

33 files changed

+15027
-0
lines changed

‎.github/workflows/validate.yml

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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+
branches:
13+
- 'main'
14+
jobs:
15+
setup:
16+
strategy:
17+
matrix:
18+
os: [ubuntu-latest, windows-latest, macos-latest]
19+
runs-on: ${{ matrix.os }}
20+
steps:
21+
- name: ⬇️ Checkout repo
22+
uses: actions/checkout@v4
23+
24+
- name: ⎔ Setup node
25+
uses: actions/setup-node@v4
26+
with:
27+
node-version: 20
28+
29+
- name: ▶️ Run setup script
30+
run: npm run setup
31+
32+
- name: ʦ TypeScript
33+
run: npm run typecheck
34+
35+
- name: ⬣ ESLint
36+
run: npm run lint
37+
38+
deploy:
39+
name: 🚀 Deploy
40+
runs-on: ubuntu-latest
41+
# only deploy main branch on pushes on non-forks
42+
if:
43+
${{ github.ref == 'refs/heads/main' && github.event_name == 'push' &&
44+
github.repository_owner == 'epicweb-dev' }}
45+
46+
steps:
47+
- name: ⬇️ Checkout repo
48+
uses: actions/checkout@v4
49+
50+
- name: 🎈 Setup Fly
51+
uses: superfly/flyctl-actions/[email protected]
52+
53+
- name: 🚀 Deploy
54+
run: flyctl deploy --remote-only
55+
working-directory: ./epicshop
56+
env:
57+
FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

‎.gitignore

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
12+
# in a real app you'd want to not commit the .env
13+
# file as well, but since this is for a workshop
14+
# we're going to keep them around.
15+
# .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: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<div>
2+
<h1 align="center"><a href="https://www.epicweb.dev/workshops">Get Started with React Router 🧭</a></h1>
3+
<strong>
4+
Learn the fundamentals of the React Router library
5+
</strong>
6+
<p>
7+
In this workshop you'll get going with React Router from the very beginning all the way to creating routes with dynamic segments, layout routes, nested routes, and linking between all of these different kinds of routes. It's a perfect start to your routing journey.
8+
</p>
9+
</div>
10+
11+
<hr />
12+
13+
<div align="center">
14+
<a
15+
alt="Epic Web logo with the words Deployed Version"
16+
href="https://epicweb-dev-get-started-with-react-router.fly.dev/"
17+
>
18+
<img
19+
width="300px"
20+
src="https://github-production-user-asset-6210df.s3.amazonaws.com/1500684/254000390-447a3559-e7b9-4918-947a-1b326d239771.png"
21+
/>
22+
</a>
23+
</div>
24+
25+
<hr />
26+
27+
<!-- prettier-ignore-start -->
28+
[![Build Status][build-badge]][build]
29+
[![GPL 3.0 License][license-badge]][license]
30+
[![Code of Conduct][coc-badge]][coc]
31+
<!-- prettier-ignore-end -->
32+
33+
## Prerequisites
34+
35+
- Basic understanding of HTML, CSS, JavaScript, and TypeScript
36+
- Install the [React DevTools](https://react.dev/learn/react-developer-tools)
37+
- You should be experienced with building custom React components
38+
39+
<!--
40+
41+
## Pre-workshop Resources
42+
43+
Here are some resources you can read before taking the workshop to get you up to
44+
speed on some of the tools and concepts we'll be covering:
45+
46+
- TODO: add some good pre-workshop resources
47+
48+
-->
49+
50+
## System Requirements
51+
52+
- [git][git] v2.18 or greater
53+
- [NodeJS][node] v18 or greater
54+
- [npm][npm] v8 or greater
55+
56+
All of these must be available in your `PATH`. To verify things are set up
57+
properly, you can run this:
58+
59+
```shell
60+
git --version
61+
node --version
62+
npm --version
63+
```
64+
65+
If you have trouble with any of these, learn more about the PATH environment
66+
variable and how to fix it here for [windows][win-path] or
67+
[mac/linux][mac-path].
68+
69+
## Setup
70+
71+
This is a pretty large project (it's actually many apps in one) so it can take
72+
several minutes to get everything set up the first time. Please have a strong
73+
network connection before running the setup and grab a snack.
74+
75+
> **Warning**: This repo is _very_ large. Make sure you have a good internet
76+
> connection before you start the setup process. The instructions below use
77+
> `--depth` to limit the amount you download, but if you have a slow connection,
78+
> or you pay for bandwidth, you may want to find a place with a better
79+
> connection.
80+
81+
Follow these steps to get this set up:
82+
83+
```sh nonumber
84+
git clone --depth 1 https://github.com/epicweb-dev/get-started-with-react-router.git
85+
cd get-started-with-react-router
86+
npm run setup
87+
```
88+
89+
If you experience errors here, please open [an issue][issue] with as many
90+
details as you can offer.
91+
92+
## The Workshop App
93+
94+
Learn all about the workshop app on the
95+
[Epic Web Getting Started Guide](https://www.epicweb.dev/get-started).
96+
97+
[![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)
98+
99+
<!-- prettier-ignore-start -->
100+
[npm]: https://www.npmjs.com/
101+
[node]: https://nodejs.org
102+
[git]: https://git-scm.com/
103+
[build-badge]: https://img.shields.io/github/actions/workflow/status/epicweb-dev/get-started-with-react-router/validate.yml?branch=main&logo=github&style=flat-square
104+
[build]: https://github.com/epicweb-dev/get-started-with-react-router/actions?query=workflow%3Avalidate
105+
[license-badge]: https://img.shields.io/badge/license-GPL%203.0%20License-blue.svg?style=flat-square
106+
[license]: https://github.com/epicweb-dev/get-started-with-react-router/blob/main/LICENSE
107+
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
108+
[coc]: https://kentcdodds.com/conduct
109+
[win-path]: https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/
110+
[mac-path]: http://stackoverflow.com/a/24322978/971592
111+
[issue]: https://github.com/epicweb-dev/get-started-with-react-router/issues/new
112+
<!-- 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: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
FROM node:22-bookworm-slim as base
2+
3+
RUN apt-get update && apt-get install -y git
4+
5+
ENV EPICSHOP_CONTEXT_CWD="/myapp/workshop-content"
6+
ENV EPICSHOP_DEPLOYED="true"
7+
ENV EPICSHOP_DISABLE_WATCHER="true"
8+
ENV FLY="true"
9+
ENV PORT="8080"
10+
ENV NODE_ENV="production"
11+
12+
WORKDIR /myapp
13+
14+
ADD . .
15+
16+
RUN npm install --omit=dev
17+
18+
CMD rm -rf ${EPICSHOP_CONTEXT_CWD} && \
19+
git clone https://github.com/epicweb-dev/get-started-with-react-router ${EPICSHOP_CONTEXT_CWD} && \
20+
cd ${EPICSHOP_CONTEXT_CWD} && \
21+
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)