Val Town Code SearchReturn to Val Town

159          <h3>External Code</h3>
160
161          <h4>Fetch</h4>
162          <p>Fetch is a way for one server to request data from another server. A fetch requires 
163          two const variables. The first is const response = await fetch(url). The second is 
164          const data = await response.json();. If you want to do something besides just retrieve data,
165          you need to add the method. Change the first line from const response = await fetch(url) to
166          await fetch(url, {
167  method: 'any method except GET',
168  headers: { 'Content-Type': 'application/json' },
171
172 <p>
173          To make a fetch request with authorization, you would write const response = await fetch('API endpoint')
174          followed by const data = await response.json() and include headers: { 'Authorization': 'token' } in 
175          your request.
195const app = new Hono();
196app.get("/", HTTP_Guide);
197export default app.fetch;

105});
106
107export default app.fetch;

63/**
64 * Wrap the incoming request, inject the Deno env vars into the Hono app,
65 * and then call the Hono api entrypoint (`app.fetch`)
66 */
67export default async function(req: Request): Promise<Response> {
74  //
75  //        If you don't want those values, remove them from the env object
76  return app.fetch(req, env);
77}

12
13- `/push` will copy the contents from a list of vals specified in `config.json` and push them to a GitHub repo
14- `/deploy` is a GitHub webhook URL that will fetch contents from GitHub and update the code on Val Town
15
161. Fork this val
271. Add a `VAL_SECRET` env var to the val. Use this secret to sign the webhook POST request to the `/push` endpoint. Use this endpoint to commit vals from Val Town to your GitHub repo.
28
29### Example push to GitHub fetch
30
31You can use this example to POST to the `/push` endpoint to copy vals to GitHub.
46  const signature = await sign(body, secret);
47
48  const res = await fetch(url, {
49    method: "POST",
50    body,
89- [x] Monkey test
90- [x] Add setup instructions to readme
91- [x] Add example code for private webhook fetch
92- [x] Make val and repo public
93- [ ] Check modified date before export to GitHub??

22app.post("/deploy", verifyGitHubSignature(GITHUB_WEBHOOK_SECRET), deploy);
23
24export default app.fetch;

63/**
64 * Wrap the incoming request, inject the Deno env vars into the Hono app,
65 * and then call the Hono api entrypoint (`app.fetch`)
66 */
67export default async function(req: Request): Promise<Response> {
74  //
75  //        If you don't want those values, remove them from the env object
76  return app.fetch(req, env);
77}

2  const apiToken = Deno.env.get("VAL_TOWN_RW_PROJECTS");
3
4  const response = await fetch("https://api.val.town/v1/projects", {
5    method: "POST",
6    headers: {

8
9    // Create a new project
10    const projectResponse = await fetch("https://api.val.town/v1/projects", {
11      method: "POST",
12      headers: {
140async function createDirectory(projectId: string, directoryPath: string, apiToken: string): Promise<void> {
141  const encodedPath = encodeURIComponent(directoryPath);
142  const response = await fetch(`https://api.val.town/v1/projects/${projectId}/files/${encodedPath}`, {
143    method: "POST",
144    headers: {
167
168  const encodedPath = encodeURIComponent(file.path);
169  const fileResponse = await fetch(`https://api.val.town/v1/projects/${projectId}/files/${encodedPath}`, {
170    method: "POST",
171    headers: {
204    const appContent = appMatch ? appMatch[0].trim() : "";
205
206    // Extract route paths from fetch calls
207    const fetchCalls = input.match(/fetch\(['"`]([^'"`]+)['"`]|fetch\(\s*['"`]([^'"`]+)['"`]/g) || [];
208    const fetchRoutes = [];
209    for (const fetchCall of fetchCalls) {
210      const urlMatch = fetchCall.match(/['"`](\/[^'"`]+)['"`]/);
211      if (urlMatch && urlMatch[1] && !fetchRoutes.includes(urlMatch[1])) {
212        fetchRoutes.push(urlMatch[1]);
213      }
214    }
289
290  useEffect(() => {
291    async function fetchData() {
292      try {
293        // Example data - replace with your own data source
304    }
305    
306    fetchData();
307  }, []);
308
410    }
411
412    // Create Backend index with any detected fetch routes
413    const backendIndexContent =
414      `import { parseProject, serveFile } from "https://esm.town/v/std/utils@64-main/index.ts";
438});
439${
440        fetchRoutes.includes("/convert")
441          ? `
442// Handle /convert endpoint for the converter
465});
466
467// Export app.fetch (not the app object) - CRITICAL for Val Town HTTP files
468export default app.fetch;`;
469
470    files.push({
514});
515
516export default app.fetch;`,
517          type: "http",
518        },

28});
29
30// Add the /convert endpoint to handle the React app's fetch calls
31app.post("/convert", async (c) => {
32  try {
55});
56
57// Export app.fetch (not the app object) - CRITICAL for Val Town HTTP files
58export default app.fetch;

10
11* This file must be set as an HTTP type in Val Town, not a Script
12* It exports `app.fetch` (not the app object) which is required for Val Town HTTP handlers