vue-router in production (serving with Go)

Question

I'd like to separate client and server completely, so I created a vuejs project with vue init webpack my-project. In this project I'm using vue-router for all my routing (this includes special paths, like /user/SOMEID..

This is my routes.js file:

import App from './App.vue'

export const routes = [
  {
    path: '/',
    component: App.components.home
  },
  {
    path: '/user/:id',
    component: App.components.userid
  },
  {
    path: '*',
    component: App.components.notFound
  }
]

When I run the application using npm run dev everything works perfectly. I'm now ready to deploy to cloud, so I ran npm run build. Since I need to use a HTTP Server, I decided to use Go for that as well.. this is my Go file:

package main

import (
    "fmt"
    "github.com/go-chi/chi"
    "github.com/me/myproject/server/handler"
    "net/http"
    "strings"
)

func main() {
    r := chi.NewRouter()

    distDir := "/home/me/code/go/src/github.com/me/myproject/client/dist/static"
    FileServer(r, "/static", http.Dir(distDir))

    r.Get("/", IndexGET)

    http.ListenAndServe(":8080", r)
}

func IndexGET(w http.ResponseWriter, r *http.Request) {
    handler.Render.HTML(w, http.StatusOK, "index", map[string]interface{}{})
}

func FileServer(r chi.Router, path string, root http.FileSystem) {
    if strings.ContainsAny(path, "{}*") {
        panic("FileServer does not permit URL parameters.")
    }

    fs := http.StripPrefix(path, http.FileServer(root))

    if path != "/" && path[len(path)-1] != '/' {
        r.Get(path, http.RedirectHandler(path+"/", 301).ServeHTTP)
        path += "/"
    }
    path += "*"

    r.Get(path, http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        fs.ServeHTTP(w, r)
    }))
}

I'm able to load the home page (App.components.home) where everything seem to work (the css, the images, translations, calls to and responses from the server).. but when I try to open other routes that should either result in 404 or load a user, then I just get the response 404 page not found in plaintext (not the vue notFound component it's supposed to render)..

Any ideas what I'm doing wrong and how to fix it?

Edit: this is the other part of the router setup in the main.js file:

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes
})

new Vue({
  el: '#app',
  router,
  i18n,
  render: h => h(App)
})

Please provide the URL that you try to open. I have a feeling that you are trying to access Go route (missing one of course), instead of using Vue route. — Alex, Sep 10 '17 at 19:55
@Alex Sadly can't provide URL right now (testing locally).. what you're saying makes sense, but if that's the case then why would I be able to open localhost:8080 and see the App.components.home page (which has no problems referencing other vue components)? — fisker, Sep 10 '17 at 20:00

stevenferrer · Accepted Answer · 2017-09-11T07:27:38.350

6

I might be wrong, but maybe the routes that you are trying to visit gets resolved in the server (in your Go http server).

You can try to remove the mode: 'history' in your vue-router initialization so that it defaults to hash mode (the routes will then resolve in browser). please see this link.

edited Sep 11 '17 at 07:27

answered Sep 11 '17 at 07:20

stevenferrer

2,504
1
22
33

Oh wow, this works (I guess that's what Alex was refereeing to as well).. one problem with this is unfortunately that I really want to get rid of the `/#/` that appear if using `hash` mode. Do you know how this might be achieved? (I'll mark your answer as the solution tonight) – fisker Sep 11 '17 at 07:31
I don't know how, but i think the only way is to use `mode: 'history'`, the server then must be configured so that it can handle your routes properly. (like when your using webpack). any way, i've created an app in vue.js interacting with an api written in Go and i think it's fine to have the hash sign as long as it doesn't get in my way :) – stevenferrer Sep 11 '17 at 07:45
1

but I think it's very common for users to type the URL manually, e.g. `reddit.com/r/worldnews` - if don't use history mode then these users will be redirected to a 404 page rendered by Go? Do you have a solution to deal with this, or do you just ignore these users? (in my case it's impossible since I'm building something that users would interact with the same way they interact with a url shortener) – fisker Sep 11 '17 at 07:50
Try the approach suggested [here](https://groups.google.com/forum/#!topic/golang-nuts/0lj4qKurpMI). – stevenferrer Sep 11 '17 at 08:17
1

Thanks, I decided to just let Go redirect all not-found URLs to `/# + r.URL.Path`.. this seems to work quite well :) – fisker Sep 11 '17 at 10:49
Great job mate :) – stevenferrer Sep 11 '17 at 11:15

vue-router in production (serving with Go)

1 Answers1

Linked