# Fastro
Fast and simple web application framework for deno.
With [near-native perfomance](https://deno.land/x/fastro@{{version}}/benchmarks),you can:
- Manage your routing, middlewares, and dependencies cleanly.- Simplifies JSON, HTML, JSX, and SSR initiation.- Take advantage of existing Deno objects and methods.### Getting started
Create a `main.ts` file for deno-cli entry point.
```tsimport application from "https://deno.land/x/fastro@{{version}}/server/mod.ts";
const app = application();
app.get("/", () => "Hello world");
console.log("Listening on: http://localhost:8000");
await app.serve();
```Run the app```deno run -A main.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/hello_world.ts)
## More examples
- [Custom Port](#custom-port)- [JSON Response](#json-response)- [JSON with Native Response](#json-with-native-response)- [JSON with Fastro Response](#json-with-fastro-response)- [HTML with Native Response](#html-with-native-response)- [HTML with Fastro Response](#html-with-fastro-response)- [HTML with React JSX](#html-with-react-jsx)- [HTML Render with Eta Template Engine](#html-render-with-eta-template-engine)- [HTML Render with SSR](#html-render-with-ssr)- [Cookie with Native Response](#cookie-with-native-response)- [Cookie with Fastro Response](#cookie-with-fastro-response)- [Send custom HTTP Status, Content Type, and Authorization](#send-custom-http-status-content-type-and-authorization)- [Routing](#routing)- [Route Parameters](#route-parameters)- [Router Middleware](#router-middleware)- [Router Middleware with Array](#route-level-middleware-with-array)- [Application Level Middleware](#application-level-middleware)- [Application Level Middleware with Array](#application-level-middleware-with-array)- [Route Level Middleware](#route-level-middleware)- [Route Level Middleware with Array](#route-level-middleware-with-array)- [SQLite and Dependency Injection](#sqlite-and-dependency-injection)### Custom port
```tsimport application from "https://deno.land/x/fastro@{{version}}/server/mod.ts";
const app = application();
app.get("/", () => new Response("Hello world!"));
await app.serve({ port: 3000 });
```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/custom_port.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/custom_port.ts)
### JSON Response
```tsimport application from "https://deno.land/x/fastro@{{version}}/server/mod.ts";
const app = application();
const json = { text: "Hello world" };
app.get("/", () => json);
console.log("Listening on: http://localhost:8000");
await app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/json_response_default.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/json_response_default.ts)
### JSON with Native Response
```tsimport application from "https://deno.land/x/fastro@{{version}}/server/mod.ts";
const app = application();
app.get("/", () => { const json = { text: "Hello world" }; return new Response(JSON.stringify(json), { status: 200, headers: { "content-type": "application/json", }, });});
console.log("Listening on: http://localhost:8000");
await app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/json_response_native.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/json_response_native.ts)
### JSON with Fastro Response
```tsimport application, { response } from "https://deno.land/x/fastro@{{version}}/server/mod.ts";
const app = application();
app.get("/", () => { return response().json({ text: "Hello world" });});
console.log("Listening on: http://localhost:8000");
await app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/json_response_fastro.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/json_response_fastro.ts)
### HTML with Native Response
```tsimport application from "https://deno.land/x/fastro@{{version}}/server/mod.ts";
const app = application();
app.get("/", () => { return new Response("<html> Hello world </html>", { status: 200, headers: { "content-type": "text/html", }, });});
console.log("Listening on: http://localhost:8000");
await app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/html_response_native.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/html_response_native.ts)
### HTML with Fastro Response
```tsimport application, { response } from "https://deno.land/x/fastro@{{version}}/server/mod.ts";
const app = application();
app.get("/", () => response().html("<h2>Hello world</h2"));
console.log("Listening on: http://localhost:8000");
await app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/html_response_fastro.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/html_response_fastro.ts)
### HTML with React JSX
```tsximport application from "https://deno.land/x/fastro@{{version}}/server/mod.ts";
const app = application();
app.get("/", () => <h1>Hello world</h1>);
console.log("Listening on: http://localhost:8000");
await app.serve();```
#### tsconfig: `deno.json`
```json{ "compilerOptions": { "strict": true, "jsx": "react-jsx", "jsxImportSource": "https://esm.sh/react" }}```
```deno run -A --config deno.json https://deno.land/x/fastro@{{version}}/examples/html_response_jsx.tsx```
### Send Custom HTTP Status, Content Type, and Authorization
```tsimport application, { response } from "https://deno.land/x/fastro@{{version}}/server/mod.ts";
const app = application();
app.get("/", () => { return response() .contentType("application/json") .authorization("Basic YWxhZGRpbjpvcGVuc2VzYW1l") .status(200) .send(JSON.stringify({ message: "Hello world" }));});
console.log("Listening on: http://localhost:8000");
await app.serve();
```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/response_status.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/response_status.ts)
### Cookie with Native Response
```tsimport { Cookie, deleteCookie, getCookies, setCookie,} from "https://deno.land/std@0.133.0/http/cookie.ts"
import application from "https://deno.land/x/fastro@{{version}}/server/mod.ts";
const app = application();
app.get("/set", () => { const headers = new Headers(); const cookie: Cookie = { name: "Space", value: "Cat" }; setCookie(headers, cookie); return new Response(JSON.stringify(cookie), { headers, });});
app.get("/delete", () => { const headers = new Headers(); deleteCookie(headers, "Space"); const cookies = getCookies(headers); return new Response(JSON.stringify(cookies), { headers, });});
app.get("/check", (req: Request) => { const cookie = getCookies(req.headers); return new Response(JSON.stringify(cookie));});
console.log("Listening on: http://localhost:8000");
await app.serve();
```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/cookies_native.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/cookies_native.ts)
### Cookie with Fastro Response
```tsimport application, { Cookie, getCookies, response,} from "https://deno.land/x/fastro@{{version}}/server/mod.ts";
const app = application();
app.get("/set", () => { const cookie: Cookie = { name: "Space", value: "Cat" }; return response() .setCookie(cookie) .send(JSON.stringify(cookie));});
app.get("/delete", () => { return response() .deleteCookie("Space") .send("Cookie deleted");});
app.get("/check", (req: Request) => { const cookie = getCookies(req.headers); return response().send(JSON.stringify(cookie));});
console.log("Listening on: http://localhost:8000");
await app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/cookies_fastro.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/cookies_fastro.ts)
### HTML Render with Eta Template Engine
```tsimport application from "https://deno.land/x/fastro@{{version}}/server/mod.ts";import { render } from "https://deno.land/x/eta@1.12.3/mod.ts";const app = application();
const headers = new Headers();headers.set("Content-Type", "text/html; charset=UTF-8");
app.get("/", () => { const html = <string> render( "<h4>The answer to everything is <%= it.answer %></h4>", { answer: 42, }, ); return new Response(html, { headers });});
console.log("Listening on: http://localhost:8000");
app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/html_render.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/html_render.ts)
### Routing
```tsimport application from "https://deno.land/x/fastro@{{version}}/server/mod.ts";const app = application();
app.get("/abcd", () => new Response("/abcd"));
app.get("/ef?gh", () => new Response("/ef?gh"));
app.get("/ij+kl", () => new Response("/ij+kl"));
app.get("/mn*op", () => new Response("mn*op"));
app.get("/qr(st)?u", () => new Response("qr(st)?u"));
app.get(/v/, () => new Response("/v/"));
app.get(/.*fast$/, () => new Response("/.*fast$/"));
await app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/routing.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/routing.ts)
### Route parameters
```tsimport application, { getParam, getParams,} from "https://deno.land/x/fastro@{{version}}/server/mod.ts";const app = application();
app.get("/:id/user/:name", (req: Request) => { const params = getParams(req); return new Response(JSON.stringify({ params }));});
app.get("/post/:id", (req: Request) => { const param = getParam("id", req); return new Response(param);});
await app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/route_params.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/route_params.ts)
### Router Middleware
```tsimport application, { ConnInfo, Next, router,} from "https://deno.land/x/fastro@{{version}}/server/mod.ts";const app = application();const r = router();const middleware = (_req: Request, _connInfo: ConnInfo, next: Next) => { console.log("v2 - 1"); next();};
r.get("/", () => new Response("Get")) .post("/", () => new Response("Post")) .put("/", () => new Response("Put")) .delete("/", () => new Response("Delete"));app.use("/v1", r);app.use("/v2", middleware, r);
await app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/router_middleware.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/router_middleware.ts)
### Router Middleware with Array
```tsimport application, { ConnInfo, Next, router,} from "https://deno.land/x/fastro@{{version}}/server/mod.ts";const app = application();const r = router();const middlewares = [(_req: Request, _connInfo: ConnInfo, next: Next) => { console.log("v2 - 1"); next();}, (_req: Request, _connInfo: ConnInfo, next: Next) => { console.log("v2 - 2"); next();}];
r.get("/", () => new Response("Get")) .post("/", () => new Response("Post")) .put("/", () => new Response("Put")) .delete("/", () => new Response("Delete"));app.use("/v1", r);app.use("/v2", middlewares, r);
await app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/router_middleware_with_array.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/router_middleware_with_array.ts)
### Application Level Middleware
```tsimport application, { ConnInfo, Next,} from "https://deno.land/x/fastro@{{version}}/server/mod.ts";const app = application();
app.use((_req: Request, _conn: ConnInfo, next: Next) => { console.log("app middleware #1"); next();});
app.use((_req: Request, _conn: ConnInfo, next: Next) => { console.log("app middleware #2"); next();});
app.use((_req: Request, _conn: ConnInfo, next: Next) => { console.log("app middleware #3"); next();}, (_req: Request, _conn: ConnInfo, next: Next) => { console.log("app middleware #4"); next();});
app.get("/", () => new Response("App level #1"));
await app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/application_level_middleware.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/application_level_middleware.ts)
### Application Level Middleware with Array
```tsimport application, { ConnInfo, Next,} from "https://deno.land/x/fastro@{{version}}/server/mod.ts";const app = application();
const middlewares = [(_req: Request, _conn: ConnInfo, next: Next) => { console.log("middleware #1"); next();}, (_req: Request, _conn: ConnInfo, next: Next) => { console.log("middleware #2"); next();}, (_req: Request, _conn: ConnInfo, next: Next) => { console.log("middleware #3"); next();}, (_req: Request, _conn: ConnInfo, next: Next) => { console.log("middleware #4"); next();}];
app.use(middlewares);
app.get("/", () => new Response("App level #1"));
await app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/application_level_middleware_with_array.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/application_level_middleware_with_array.ts)
### Route Level Middleware
```tsimport application, { ConnInfo, Next,} from "https://deno.land/x/fastro@{{version}}/server/mod.ts";
const app = application();
const middlewares = (_req: Request, _conn: ConnInfo, next: Next) => { console.log("middleware #1"); next();};
app.get("/", middlewares, () => new Response("App level #1"));
await app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/route_level_middleware.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/route_level_middleware.ts)
### Route Level Middleware with Array
```tsimport application, { ConnInfo, Next,} from "https://deno.land/x/fastro@{{version}}/server/mod.ts";
const app = application();
const middlewares = [(_req: Request, _conn: ConnInfo, next: Next) => { console.log("middleware #1"); next();}, (_req: Request, _conn: ConnInfo, next: Next) => { console.log("middleware #2"); next();}, (_req: Request, _conn: ConnInfo, next: Next) => { console.log("middleware #3"); next();}, (_req: Request, _conn: ConnInfo, next: Next) => { console.log("middleware #4"); next();}];
app.get("/mnop", middlewares, () => new Response("Route level middleware #3"));
await app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/route_level_middleware_with_array.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/route_level_middleware_with_array.ts)
### SQLite and Dependency Injection
```tsimport application, { dependency } from "https://deno.land/x/fastro@{{version}}/server/mod.ts";const app = application();const db = new DB("test.db");
const deps = dependency();deps.set("hello", () => "Hello world");deps.set("db", db);app.use(deps);
app.get("/", () => { type FunctionType = () => string; const fn = <FunctionType> app.getDeps("hello"); return new Response(fn());});
app.post("/name", () => { const db = <DB> app.getDeps("db"); db.query(`CREATE TABLE IF NOT EXISTS people ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT)`); const names = ["Peter Parker", "Clark Kent", "Bruce Wayne"]; for (const name of names) { db.query("INSERT INTO people (name) VALUES (?)", [name]); } return new Response(JSON.stringify(names));});
app.get("/name", () => { const db = <DB> app.getDeps("db"); const res = db.query("SELECT name FROM people"); return new Response(JSON.stringify(res));});
console.log("Listening on: http://localhost:8000");
await app.serve();```
```deno run -A https://deno.land/x/fastro@{{version}}/examples/deps_injection.ts```
[](https://dash.deno.com/new?url=https://deno.land/x/fastro@{{version}}/examples/deps_injection.ts)
### HTML Render with SSR
#### Configuration
Create deno configuration file: `deno.json`
```json{ "compilerOptions": { "strict": true, "jsx": "react-jsx", "jsxImportSource": "https://esm.sh/react" }}```
Create vscode configuration file: `.vscode/settings.json`
```json{ "files.eol": "\n", "files.trimTrailingWhitespace": true, "[typescript]": { "editor.defaultFormatter": "denoland.vscode-deno", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.organizeImports": true } }, "[typescriptreact]": { "editor.defaultFormatter": "denoland.vscode-deno", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.organizeImports": true } }, "[markdown]": { "editor.formatOnSave": false }, "deno.enable": true, "deno.unstable": true, "deno.lint": true, "deno.suggest.imports.hosts": { "https://deno.land": true }, "deno.config": "./deno.json"}```
### Create app and static dirs
```mkdir appmkdir static```
#### Component
Create react component: `app/app.tsx`
```tsximport React from "https://esm.sh/react@17.0.2";
const App = () => { const [count, setCount] = React.useState(0); return ( <div> <h1>Hello Deno Land!</h1> <button onClick={() => setCount(count + 1)}>Click the 🦕</button> <p>You clicked the 🦕 {count} times</p> </div> );};
export default App;
```
#### EndpointCreate routing file: `app/api.tsx`
```tsximport application, { response } from "https://deno.land/x/fastro@{{version}}/server/mod.ts";import rendering from "https://deno.land/x/fastro@{{version}}/server/ssr.ts";import App from "./app.tsx";
const ssr = rendering().component(<App />);
const app = application(ssr) .static("/static") .get("/", () => { return response(ssr).render({ title: "Hello world" }); });console.log("Listening on: http://localhost:8000");
await app.serve();```
#### How to run locally
```deno run -A --unstable app/api.tsx```
Source-code: [ssr-example](https://github.com/fastrodev/ssr-example)