Elixir: Setup Chroxy and Chrome Remote Interface - [011]

In this episode we'll setup chroxy and chrome remote interface. This is so we can control the chrome driver through our code and automate tasks like server side rendering or generating screenshots.

• Chroxy
• Chrome Dev Tool Documentation

Setting up Chroxy

Let's begin this process by cloning down chroxy

git clone https://github.com/holsee/chroxy.git

Once we have it cd into the chroxy directory. Then let's compile the code.

mix do deps.get, compile

This will pretty much get all the dependencies and compile the code

Running Chroxy

We can run chroxy by using the mix run command

mix run --no-halt

This will start the chroxy service.

Setting up Chrome Remote Interface

We will use the elixir client library for Chrome Remote Interface, in mix.exs

defp deps do  [    #...    # For Chroxy    {:chroxy_client, "~> 0.1.0"},    {:chrome_remote_interface, "~> 0.1.0"},    #...  ]end

Now let's run the app using

iex -S mix

Working with Chrome Remote Interface

Now we will try and render a page using chrome

pid = ChroxyClient.page_session!(%{ host: "localhost", port: 1330 }){:ok, _res} = RPC.Page.navigate(pid, %{  url: "https://www.artellectual.com"}){:ok, result} = RPC.Runtime.evaluate(pid, %{   expression: "document.documentElement.outerHTML" })# return the htmlresult["result"]["result"]["value"]

That's pretty much it! We can output the html from the rendered page using the above code. In the next episode we will explore why this won't work in a production environment.