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
- The
pgrep
command looks for process namedserver-app-name
(again, it must be the name of your Go app) and returns its ID. - We don’t want
pgrep
to display anything, so we send all the output to the/dev/null
using>
operator. - 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 isexit
.pgrep
completes successfully if it finds the requested process (which means that our server app is running), and after thatexit
command is executed.exit
is just the way to say that we don’t want to do anything more, no need to launch anything. - 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 justserver-app-name
. So whenpgrep
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.
One reply to “How to Set up Visual Studio Code for Web Development in Golang. Part 2: Front End”