Serving a Vue.js Application With a Go Backend

In the ever-evolving realm of web development, JavaScript frameworks like Vue.js have become indispensable tools for crafting dynamic and responsive user interfaces. In this guide, we embark on a journey to serve a fundamental Vue.js application, displaying 'Hello World !!', and employing a Go (Golang) HTTP server.

Folder Structure

Here's the folder structure of the project:

first-vue-go-app/
│
├── first-vue-app/        # Vue.js Application
│   ├── src/
│   │   ├── assets/       # Static assets like images, fonts, etc.
│   │   ├── components/   # Vue components
│   │   ├── views/        # Vue views or pages
│   │   ├── App.vue       # Main Vue component
│   │   └── main.js       # Vue application entry point
│   ├── public/           # Public assets (e.g., index.html)
│   └── package.json      # Vue.js dependencies and scripts
│
├── Dockerfile            # Dockerfile for containerization
└── main.go               # Go HTTP server code

Setting up Your Vue.js Project

First, you need to set up a Vue.js project. Make sure you have Node.js and Vue CLI installed. Open your terminal and run the following commands:

1. Install Vue CLI globally:

   npm install -g @vue/cli
   

2. Create a new Vue project named first-vue-app:

   vue create first-vue-app
   

   Choose the default preset when prompted.

3. Navigate into the project directory:

   cd first-vue-app
   

Modifying the Vue.js Application

Now, let's modify the default Vue component to display "Hello World !!". Open src/App.vue in your favorite code editor and replace its content with the following code:

<template>
  <div id="app">
    <h1>Hello World !!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Building the Vue.js Application

Before serving the application, you need to build it into static files. Run this command in your terminal:

npm run build

This will generate a dist directory containing the compiled files.

Creating a Go HTTP Server

Next, you'll create a Go server to serve these static files. In the root directory (outside the first-vue-app directory), create a file named main.go and add the following content:

package main

import (
    "log"
    "net/http"
)

func main() {
    fs := http.FileServer(http.Dir("./first-vue-app/dist"))
    http.Handle("/", fs)

    log.Println("Listening on :8080...")
    err := http.ListenAndServe(":8080", nil)
    if err != nil {
        log.Fatal(err)
    }
}

This simple Go server serves the static files from the dist directory.

Creating a Dockerfile

To make deployment easier, let's containerize the application using Docker. Create a Dockerfile in the root directory with the following content:

# Stage 1: Build Vue.js app
FROM node:16 AS build

WORKDIR /app

COPY first-vue-app/package*.json ./first-vue-app/
RUN cd first-vue-app && npm install
COPY first-vue-app /app/first-vue-app
RUN cd first-vue-app && npm run build

# Stage 2: Build Go server
FROM golang:1.20

WORKDIR /app
COPY main.go .
COPY --from=build /app/first-vue-app/dist /app/first-vue-app/dist
RUN go build -o server main.go

EXPOSE 8080
CMD ["./server"]

This Dockerfile uses multi-stage builds to first compile the Vue.js application and then set up a Go server to serve the built files.

Building and Running the Docker Container

Now, build the Docker image with the following command:

docker build -t my-vue-go-app .

Once the build is complete, run the container:

docker run -p 8080:8080 my-vue-go-app

Your Vue.js application should now be accessible at http://localhost:8080, displaying "Hello World !!".

Benefits of Serving Vue.js With Go

Performance and Efficiency

• High concurrency: Go is known for efficiently handling many simultaneous connections, making it ideal for web servers.
• Fast static file serving: Go’s HTTP server serves static files quickly, providing a smooth user experience.

Simplified Architecture

• Single deployment unit: Serving both the front-end and back-end from a single Go application simplifies the deployment process and reduces the complexity of managing multiple servers.
• Reduced latency: Hosting the static assets and API endpoints on the same server can reduce latency, resulting in a more responsive application.

Conclusion

Serving a Vue.js application with a Go HTTP server combines the strengths of both technologies, providing a performant, efficient, and easy-to-maintain solution. This approach is particularly beneficial for projects requiring high concurrency, simplified deployment, and seamless integration between the front-end and back-end components.