React SSR

  1. fastro init command will generate folders and files like this:

  2. Open module/

    • You can change the react template and the html title with your own via options
    • You can define react props via props
     import { Container } from "../container.ts";
     import { React, Request } from "../deps.ts";
     export const options = {
       // Define custom html template
       template: "react.template.html",
       // Define html title
       title: "React Demo",
     // Define react props:
     export const props = async (request: Request) => {
       // You can access container and its type defined in container.ts with this way
       const c: Container = request.container;
       return {
         params: request.getParams(),
         header: "Hello, Deno land!",
         repository: await c.repository,
     // Define component:
     const App = (props: { params: string[]; header: string }) => {
       const [count, setCount] = React.useState(0);
       return (
             This page was created using Deno, Fastro and React's server-side
             rendering (SSR). Click to try the react hook.
           <button onClick={() => setCount(count + 1)}>Click me</button>
           <p>You clicked me {count} times</p>
     export default App;
  3. Open react.template.html:
    • This is the usual react template.
    • You can change it as needed.
     <!DOCTYPE html>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <div id="root"></div>
  4. Run your webapp:
     deno run -A main.ts

    Or if you want to monitor any changes and automatically restart:

     fastro serve
  5. Open the react page

    You can see the live demo at this link:

What’s next: