Introducing localinclude

Localinclude is a command-line tool to quickly test UI components with any page on the web. News Labber Tom Maslen explains how it works and why he built it.

As a developer who does lots of prototyping, I often find myself building projects independently of the website I intend to deploy to. The last part of this process involves deploying my prototype to a website where I will often find compatability problems: a JavaScript dependency causes an error, the CSS from the page impacts my component, etc.

There are ways to get around this. I could spin up the BBC News website sandbox to test it locally first, although this isn’t a simple process because getting the sandbox to work takes a long time. Often I find myself copying the source code of the intended host website, adding my prototype to it, and then deploying this quickly mocked-up test page to somewhere available on the Internet.

After doing this countless times I’ve decided - like all good software engineers should - to be lazy and automate this process. The outcome of this is a tool I’m calling “localinclude”. Using it is super easy (as long as you have NodeJS installed). Here’s a demo in 3 quick commands:

npm install -g localinclude // install localinclude
echo '<h1>LOCALINCLUDE is awesome!!!</h1>' > // create an example local include
localinclude --url --dompos '#lga' --include // start the tool

This gives you a simple local web server for you to look at. Here’s a screenshot of the demo above.

example screenshot

As you can see, I’ve created an example localinclude and deployed it into Google’s search page at a very specific position.

Not only is localinclude great for helping you test integration, it’s also handy for demoing your work. It’s really useful to give stakeholders as much context as possible when demoing your work, so being able to quickly spin up your prototype and add it to a live webpage is really powerful. Localinclude makes this super easy too.

Here’s an example of a prototype I’ve been working on, embedded into the BBC News website:

example screenshot

By quickly editing the parameters passed to localinclude, here it is again but on a different website!

example screenshot

Localinclude is an open sourced project. Steal, copy or contribute to it via its GitHub repository.