DEV Community


How to build Web App with Go + gin-gonic + Vue

Masayoshi Mizutani
Updated on ・3 min read

This article describes how to build and develop Web application with Go + gin-gonic (Web Application Framework in Go) + Vue.

(Edited) Sample code repository:


Configure webpack

At first, install yarn packages

$ yarn init
$ yarn add -D @babel/cli @babel/core @babel/preset-env babel-loader webpack webpack-cli webpack-dev-server html-webpack-plugin vue-loader vue-template-compiler css-loader vue-style-loader sass-loader
$ yarn add babel-polyfill vue  node-sass axios

After that, create webpack.config.js file.

const path = require('path');
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  mode: "development",
  entry: ["babel-polyfill", path.resolve("src", "js", "index.js")],
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "static/js/"),
    publicPath: "/js"
  module: {
    rules: [
        test: /\.vue$/,
        loader: "vue-loader"
        test: /\.js$/,
        loader: "babel-loader"
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          // Translates CSS into CommonJS
          // Compiles Sass to CSS
  resolve: {
    extensions: [".js", "json", "jsx", "vue"],
    alias: {
      vue$: "vue/dist/vue.esm.js"
  devServer: {
    contentBase: "static",
    proxy: {
      "/api": "http://localhost:9080"
  plugins: [new VueLoaderPlugin()]

Additoinaly, put following setting into package.json.

  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --optimize-minimize"

Add web assets

Required following files:

  • src/css/main.scss
  • src/js/index.js
  • src/js/app.vue
  • static/index.html


body {
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;


import '../css/main.scss'

import _ from 'lodash';
import "babel-polyfill";
import Vue from "vue";

import App from "./app.vue";

new Vue({
    el: "#app",
    render: h => h(App)


    <button v-on:click="showMessage">This is test</button>
import axios from "axios";
const appData = {
  message: ""
export default {
  data() {
    return appData;
  methods: {
    showMessage: showMessage
function showMessage() {
  axios.get("/api/v1/hello").then(res => {
    appData.message =;


<!doctype html>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <div id="app"></div>
    <script src="/js/bundle.js"></script>

Add go module

Initialize go module.

$ go mod init

After that, add main.go.

package main

import (


var logger = logrus.New()

var logLevelMap = map[string]logrus.Level{
    "trace": logrus.TraceLevel,
    "debug": logrus.DebugLevel,
    "info":  logrus.InfoLevel,
    "warn":  logrus.WarnLevel,
    "error": logrus.ErrorLevel,

type arguments struct {
    LogLevel       string
    BindAddress    string
    BindPort       int
    StaticContents string

func runServer(args arguments) error {
    level, ok := logLevelMap[args.LogLevel]
    if !ok {
        return fmt.Errorf("Invalid log level: %s", args.LogLevel)

        "args": args,
    }).Info("Given options")

    r := gin.Default()

    r.Use(static.Serve("/", static.LocalFile(args.StaticContents, false)))
    r.GET("/api/v1/hello", func(c *gin.Context) {
        c.String(200, `{"message":"hello, hello, hello"}`)

    if err := r.Run(fmt.Sprintf("%s:%d", args.BindAddress, args.BindPort)); err != nil {
        return err

    return nil

func main() {
    args := arguments{
        LogLevel: "info",
        BindAddress: "",
        BindPort: 9080,
        StaticContents: "./static",

    if err := runServer(args); err != nil {
        logger.WithError(err).Fatal("Server exits with error")


Run go server

$ go run .

air command with .air.conf like following is recommended for hot reloading.

include_ext = ["go", "tpl", "tmpl", "html"]
exclude_dir = ["src", "tmp", "node_modules"]
delay = 1000 # ms
stop_on_error = true
log = "air_errors.log"

And run air

$ air -c .air.conf

Start webpack development server

$ npm run start

Open browser

Open http://localhost:8080 to confirm Web UI.


$ npm run build
$ go build -o sercer
$ cp -r server static /path/to/server

Discussion (2)

fabiansilva profile image
Fabian Silva

thanks for your post, I'm learning go and it seems good to start with.

Can please upload the code to some repo? thanks.

mizutani profile image
Masayoshi Mizutani Author

Thank you for your comment. I added sample code repository URL ( to head of the post.