Our teams have to use a lot of tools to do the work that they do every day to build, repair, strategize, and analyze. Some of those tools are highly technical. Others are tools that anyone might use who is charged with making sure an organization's digital content is meeting the demands that are expected of it. Whether we are working in a Content Management System (CMS) like Ektron to get custom results for your content, or migrating content from Ektron to Episerver for greater content personalization, or helping you leverage a Marketing Automation Platform (MAP), like HubSpot, we do our best to use whatever tools we have at our disposal to help you meet your organization's goals.
In May of last year, I wrote about the basics of Using Bower and Gulp With Visual Studio 2015 to streamline workflow, as a way to show the tools we use to help our clients and the processes we go through to use them. Now, I want to take one of those tools, Gulp, a JavaScript task runner used to automate some tasks for front-end development, and touch on some nifty plugins for remote testing and syncing browsers/devices. Data shows that more and more users are finding content via mobile devices, and this is one way we make sure to help clients stay on top of that.
The two plugins that I will explain in more detail are ngrok and BrowserSync. I'm going to cover why and how to use them with Gulp, but you can also use them standalone in your project.
ngrok
Currently, ngrok states what it is for simply on their homepage: “Secure tunnels to localhost”. This is great for developers working in a local environment, but needing to test on other devices, such as smartphones and tablets. At one time, the process was pushing changes to the dev server to test, and then going back to local to make changes. No more. We can run ngrok to generate a public URL for our local project and share it for viewing on any device.
BrowserSync
BrowserSync offers a handful of features, including interaction sync, networking throttling for simulating slow connections, and URL history for pushing test URLs to devices, but the main feature that we rely on is live reloading. This allows all connected browsers and devices to automatically reload when changes are made to our project files, which is very handy for the front-end team to see their changes quickly on multiple devices.
Putting them together in Gulp
We’ve pulled ngrok and BrowserSync in to our Visual Studio (VS) project using npm (Node.js package manager), so now let’s take a look at how to get them working together with Gulp.
Below you'll find some lines of code with descriptions that should explain more about what we are doing.
// let's get browsersync and ngrok running
gulp.task('browser-sync', function() {
// kill existing instance when re-building
browserSync.exit();
// start ngrok, which will generate a random subdomain
ngrok.connect({
proto: 'http',
addr: 3000
}, function(err, url) {
// output the public URL
console.log('External: ' + url + '/');
// start browsersync
browserSync.init({
// load from the root of the project
startPath: '/',
proxy: {
// what do we want to serve?
target: 'http://myproject.local',
middleware: function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
}
},
socket: {
domain: url
}
});
});
// reload when assets in our compiled directory change
gulp.watch('core/compiled/**', function() {
browserSync.reload();
});
});
Running the task and testing
Now it's time to run our browser-sync task through Task Runner Explorer, which will output a public ngrok URL labeled "External".
External: https://2ef6436a.ngrok.io/
[BS] Proxying: http://myproject.local
We can open this URL from multiples devices and our interactions will sync, as well as live reloads when changes are saved to our watched project files.
Both of these tools are very handy during all stages of local development and testing and have significantly sped up our process of testing on mobile devices. This is essential for our clients, who may see the results of our having tested to make sure their projects work well in those environments, but may not get to see how it is done.
I hope this helps to demystify some of what are teams do to serve our partners every day when it comes to testing your Ektron and Episerver projects. If you have tools that you use for testing, we'd love to hear about your experience with them in the comments below.
