Skip to content

Commit 349e4f8

Browse files
author
Jason Barry
committed
Filling out more details in readme
1 parent 353b140 commit 349e4f8

File tree

2 files changed

+67
-46
lines changed

2 files changed

+67
-46
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ yarn-error.log*
2727

2828
# local env files
2929
.env*.local
30+
.env
3031

3132
# netlify
3233
.netlify

‎README.md‎

Lines changed: 66 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ In this workshop, you will learn how to:
2121

2222
### Local setup and CI/CD workflow
2323

24-
<details><summary>Part 1: Initial setup</summary>
24+
<details><summary>Part 1: Initial setup</summary><br />
2525

2626
i. [Log in to Netlify](http://app.netlify.com). If you haven't made an account yet, then [sign up](https://app.netlify.com/signup).
2727

@@ -54,21 +54,18 @@ netlify dev
5454

5555
</details>
5656

57-
<details><summary>Part 2: Understanding deploy contexts and CI/CD</summary>
57+
<details><summary>Part 2: Understanding deploy contexts and CI/CD</summary><br />
5858

5959
Create a new branch, commit changes, push the branch, and open a pull request.
6060

6161
```bash
62-
git checkout -b feat/bookshelf
63-
git add -A
64-
git commit -m "Adding a list of books to the home page"
65-
git push origin feat/bookshelf
62+
git checkout -b testing
63+
git commit -m "Changing some headings to red"
64+
git push origin testing
6665
```
6766

6867
You should see a link to the Deploy Preview as a comment by the Netlify bot on the pull request. Pushing to an open pull request [will kick off a new build](https://www.netlify.com/products/build/) in the Continuous Integration pipeline, and you can inspect the deploy logs as the build is building and deploying.
6968

70-
In addition to deploy logs, the Netlify UI gives you access to function logs as well. You can change the region a function executes by changing the region selector in **Site configuration > Build & deploy > Functions**.
71-
7269
In the Deploy Preview itself, you'll notice a floating toolbar anchored to the bottom of your screen. This is the [Netlify Drawer](https://www.netlify.com/products/deploy-previews/). You and your teammates can use this to leave feedback to each other about the Deploy Preview. Any comments you make will sync back to the pull request on GitHub (or any Git service that you may use).
7370

7471
Back in the pull request, merge to main. This will kick off a production build. Every deploy is [atomic](https://jamstack.org/glossary/atomic/) and [immutable](https://jamstack.org/glossary/immutable/), which makes [instant rollbacks](https://docs.netlify.com/site-deploys/manage-deploys/#rollbacks) a breeze.
@@ -84,29 +81,37 @@ git pull origin main
8481

8582
</details>
8683

87-
<details><summary>Part 3: Share environment variables with your team</summary>
84+
<details><summary>Part 3: Share environment variables with your team</summary><br />
85+
86+
You can securely manage and share environment variables with your teammates in both the Netlify CLI and UI. Let's start with the CLI.
8887

89-
You can manage environment variables in the UI and CLI.
88+
It's common practice for projects to have a gitignored `.env` file in the root of the repo. This one doesn't, so let's add a dummy one now:
9089

91-
Go to **Site configuration > Environment variables** to add site-specific env vars to your site.
90+
```bash
91+
echo "MY_API_TOKEN=asdf123456789" > .env
92+
```
9293

93-
In the CLI, enter the following command to create an environment variable that is scoped to the Functions runtime:
94+
To share this hypothetically-sensitive value with your team, simply use the `env:import` command:
9495

9596
```bash
96-
netlify env:set OPENAI_KEY <YOUR_VALUE> --scope functions
97+
netlify env:import .env
9798
```
9899

100+
Now, when you go to **Site configuration > Environment variables** in the Netlify UI, you should see your environment variable that you had saved in your `.env` file.
101+
102+
You can adjust deploy contexts and scopes in the UI, and in the CLI too.
103+
99104
💡 Learn more about [environment variables](https://docs.netlify.com/environment-variables/overview/) in our docs.
100105

101106
</details>
102107

103108
### Platform features
104109

105-
<details><summary>Part 1: Getting acquainted with the Netlify UI</summary>
110+
<details><summary>Part 1: Getting acquainted with the Netlify UI</summary><br />
106111

107112
Here, we'll take a quick segue from our CLI and dev environment to showcase more features from the Netlify UI.
108113

109-
- Deploy logs
114+
- [Deploy logs](https://docs.netlify.com/site-deploys/overview/#deploy-log)
110115
- [Log Drains](https://docs.netlify.com/monitor-sites/log-drains/)
111116
- [Analytics](https://docs.netlify.com/monitor-sites/site-analytics/)
112117
- [Real User Metrics](https://docs.netlify.com/monitor-sites/real-user-metrics/)
@@ -115,63 +120,78 @@ Here, we'll take a quick segue from our CLI and dev environment to showcase more
115120

116121
</details>
117122

118-
<details><summary>Part 2: High-level overview of platform primitives</summary>
119-
120-
Here, we'll list out use cases and limitations of core primitives, and why you would choose one over the other.
121-
122-
- Functions
123-
- Edge Functions
124-
- Blobs
125-
- Image CDN
123+
<details><summary>Part 2: High-level overview of platform primitives</summary><br />
124+
125+
These are the primitives that we'll be talking more about in Day 2 of this workshop. It's useful to understand their benefits and how they compare to one another.
126+
127+
- **Functions**
128+
- Built on AWS Lambda
129+
- Runs in a single region (this is configurable)
130+
- 10s execution time (can be extended up to 26s)
131+
- 50MB bundle size max, 6MB payload size max
132+
- Supports streaming
133+
- **Edge Functions**
134+
- Built on Deno Deploy
135+
- Runs on the edge, geographically close to user
136+
- Must respond with headers within 40s
137+
- 20MB bundle size max
138+
- Supports streaming
139+
- **Blobs**
140+
- Built on AWS S3
141+
- Ubiquitously available in build, functions, edge functions
142+
- Optimized for frequent reads / infrequent writes
143+
- Supports CRUD operations
144+
- Deploy-specific stores
145+
- **Image CDN**
146+
- Built on Imgix
147+
- Dynamically optimize and cache images at request-time
148+
149+
Netlify offers more primitives than this -- for example, you can create serverless cron jobs with [Scheduled Functions](https://docs.netlify.com/functions/scheduled-functions/), and run long-running tasks with [Background Functions](https://docs.netlify.com/functions/background-functions/)! But we won't dive into those topics during this workshop.
126150

127151
</details>
128152

129153
### Platform primitives
130154

131-
<details><summary>Part 1: Configuring headers, proxies, and redirects</summary>
155+
<details><summary>Part 1: Configuring headers, proxies, and redirects</summary><br />
132156

133-
Inside your publish directory (for this repo, `/public`), add a `_redirects` file that contains the following:
157+
You can configure many aspects of your site in code with the [netlify.toml](https://docs.netlify.com/configure-builds/file-based-configuration/#sample-netlify-toml-file) file.
134158

135-
```
136-
/* /index.html 200
137-
```
138-
139-
For every fallthrough case (i.e. whenever a route is accessed and there isn't a file match), it will now redirect back to `/index.html`, where `react-router` will route accordingly.
140-
141-
Similar to the `_redirects` file is the `_headers` file. Here you can set custom headers for routes of your choosing. Create a `/public/_headers` file, and save the following:
159+
Similar to the `_redirects` file is the `_headers` file. Here you can set custom headers for routes of your choosing. Inside the `/public/_headers` file, and save the following:
142160

143161
```
144162
/*
145-
X-Frame-Options: SAMEORIGIN
163+
X-Frame-Options: deny
146164
```
147165

148166
This will prevent your site from being loaded in an iframe, a technique that help your site prevent [clickjacking](https://en.wikipedia.org/wiki/Clickjacking) attacks.
149167

150168
You can also configure both redirects and headers inside the `/netlify.toml` file. Here is the `netlify.toml` equivalents of the above:
151169

152170
```
153-
[[redirects]]
154-
from = "/*"
155-
to = "/index.html"
156-
status = 200
157-
158171
[[headers]]
159172
for = "/*"
160173
[headers.values]
161-
X-Frame-Options = "SAMEORIGIN"
174+
X-Frame-Options = "deny"
162175
```
163176

164-
💡 Learn more about [redirects](https://docs.netlify.com/routing/redirects/) and [custom headers](https://docs.netlify.com/routing/headers/) in our docs.
177+
💡 Learn more about [redirects and rewrites](https://docs.netlify.com/routing/redirects/) and [custom headers](https://docs.netlify.com/routing/headers/) in our docs.
165178

166179
</details>
167180

168-
<details><summary>Part 2: Rendering techniques and caching strategies</summary>
181+
<details><summary>Part 2: Rendering techniques and caching strategies</summary><br />
182+
183+
**🧑‍💻 Relevant demo and code:**
184+
185+
- [Static site generation (SSG)](https://netlify-core-workshop.netlify.app/rendering-strategies/ssg) ([src/pages/rendering-strategies/ssg.tsx](https://github.com/netlify/netlify-workshop/blob/main/src/pages/rendering-strategies/ssg.tsx))
186+
- [Server-side rendering (SSR)](https://netlify-core-workshop.netlify.app/rendering-strategies/ssr) ([src/pages/rendering-strategies/ssr.tsx](https://github.com/netlify/netlify-workshop/blob/main/src/pages/rendering-strategies/ssr.tsx))
187+
- [Stale-while-revalidate (SWR)](https://netlify-core-workshop.netlify.app/rendering-strategies/swr) ([src/pages/rendering-strategies/swr.tsx](https://github.com/netlify/netlify-workshop/blob/main/src/pages/rendering-strategies/swr.tsx))
188+
- [On-demand revalidation (ODR)](https://netlify-core-workshop.netlify.app/rendering-strategies/odr) ([src/pages/rendering-strategies/odr.tsx](https://github.com/netlify/netlify-workshop/blob/main/src/pages/rendering-strategies/odr.tsx))
169189

170190
💡 Learn more about [caching](https://docs.netlify.com/platform/caching/) in our docs.
171191

172192
</details>
173193

174-
<details><summary>Part 3: Going serverless with Functions</summary>
194+
<details><summary>Part 3: Going serverless with Functions</summary><br />
175195

176196
**🧑‍💻 Relevant demo and code:**
177197

@@ -198,7 +218,7 @@ Once deployed, you can visit `/.netlify/functions/hello-world` to invoke your Fu
198218

199219
</details>
200220

201-
<details><summary>Part 4: Run middleware and personalize with Edge Functions</summary>
221+
<details><summary>Part 4: Run middleware and personalize with Edge Functions</summary><br />
202222

203223
**🧑‍💻 Relevant demo and code:**
204224

@@ -213,7 +233,7 @@ All this dynamic processing happens in a secure runtime based on Deno directly f
213233

214234
</details>
215235

216-
<details><summary>Part 5: Globally persist data with Blobs</summary>
236+
<details><summary>Part 5: Globally persist data with Blobs</summary><br />
217237

218238
**🧑‍💻 Relevant demo and code:**
219239

@@ -231,7 +251,7 @@ export default async (req: Request) => {
231251

232252
if (req.method === "GET") {
233253
const todos = await store.get("todos", { type: "json" });
234-
return new Response(todos || JSON.stringify([]), { status: 200 });
254+
return Response.json(todos || JSON.stringify([]), { status: 200 });
235255
}
236256

237257
if (req.method === "PUT") {
@@ -246,7 +266,7 @@ export default async (req: Request) => {
246266

247267
</details>
248268

249-
<details><summary>Part 6: Optimize images at runtime with Image CDN</summary>
269+
<details><summary>Part 6: Optimize images at runtime with Image CDN</summary><br />
250270

251271
**🧑‍💻 Relevant demo and code:**
252272

0 commit comments

Comments
 (0)