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

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

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

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

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

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:

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?

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

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

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Ivano Dalmasso

Written by

Always looking to learn new things, and loving see things work as I want

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.