Front-end build tools are essential for modern web development. Vite is a popular front-end build tool often used for building front-end assets like JavaScript and CSS. Echo ViewKit integrates seamlessly with Vite.
📝 In this section, we provide configuration examples. Please note that file paths and directory layouts are provided for illustrative purposes only. Since there is no official standard for these configurations, feel free to adjust them to suit your needs. Echo ViewKit does not enforce strict conventions, giving you the flexibility to customize it according to your preferences.
First, you need to install Vite manually. Run the following command:
npm install -D vite
After installing Vite, you need to create a vite.config.js file in the root of your project.
import { defineConfig } from 'vite';
export default defineConfig({
publicDir: false,
build: {
manifest: "manifest.json",
outDir: "public/build",
rollupOptions: {
input: ['assets/app.js', "assets/app.css"],
},
},
});
To create a assets directory in the root of your project and add app.js file:
mkdir assets
touch assets/app.js
touch assets/app.css
To check the Vite configuration, run the following command:
# Run the Vite development server...
npx vite
# ...and build the assets for production
npx vite build
Both commands should work without any errors.
To use front-end assets managed by Vite, you need to write vite(...) function in your template file as the following:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vite Example</title>
{{ vite("assets/app.js", "assets/app.css") }}
</head>
<body>
<!-- ... -->
</body>
</html>
The vite(...) function generates appropriate HTML tags for loading JavaScript and CSS files managed by Vite.
After that, you need to write the following code to integrate Vite with Echo:
package main
import (
"flag"
viewkit "github.com/kohkimakimoto/echo-viewkit"
"github.com/labstack/echo/v4"
"net/http"
)
func main() {
var debug bool
flag.BoolVar(&debug, "debug", false, "Debug mode")
flag.Parse()
e := echo.New()
v := viewkit.New()
v.Debug = debug
v.BaseDir = "views"
// Enable Vite integration
v.Vite = true
v.ViteDevMode = v.Debug
if !v.ViteDevMode {
// vite production build config
v.ViteManifest = viewkit.MustParseViteManifestFile("public/build/manifest.json")
v.ViteBasePath = "/build"
}
e.Renderer = v.MustRenderer()
e.Static("/", "public")
e.GET("/", func(c echo.Context) error {
return c.Render(http.StatusOK, "index", nil)
})
if v.ViteDevMode {
// Start Vite dev server if it's in dev mode
go func() {
if err := v.StartViteDevServer(); err != nil {
e.Logger.Errorf("the vite dev server returned an error: %v", err)
}
}()
}
e.Logger.Fatal(e.Start(":1323"))
}
v.Vite = true enables Vite integration.
It provides the vite(...) function in a Shared Context.
v.ViteDevMode is also an important setting. It determines whether the application is in development mode.
If v.ViteDevMode is true, the application uses the Vite development server, and HTML tags generated by the vite(...) automatically point to the Vite development server.
v.ViteManifest and v.ViteBasePath are settings for production.
They load a Vite manifest file generated by Vite build step.
With these settings, the application can load the correct JavaScript and CSS files in production mode.
After that, you can run the application with the following command:
go run main.go -debug
This command starts the Echo application and the Vite development server.
You can also build assets:
npx vite build
And run the application in production mode:
go run main.go