CORS issues are the bane of frontend engineers.

In Val Town, if you don't customize any CORS headers, we add these defaults:

Access-Control-Allow-Origin: "*"
Access-Control-Allow-Methods: "GET,HEAD,PUT,PATCH,POST,DELETE"

You can override them if you wish to disallow CORS. Check out @neverstew/setCorsHeaders for the easiest way to do this in your code.

This val is a client-side-rendered React app that makes requests to @stevekrouse/cors_example_backend. The backend is in a different val because CORS applies to requests on different domains. The backend has examples of the default permissive CORS behavior and disabled CORS.

stevekrouse.com - my personal website

This val hosts my personal website. The view data is stored in Val Town SQLite - @std/sqlite.

It used to live on Github Pages, which is why I proxy over requests to certain blog posts over to the Github Pages site still.

Todos

• Speed up page load by loading sqlite data later like in @healeycodes/steve_web
• Store more (legally storable) analytics data, and maybe make a sparkline!
• Add some sort of way to contact me
• Move over all my blog posts from Github Pages (maybe into @std/blob as a CMS?)

Live reload in new tabs

When you're working on an HTML HTTP val in a new tab, it's annoying to have to manually reload the tab on every save. In the Val Town editor, you can hit cmd+enter, but there's nothing like that for a val in a new tab because Val Town doesn't control that new tab (like we control the iframe in the browser preview). However, you control that HTML via the fetch handler you're writing, so you can add a script that polls the Val Town API for the current version number of your val, and reload itself if it detects a new version. This val has a collection of helpers to help you do just that.

Usage

Create valimport { html } from "https://esm.town/v/stevekrouse/html";
import { reloadOnSaveFetchMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave";

export default reloadOnSaveFetchMiddleware(async function(req: Request): Promise<Response> {
  return html(`<h1>Hello!!</h1>`);
})

SSR + Hydration Demo

Look at @pomdtr/island and @pomdtr/hydrate_islands to read the whole library source code (less than 50 rows!).

Demo: @pomdtr/island_demo

⚠️ Deprecated in favor of @stevekrouse/reloadOnSave

Starter App for ssr_react_mini

You need to export four things:

1. loader - runs on any GET request, on the server. it accepts the Request and returns the props of your React compnent.
2. action- runs on the server on any non-GET, ie POST, PUT, DELETE, or <form>s submit
3. Component - your React component. it's initially server-rendered and then client-hydrated
4. default - you should mostly leave this line alone

This is framework is bleeding-edge. You'll need to read the code of the framework itself (it's very short) to understand what it's doing.

If you have questions or comments, please comment below on this val! (or any of these vals)