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.