6

How to setup golang backend and react frontend in a monorepo

 2 years ago
source link: https://dev.to/ynwd/how-to-setup-golang-backend-and-react-frontend-in-a-monorepo-3api
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
ynwd

Posted on Oct 20

How to setup golang backend and react frontend in a monorepo

Previously, we have set up a frontend module using react and typescript in a monorepo.

Next, we will use the golang server to serve the built webapp.

.
├── go.mod
├── go.sum
├── main.go
├── package.json
└── web
    ├── components
    └── modules
        └── root
            ├── build
            │   ├── asset-manifest.json
            │   ├── favicon.ico
            │   ├── index.html
            │   ├── logo192.png
            │   ├── logo512.png
            │   ├── manifest.json
            │   ├── robots.txt
            │   └── static
            │       ├── css
            │       │   ├── main.33a5a96b.chunk.css
            │       │   └── main.33a5a96b.chunk.css.map
            │       └── js
            │           ├── 2.59f16c8b.chunk.js
            │           ├── 2.59f16c8b.chunk.js.LICENSE.txt
            │           ├── 2.59f16c8b.chunk.js.map
            │           ├── 3.93db3793.chunk.js
            │           ├── 3.93db3793.chunk.js.map
            │           ├── main.f7ff0158.chunk.js
            │           ├── main.f7ff0158.chunk.js.LICENSE.txt
            │           ├── main.f7ff0158.chunk.js.map
            │           ├── runtime-main.08d49f3a.js
            │           └── runtime-main.08d49f3a.js.map
            └── package.json
Enter fullscreen modeExit fullscreen mode

clone repo: https://github.com/ynwd/monorepo/tree/typescript

create services folder

mkdir -p internal/services
Enter fullscreen modeExit fullscreen mode

init golang app

go mod init github.com/ynwd/monorepo
Enter fullscreen modeExit fullscreen mode

downlod fastrex package

go get github.com/fastrodev/fastrex
Enter fullscreen modeExit fullscreen mode

this will generate go.mod file

module github.com/ynwd/monorepo

go 1.17

require github.com/fastrodev/fastrex v0.0.0-20211008073151-687f0b90ec18 // indirect
Enter fullscreen modeExit fullscreen mode

create golang app entry point

/* main.go */
package main

import (
    "github.com/fastrodev/fastrex"
)

func main() {
    app := fastrex.New()
    app.Template("web/modules/root/build/index.html")
    app.Static("web/modules/root/build")
    app.Get("/", func(req fastrex.Request, res fastrex.Response) {
        err := res.Render()
        if err != nil {
            panic(err)
        }
    })
    err := app.Listen(8080)
    if err != nil {
        panic(err)
    }
}
Enter fullscreen modeExit fullscreen mode

build react root module

npm run build -w @fstr/root
Enter fullscreen modeExit fullscreen mode

run golang server

go run main.go
Enter fullscreen modeExit fullscreen mode

You can see the final source code here: https://github.com/ynwd/monorepo/tree/fastrex


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK