Navigating the static folder in Deno: A guide to managing static assets

Question

Navigating the static folder in Deno: A guide to managing static assets

Is it possible to change the static resource file based on the URL query? Here is an example of my folder structure:

/root
-> server.ts
-> /projects
    -> libraries used in index.html files
    -> /project1
       -> index.html
       -> files used in index.html
    -> /project2
       -> index.html
       -> files used in index.html

This is how static files are handled in Deno using the Oak library:

app.use(async (ctx, next) => {    
    await send(ctx, ctx.request.url.pathname, {
        root: `${Deno.cwd()}/static`,
    })

    next()
});

The goal is to display the corresponding index.html file for a specific project ID when accessing a URL like mydomain.com/project/project1.

Currently, the Oak router is used to redirect URLs in this manner:

const router = new Router();
router.get('/project/:project_id', project)

export const project = async (ctx: RouterContext) => {
    ctx.render(`${Deno.cwd()}/projects/` + ctx.params.projectid + '/index.html');
}

Thank you for any assistance provided.

typescript static-files deno

Answer 1

Answer №1

Is your question adequately answered?

For instance: The script dynamically looks for existing folders, and if not found, an error will be generated:

No such file or directory (os error 2)

.
├── projects
│   └── foo
│       └── index.html
└── server.ts

// ./server.ts

import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use(async (context) => {
    await context.send({
        root: Deno.cwd(),
        index: "index.html",
    });
});

await app.listen({ port: 8000 });

// ./projects/foo/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>foo</h1>
</body>
</html>

deno run --allow-net --allow-read=. server.ts

# or /foo, /foo/index.html
curl localhost:8000/projects/foo/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>foo</h1>
</body>
</html>

Answer 2

Is your question adequately answered?

For instance: The script dynamically looks for existing folders, and if not found, an error will be generated:

No such file or directory (os error 2)

.
├── projects
│   └── foo
│       └── index.html
└── server.ts

// ./server.ts

import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use(async (context) => {
    await context.send({
        root: Deno.cwd(),
        index: "index.html",
    });
});

await app.listen({ port: 8000 });

// ./projects/foo/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>foo</h1>
</body>
</html>

deno run --allow-net --allow-read=. server.ts

# or /foo, /foo/index.html
curl localhost:8000/projects/foo/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>foo</h1>
</body>
</html>

Navigating the static folder in Deno: A guide to managing static assets

Answer №1

Similar questions

Creating organized lists in Angular 4 using list separators

How can I iterate through a variable in TypeScript?

Retrieve the JSON information specifically for the selected ID

Angular 2 Login Component Featuring Customizable Templates

I have a Visual Studio 2019 solution that consists of two projects - one is an Angular project and the other is written in TypeScript. I have successfully configured

Learning to utilize the i18n library with React Vite

Retrieve the IDs of all children and grandchildren within a parent ID using Typescript

What seems to be the issue with my @typescript-eslint/member-ordering settings?

The designated function name can be either "onButtonClick" or "onClickButton"

Utilizing a class member's data type

The issue of excessive recursion in Typescript

Collaborate and reuse Typescript code across various Node projects

The comparison between importing TypeScript and ES2015 modules

Error: The function list.forEach does not exist within service.buildList [as project]

What causes type checks to be skipped when spreads are used on type-guarded types?

The onClick event handler is functioning properly, but the ngOnInit() lifecycle method is not executing the function as

Using HTTP POST to subscribe and implementing a try-catch block

How can I clear the div styling once the onDismiss handler has been triggered

Export interface for material-ui wrapper to cast any type in TypeScript (React)

Retrieve information prior to CanActivation being invoked