Social application with Vue.js and GO
Create and serve a twitter like application with vue.js and golang PART 1: SETUP
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:
In this first chapter we are going to set up our project and make things nice and ready to go for the following parts.
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
- 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:
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.
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.