How to Set up Visual Studio Code for Web Development in Golang. Part 2: Front End

In this article we’ll talk about the front end part of our set up. I use Gulp as a build system for my project, but I think this set up can be done with any other build system as well. This was originally an article about setting up Golang & Angular 2 development, but it actually doesn’t use Angular in any way. The only thing you need here is a build system (Gulp, Webpack or something else).

A note about operating system

I’m using OS X, so every Terminal command in this article is specific to this OS. If you find a command on an other operating system that does the same, please let me know in the comments below or Twitter and I’ll update the article!

Front End Part

The set up at the front end part of the project is pretty simple: after your build system successfully done bulding, we want it to launch our back end Go app, but it must be only one instance of the app at a time. It’s actually a pretty straightforward task, but requires some things to be done.

Go bin folder

When we build our Go app, we want it to be available from any other folder. To make your app available from everywhere, as well as other apps that written in Go, you need to add your workspace’s bin folder to your PATH variable. If you already did it, feel free to skip this step.

Open your .bash_profile or .bashrc file (depends on the system that you’re on) and add the following line:

export PATH="$PATH:$GOPATH/bin"

The path to your workspace’s folder is usually set in GOPATH variable that we now utilise here, so when you change your workspace, the PATH variable changes accordingly. If you don’t want this behaviour, you can specify the path to the bin folder manually:

export PATH="$PATH:path/to/the/bin/folder"

Setting up Gulp to Run Your Server

After Gulp is done building the project, I want it to launch the server if it’s not already launched. This can be done using gulp-shell package. Install it from NPM by running this line from inside your project folder:

npm install --save-dev gulp-shell

This installs gulp-shell package, and --save-dev as you may already know adds the package to devDependencies array in your package.json file.

Now open up your gulpfile.js and add a new task that will launch our back end server. Replace server-app-name with the name of your Go server app that you want to run.

// At the beginning of the file
var shell = require(‘gulp-shell’);

// Later in the file, wherever you want
gulp.task(‘start-server’, shell.task([
    'pgrep server-app-name > /dev/null && exit || server-app-name'
]));

The task method of the gulp-shell takes an array of strings to run in command line. We pass a string that checks if server is already launched, and if not, then launch it. Now let me explain this in details:

pgrep server-app-name > /dev/null && exit || server-app-name

1. The pgrep command looks for process named server-app-name (again, it must be the name of your Go app) and returns its ID.
2. We don’t want pgrep to display anything, so we send all the output to the /dev/null using > operator.
3. Then you see a familiar && operator. This operator means «if a process on the left hand side of && is completed successfully, run a command on the right hand side», which is exit. pgrep completes successfully if it finds the requested process (which means that our server app is running), and after that exit command is executed. exit is just the way to say that we don’t want to do anything more, no need to launch anything.
4. After all this we see || operator which means «if a process on the left hand side of || failed, run a command on the right hand side», which is just server-app-name. So when pgrep fails to find anything, the whole piece of code before || fails, and our server launches.

And that’s it! You’re done, and no need to open server’s project when you’re focused on the front end. Just don’t forget to add this new Gulp task to your sequence of tasks by using run-sequence or something like that.

Build Task for Front End

If you want, you can set up a build task that so that you can run Gulp by pressing Shift+Cmd+B or choosing Run Build Task from the Command Palette. To do that, press F1 on your keyboard and type Task, then choose Tasks: Configure Task Runner. This will create a new folder inside your project’s root directory called .vscode. Inside that directory it’ll create a file named tasks.json. This is where you can write your tasks.

Delete everything from it and paste the following JSON into it:

{
    "version": "0.1.0",
        "command": "bash",
	"isShellCommand": true,
	"showOutput": "always",
	"args": [
            "-c"
	],
        "tasks": [{
            "taskName": "npm start",
            "isBuildCommand": true
	}
    ]
}

I explained every line in the first part of the article, so feel free to go back and remind yourself what every line is for. The only change is the first element in the tasks array. Now it’s just npm start, without suppressTaskName flag, which means that the taskName is a command that needs to be run.

Alright, to make this work, you need to add a start script inside your project’s package.json file, if you haven’t done it before. Add a scripts object into your package.json file with a start script that launches gulp, like this:

{
    // package.json contents ...
    «scripts»: {
	«start»: «gulp»,
        // other scripts...
    }	
    // ...
}

This makes npm start run gulp command, and you’re now able to use Shift+Cmd+B to build your project.

And that’s it! Now you can quickly build and run your back end project and debug your Go app right inside VS Code, and in the front end part Gulp will ensure that the server is running whenever you need it.