DEV Community

dbarun
dbarun

Posted on • Edited on

SRR React With Go and Templ

#react #go #backend #ssr

for more ref https://github.com/BarunW/form_backend/tree/main/integration-react

So I am here to share the process and It's already on the templ documentation https://templ.guide/media/, but i have some issue on that I change here and there.

  1. Install temp go install github.com/a-h/templ/cmd/templ@latest

  2. add go get github.com/a-h/templ to your project

  3. now make a dir/folder inside your go project e.g react-integration

  4. cd react-integration and make two dir/folder static(where your templ and templ geneated go file should be) and another one react()

  5. inside static create a page.tmpl

make sure you have data to pass if you need the data to render,

package static
   import(
      "github.com/username/myrepo/types"
  )
   */
script renderIndex(bp types.BillingPlan) {
    // Use the renderIndex function from the Reactbundle
    bundle.renderIndex()
}

templ Index(bp types.BillingPlan) {
    <div id="index"></div>  
    // in templ you this to call a templ component or script  
    @renderIndex(bp)
}


templ Page(bp types.BillingPlan) {
`<html>
    <head>
        <title>React integration</title>
            <link rel="stylesheet" href="static/index.css" 
            </link>
    </head>
    <body>
        <div id="react-header"></div>
        <div id="react-content"></div>
        <div>
        </div>  
           // this index.js will be generate by es build 
        <script src="static/index.js"</script>
            @Index(c, fs) 
    </body>
</html>`
}
Enter fullscreen mode Exit fullscreen mode

After this run command** templ generate** so that it will generate the required go code( make sure inside static dir/folder)

  1. inside react do npm init -y make this files tsconfig.json and install necessary package(ts, esbuild, react, react-dom) or copy pasta this { "name": "react-integration", "version": "1.0.0", "description": "", "main": "index.ts", "author": "", "license": "ISC", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/react-dom": "^18.2.18", "esbuild": "0.20.1", "npm-run-all": "^4.1.5", "typescript": "^5.3.3" } }

we are using tsx for bundle so we use react for jsx

{
  "compilerOptions": {
      "jsx": "react", 
      "lib": ["ESNext", "DOM"],
      "esModuleInterop": true,
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. create your required files for me i will create components.tsx , index.tsx and app.tsx 
components.tsx
`import React from "react";

export function Component(props:any){
    return(
    <div>
       <h3 onClick={()=> console.log(data)>Click Me</h3>
    </div>
    )
}`
Enter fullscreen mode Exit fullscreen mode

app.tsx

import  React, { useEffect, useRef, useState } from 'react';
import { Component } from "./components"

const App = (props : any) =>{
// do whatever you want
 return(
   <Component billingPlan={props}/>
 )
}
export default App
Enter fullscreen mode Exit fullscreen mode

index.tsx

import ReactDOM from 'react-dom/client';
import React from 'react';
import App from './app';

export function renderIndex(content:any){
    const root = ReactDOM.createRoot(document.getElementById('index') as HTMLElement);
    root.render(
       <App content={content} />
    );
}
Enter fullscreen mode Exit fullscreen mode

generate the index.js bundle using this command ./node_modules/.bin/esbuild --bundle index.tsx --outdir=../static --minify --global-name=bundle

  1. Now we have to serve I like to use echo framework 
package main

import(
    "github.com/labstack/echo/v4"
    "github.com/username/types"
    "net/http"

)

func main(){

  e := echo.New() 

  // middleware for serving static file
  e.Static("/static", "./integration-react/static")

  // routes 
  e.Any("/shit",echo.HandlerFunc(func(c echo.Context) error {
   // call the template component in the static
   templComp := static.Page(types.BillingPlan{})
   Render(c, http.StatusOK, templComp) 
  }))

  s := http.Server{
       Addr:        ":8080",
       Handler:     e,
   }
  if err := s.ListenAndServe(); err != http.ErrServerClosed {
    log.Fatal(err)
  }

}

// this is the echo integration with templ code
func Render(ctx echo.Context, statusCode int, tc templ.Component) error {

    ctx.Response().Writer.WriteHeader(statusCode)
    ctx.Response().Header().Set(echo.HeaderContentType, 
                                     echo.MIMETextHTML)
    return tc.Render(ctx.Request().Context(), 
                             ctx.Response().Writer)

}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)