Fastro

React SSR

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

  2. Open module/react.page.tsx:

    • 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: https://reactjs.org/docs/components-and-props.html
     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: https://reactjs.org/docs/components-and-props.html
     const App = (props: { params: string[]; header: string }) => {
       const [count, setCount] = React.useState(0);
       return (
         <div>
           <h2>{props.header}</h2>
           <p>
             This page was created using Deno, Fastro and React's server-side
             rendering (SSR). Click to try the react hook.
           </p>
           <button onClick={() => setCount(count + 1)}>Click me</button>
           <p>You clicked me {count} times</p>
         </div>
       );
     };
    
     export default App;
    
    
  3. Open react.template.html:
    • This is the usual react template.
    • You can change it as needed.
     <!DOCTYPE html>
     <html>
    
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>{{title}}</title>
     </head>
    
     <body>
         <div id="root"></div>
     </body>
    
     </html>
    
  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
     http://localhost:3000/react
    

    You can see the live demo at this link: https://hello-6bxxicr2uq-ue.a.run.app/react

What’s next: