frontend-go

用于go服务器的SPA（单页应用）风格的web应用前端帮助工具。该软件包可与Next.js、Vue.js、SvelteKit、Solid.js一起使用。

开发模式

它在go服务器后面运行开发服务器。它作为反向代理工作。你可以获得web框架开发服务器提供的所有功能（热模块替换等）。

生产模式

它从go的嵌入中获得预构建的资产（HTML、JS、CSS）。基本上，所有的SPA需要在没有资产的时候回退到index.html 。

集成

frontend-go 假设有以下结构。重要的一点是以下几点：

• 有一个名为frontend 的前端项目文件夹。
• 在frontend文件夹的父文件夹下有release.go 。
• 将frontend-go的处理程序添加到你的网络服务器。

awesome-your-web-app
├── LICENSE
├── README.md
├── cmd
│   └── server
│      └── main.go    # Add frontend-go's handler
├── go.mod
├── go.sum
├── api.go
├── release.go        # You should add this
└── frontend          # frontend project (Next.js, Vue.js, SvelteKit, Solid.js)
    └── package.json

release.go 有以下代码：

//go:build release

package webapp

// ↓this folder is decided by your frontend framework

//go:embed frontend/build/*
var asset embed.FS

init() {
    frontend.SetFrontAsset(asset, frontend.Opt{
        FrameworkType: frontend.NextJS, // select: NextJS, VueJS, SvelteKit, SolidJS
    })
}

与net/http 一起使用：

package main

func handler() http.Handler {
    mux := http.NewServeMux()
    mux.Handle("/api", YourAPIHandler)
    mux.Handle("/", frontend.MustNewSPAHandler())
    return mux
}

与chi一起使用：

import (
    "github.com/go-chi/chi/v5"
)

func handler() http.Handler  {
    r := chi.NewRouter()
    r.Post("/api", YourAPIHandler)
    r.NotFound(frontend.MustNewHandlerFunc())
    return r
}

# Development mode
$ go run main.go

# Production build
$ go build -tags release

网络框架的具体说明

Next.js 12

frontend-go假设Next.js的静态生成结果（不需要Node.js/bun来运行）。

要用Next.js启动项目，请像这样启动项目：

$ go mod init yourapp
$ mkdir -p cmd/yourapp
$ npx create-next-app@latest --ts frontend

要启用静态生成，请将unoptimized 标志添加到项目中。next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: { // Add here
    images: {
      unoptimized: true,
    }
  }
}

你应该使用以下命令来构建前端项目：

$ npm run build
$ npm exec next export

go:embed指令的注释默认应该是以下内容：

//go:embed frontend/out/*
//go:embed frontend/out/_next/static/*/*
//go:embed frontend/out/_next/static/chunks/pages/*.js
var asset embed.FS

init() {
    frontend.SetFrontAsset(asset, frontend.Opt{
        FrameworkType: frontend.NextJS,
    })
}

Vue.js

要用Vue.js启动项目，请像这样启动项目：

$ go mod init yourapp
$ mkdir -p cmd/yourapp
$ vue create frontend

你应该使用下面的命令来构建前端项目：

$ npm run build

go:embed指令的注释默认应该是以下内容。

//go:embed frontend/dist/*

SvelteKit

默认的SvelteKit提供的前端程序需要Node.js来运行。为了使用这个模块，你应该将前端项目配置为静态站点模式：

$ go mod init yourapp
$ mkdir -p cmd/server
$ npm create yourapp@latest frontend

要修改前端站点，请添加static-adaptor：

$ npm install @sveltejs/adapter-static

import adapter from '@sveltejs/adapter-static'; // Modify here

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: preprocess(),

  kit: {
    adapter: adapter({       // Modify here for static HTML/JS generation
      fallback: 'index.html'
    }),
    prerender: {             // Modify here for SPA mode
      default: false
    },
    trailingSlash: 'always'  // Modify here
  }
};

export default config;

你应该通过使用以下命令建立前端项目：

$ npm run build

go:embed指令的注释默认应该是以下内容：

//go:embed frontend/build/*
var asset embed.FS

init() {
    frontend.SetFrontAsset(asset, frontend.Opt{
        FrameworkType: frontend.SvelteKit,
    })
}

Solid.js

$ go mod init yourapp
$ mkdir -p cmd/server
$ npx degit solidjs/templates/ts frontend

你应该通过使用以下命令来建立前端项目：

$ npm run build

go:embed指令的注释在默认情况下应该是以下内容：

//go:embed frontend/dist/*
var asset embed.FS

init() {
    frontend.SetFrontAsset(asset, frontend.Opt{
        FrameworkType: frontend.SolidJS,
    })
}

配置

frontend.SetFrontAsset() (用于生产）， （其他用法）接受修改包的行为的选项。frontend.SetOption()

如果你把前端项目放在frontend 文件夹下，并且不改变npm脚本，你就不必修改配置：

//go:build release

:

//go:embed frontend/build/*
var asset embed.FS

handler := frontend.SetFrontAsset(assets, frontend.Opt{
    FrontEndFolder: "frontend",              // Frontend application folder that contains package.json. default value is "frontend"
    ProjectType:    frontend.AutoDetect,     // NextJS, SvelteKit, VueJS, SolidJS is available
    SkipRunningDevServer:     false,         // Skip running dev server even if development mode
    DistFolder:     "",                      // Specify dist folder instead of auto detect
    Port:           0,                       // Specify port instead of auto detect
    DevelopmentCommand: "npm run dev",       // Specify dev server command instead of auto detect
    FallbackPath:       string               // Specify fallback file path. Default is "index.html"
})

对于开发模式，这个包会尽可能地配置软件包，包括框架类型。

如果你想为开发模式设置选项，请添加以下文件并设置选项：

//go:build !release

package webapp

init() {
    frontend.SetOption(frontend.Opt{
        SkipRunningDevServer: true,
    })
}