Logo credits to vuejs.org and golang.org

Social application with Vue.js and GO

Create and serve a twitter like application with vue.js and golang PART 1: SETUP

Ivano Dalmasso
Feb 8 · 7 min read

In this serie of articles I want to write down a little tutorial about using vue.js as frontend and go as backend as a choice for a website/web application. This couple seems not to be very popular, but let’s think about this: Go is actually a very fast backend language, built by google to be both fast and easy to use and Vue is a javascript framework that takes the fast rendering of a page a point of main importance.

Said this I think that using them together is gonna be really nice, and let us create applications that could be very good performance wise.

Check out the other parts:

What are we going to build

In this tutorial we are going to create a little social web application that lets users authenticate, create some text posts, and comment to posts made by other persons.

I’ll try not to go in great depth for the majority of the course, but take only the essential things that can make a person “ready to go” with a project.

The code for this first part can be found in:

Backend

Frontend

In this first chapter we are going to set up our project and make things nice and ready to go for the following parts.

Setting up

Let’s create a folder in the code repository, that will contain all our code. I’ll call from here on this folder the “primary folder”.

Here add the two repositories for the projects (i.e. create them on github and clone them) and then we will be ready to setup the two projects. I will call “frontend folder” and “backend folder” the two folders that contain the two repositories from now on.

First point, we go for the frontend part; I expect to have already npm installed (if not, go and install it from https://www.npmjs.com/get-npm).

We need to have the vue-cli installed, just calling

npm install -g @vue/cli

This will install globally the command line interface of vue. After the command is completed, we can finally initialize the vue project using

vue create "frontend folder"

where obviously “frontend folder” is the name you have given to your frontend repo folder (so it will create the project inside of that folder).

The CLI will ask then for a series of options, in the first selection just select “Manually select features”, and in the second selection make sure to select “Choose Vue version”, “Babel”, “Progressive Web App (PWA) Support”, “Router”, “Vuex”, “Linter/Formatter”.

The options we have selected will be explained more in details in other chapters, just know that PWA is the support for making the site a Progressive Web Application (https://en.wikipedia.org/wiki/Progressive_web_application), the router will get us routing capabilities inside of our frontend application, and vuex will give us a centralized store.

In the next selection it will asks for the vue version. I made this tutorial with vue 2, but feel free to select a different selections, the changes aren’t that big and almost everything will work in both versions for this project.

Leave all the following selection as the default (if you prefer some better linter configs, feel free to use what you prefer).

The installer then automatically will go and create all the project structure inside that folder for you. When it has finished, enter the folder and launch

npm run serve 

this will create a little development server, and you can now go in your browser @ http://localhost:8080/ and see the pages and the little base application that is created by the vue command line interface. Just stop the server by now, and let’s prepare the backend project too.

I assume that you have go installed, else go here and install it.

In the bakend folder, we’ll create a go module with the following command

go mod init github.com/idalmasso/go-vue-tutorial-backend

Obiously use the module name correct referred to your setup;

This will initialize your module and make it ready to be used.

Note: in previous version of GO you had to write all your code GOPATH, now with the modules you can do something like this, and put your code anywhere in your system

The current situation

Let’s take a moment and see what we have got in these two projects now.

In the backend folder there is a single file go.mod that contains the definition of the module, and will also contain all the packages needed.

In the frontend folder there are instead a lot more things:

  • A node_modules folder, that contains all node modules that the vue cli has installed
  • A public folder, this contains a set of static assets that will be copied inside of the distribution folder when building the frontend
  • A src folder, that contains all javascript code that will be used for the vue frontend
  • Some other configuration files, in particular see the package.json that contains the configuration of the app and its dependencies. Inside this folder we can also set some utility scripts, in the “scripts” section, and there you can see the “serve” that we called before to create the development server. The “build” command, in particular, will build the complete Vue application and create a distribution folder, that has to be served by a real server of your preference.

A little improvement to the project setup

Now, a real world project cannot be set on a development server, so the backend server we’ll build in golang will also be responsible to serve the vue application.

Wanting to decouple backend and frontend as much as possible, the best solution I have found is to create a git submodule in the backend project that points to a branch of the frontend project containing only the distribution project.

This is easier done then said: all we have to do is go in the frontend folder, and for first thing create a build of the actual application calling

npm run build

This will create the “dist” distribution folder, where there are all the files that need to be served for the frontend application to work. Next step is to push this as a different branch to github, for semplicity I have used an addon “push-dir”, that actually lets you push the content of a single directory. To do so, install the addon

npm i -D push-dir

and add a script inside of package.json like this:

"deploy": "push-dir --dir=dist --branch=production --cleanup"

Calling then the command

npm run deploy

will actually do all the work for us.

Now, in the backend folder, we can create the submodule like this

git submodule add -b production https://your_frontend_repository dist

We can now initialize the submodule with

git submodule update --init

and then update it with

git submodule update --remote

For easiness of use we can also add a package.json file in the backend folder with these two commands as scripts.

Test the actual setup

Last step is testing the setup we have just built: only thing needed is to create a little go backend that will be able to serve the dist folder.

If everything will work, we will be ready to start writing the real application.

Create a file in the backend folder, and name it “server.go”. Then add the following code:

package main import ( 
"fmt"
"log"
"net/http"
"github.com/gorilla/mux"
)
func main(){
r := mux.NewRouter()
fs := http.FileServer(http.Dir("./dist"))
r.PathPrefix("/").Handler(fs)
http.Handle("/",r)
fmt.Println("Listening")
log.Panic( http.ListenAndServe(":3000", nil),
)
}

This is actually a very basic code, starting with the package definition (main package, is the default for a starting point in a go application), followed by the imports, and then the main function, the starting point.

There the program creates a new gorilla router/http multiplexer.

With this object we can actually tell the server which endpoints should listen and also what it should respond. In this case, we create an http fileserver (called “fs”) that will serve the “./dist” folder (that is actually the frontend application, from the git submodule).

The following line say at the router that requests coming at “/” will be handled with the file server. The last call at http.ListenAndServe is a blocking one that creates the server at localhost:3000.

Now we can run the application, for example calling

go run server.go

and navigate with our browser at http://localhost:3000.

We can now see that our frontend application is there, served with our golang server.

Is this necessary?

This setup could seem a little complex: we could have just created and updated the application frontend, and when needed just builded and copied the folder.

In real world scenario probably the backend and frontend developers are different entities, so by doing this way both of them are indipendents and also this is a cleaner way to do the job.

Next steps

In the following chapters, we will start creating and updating our vue application to be of some real use.

After having some frontend created, we will try to add some backend functionality, so the frontend data will be get and/or sent to some api of the go server, and we will get some little levels of comunication and persistence.

We will then use a mongodb database to save the data, add a primitive version of authentication, and at the end we’ll work to make our application a PWA, so it will also work offline and could be installable on the device of the user.

Nerd For Tech

From Confusion to Clarification

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store