Web api - Use Gulp task to dynamically set end point address

Question

As described in my previous question:

Asp.net web API 2 separation Of Web client and web server development

In order to get full separation of client and server, I want to set a variable to hold the end point for client requests. When client side is developed, the requests will be sent to a "stub server" that returns default values so that client side can be developed without depending on the server side development. That stub server runs on one port different that the real server port, and when running integration between server and client, in a branch integration, the variable will hold the real server port.

For that matter, I learned that a build tool such as Gulp could help me.

I'm working with Tfs source control.

What I want is for example, write a task that will function like this:

gulp.task('setEndPoint', function() {
  var branchName = // How do I get it?
  if (branchName == "Project.Testing")
      endPoint = "localhost/2234"
  if (branchName == "Project.Production")
      endPoint = "localhost/2235"
});

Is there a way to get the current branch that task is running in?

Thanks for helpers

I'm confused I think. Can you give any more background or information on this? My gut feeling is "Why are you using Gulp to set a variable for an endpoint?" Is there a reason you wouldn't use the built in configuration concepts? Web.config would work if this is an older site or any of the 'configurable config' options (i.e. JSON, XML, etc) in the newer MVC6 project type. — Rick Petersen, May 04 '16 at 17:17
Maybe my older question can help explain better - http://stackoverflow.com/questions/36664393/asp-net-web-api-2-separation-of-web-client-and-web-server-development?noredirect=1#comment60922872_36664393 — , May 04 '16 at 18:19

Bruno Garcia · Accepted Answer · 2016-05-07T15:02:53.293

1

Instead of checking for the branch internally in your script, what about using arguments to differentiate a dev build vs a prod build.

You could use yargs for that:

var argv = require('yargs').argv;
gulp.task('setEndPoint', function() {
  if (argv.dev)
      endPoint = "localhost/2234"
  else
      endPoint = "localhost/2235"
});

yargs will bind the argument to the script to a property of the object:

gulp build --bla

Will allow you have inside you gulp task:

var argv = require('yargs').argv;
if (argv.bla) {
    // this line runs
}

With this, if you call gulp build without arguments, it won't have dev set to true (argv.dev will be undefined) and will pick the prod endpoint. That will happen on TFS, or when you want to run against the real backend on your development box.

For backendless development, you can call: gulp build --dev which will pick the dev endpoint.

If you prefer, you can use argv.prod and set on TFS the gulp build --prod, so passing no argument will use the stub server.

edited May 07 '16 at 15:02

answered May 07 '16 at 14:15

Bruno Garcia

6,029
3
25
38

With this approach will the end point be set correctly when building in different enviorments without any changes? I did not really understand yargs, even after reading the documentation, hope you can explain it to me briefly – May 07 '16 at 14:43
I tried to clarify a bit more.. The idea is that instead of inspecting branch internally to your gulp task, you can pass an argument to indicate which API endpoint you want to use. – Bruno Garcia May 07 '16 at 14:50
Okay I understood how you suggest to use the yargs and how it can help me, but it requires me to make a change in order to switch to the other end point. Sounds simillar to what we do now. We have both Fake server and real server sit on the same port, and when switching we create virtual directory. I wanted to be able to build simillary and get the endpoint without making any changes – May 07 '16 at 15:15
I'm not sure I follow. The OP referred to using the Branch. You need to be building multiple branches to use the different endpoints.You have one branch building against one endpoint, and the other branch on another endpoint. I'm unclear how that's going to help you. – Bruno Garcia May 07 '16 at 15:40
That's exactly what I want, each branch to have a different endpoint. That means that each branch needs a different arguement when building. But if I set a sepcific arugment say --dev for Dev branch, and than check it in, when merging to Prod branch, it will have the wrong argument for the build, as it will have the --dev argument. Am I mistaken? – May 07 '16 at 16:03
The argument is not saved in the source control. You pass it when building. So you have have on your CI (TFS) the --prod while locally you don't pass any arguments.. hence using different endpoints. – Bruno Garcia May 07 '16 at 16:26
I'm having troubles downloading Gulp and integrate it in my project, could you help me maybe? : http://stackoverflow.com/questions/37520390/npm-init-command-runs-endlessly – May 31 '16 at 15:59

score 1 · Answer 2 · answered May 08 '16 at 00:04

Gulp runs in a different environment and TFS runs in a different environment. I would be very surprised, if they can see each others settings. But, your actual problem is to identify the right url (or just the port) for the API. I think, the best way to solve this issue is to use environment variables file.

Let us say the client team is developing in client branch and the server team is developing in server branch. Once ready, both teams will merge their changes in to main branch. Now the production code will run from main branch.

The idea is to add env.js file in client branch and main branch. Make sure the changes for this file in client branch are excluded from check-in to main branch (This is very easy with TFS, right click on the file and say exclude from check-in). Now this file will hold any environment level variables (API url in your case). Your angular client will read the values from this file for execution. This way you can have seperate env.js files for development, staging and production and you don't have to deal with headaches of changing them with deployment.

Here is a great article on how you can achieve this. I would strongly suggest taking this route as it gives great flexibility in terms of many things you can achieve. gulp is a great client side build tool. This approach with gulp for other tasks like, minification, would make your application better.

Please let me know if you have any questions.

Thank you, Soma.

Why do you say that the env.js should be excluded from the main branch? — , May 16 '16 at 14:05
env.js file should be excluded from check-in as this is unique per environment like, development, testing and production. You don't want to overwrite changes from one environment (URL you defined for development may not be the same on beta) to other, hence you should avoid checking that file and maintain separate copies. — Soma Yarlagadda, May 16 '16 at 15:49

Web api - Use Gulp task to dynamically set end point address

2 Answers2