Golang web server VueJS App in history mode and Go web services

README.md

Golang web server VueJS App in history mode and Go web services

vuejs cli

with the vuejs cli installed (https://github.com/vuejs/vue-cli)

vue init webpack my-project

answer questions for project setup, optionally installing unit tests but yes to vue-router

cd into the newly created directory and install dependencies

cd my-project
npm install

Development (nodejs) mode

from within the project directory run the app in dev mode under node

npm run dev

if this starts without error, the message should appear:

Your application is running here: http://localhost:8080 

Changing the port that the server is to run on in config/index.js where this is set - see the line : port: 8080, can solve problems where there is already something running on port 8080

Modify vuejs app to run in history mode and to have a test route

the file

 src/router/index.js

needs to have the option mode: 'history', added to the Router object which will disable the '#' symbol being used for the root of the client side application

An extra component is added and imported -

src/router/index.js
src/components/TestRoute.vue

Building vuejs application for deployment

npm run build

Golang server

the golang server needs to be given the path the build directory created by the above build command

$GOWORKDIR/src/server/main.go

src_components_TestRoute.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
    <h2>Links</h2>
    <ul>
      <li><router-link to="/test">test route</router-link></li>
      <li><router-link to="/">home</router-link></li>
    </ul>
   </div>
</template>

<script>
export default {
  name: 'TestRoute',
  data () {
    return {
      msg: 'Welcome to the Test Route Page'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

src_router_index.js

mport Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import TestRoute from '@/components/TestRoute'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test',
      name: 'TestRoute',
      component: TestRoute
    }
  ]
})

src_server_main.go

package main

import (
        "io"
        "net/http"
)

func main() {
        appDir := "<path-to-vuejs-build-dir>/my-project/dist/"
        http.HandleFunc("/test_page", testPage)
        http.Handle("/", http.StripPrefix("/", http.FileServer(http.Dir(appDir))))
        http.ListenAndServe(":8080", nil)
}

func testPage(w http.ResponseWriter, req *http.Request) {
        w.Header().Set("Content-Type", "text/html; charset=utf-8")
        io.WriteString(w, ` <hr> <h1>Testing testing 123...</h1> `)
}